2017-06-13 51 views
0

我正在尝试使用JQuery而不是upload表单,但$('#formId').submit()不起作用。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Upload Pricing</title> 
     <META CHARSET="UTF-8"> 
     <META lang="en"> 
     <META http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <style> 
      .uploadWrapper{ 
       width: 100%; 
       max-width: 400px; 
       margin: 30px auto; 
      } 
     </style> 
    </head> 
    <body> 

     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
        <div class="uploadWrapper"> 
         <h3>Upload Document for Pricing</h3> 
         <form id="docForm" method="post" action="<?PHP $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data"> 
          <div class="form-group"> 
           <label><em>* </em>User Type:</label> 
           <select class="form-control input-sm" id="userType"> 
            <option value="all">All</option> 
            <option value="restaurant">Restaurant</option> 
            <option value="channelPartner">Channel Partner</option> 
            <option value="agent">Delivery Agent</option> 
           </select> 
          </div> 
          <div class="form-group"> 
           <label><em>* </em>Select Document (pdf):</label> 
           <input type="file" class="input-sm" id="doc" name="doc"> 
          </div> 
          <div class="form-group"> 
           <input type="submit" class="input-sm" id="submit" name="submit" value="Submit"> 
           <span class="status"></span> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#submit').click(function(e){ 
        e.preventDefault(); 
        var doc = $('#doc').val(); 
        var extension = doc.substring(doc.lastIndexOf(".") + 1, doc.length); 
        extension = extension.toLowerCase(); 
        if (doc == '') { 
         $('.status').html('Please select pricing document'); 
        } 
        else if(extension != 'pdf'){ 
         $('.status').html('Document must be a pdf'); 
        } 
        else { 
         $('#docForm').submit(); 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+0

在最后的部分为什么不'$('#submit')。submit()'? – caramba

+1

可能是行动问题。在$ _SERVER ['PHP_SELF'];之前添加echo; –

+0

@caramba尝试了你的想法。还是行不通。点击提交后按钮不会发生什么 –

回答

3

您的问题来自e.preventDefault();在您的点击处理中,您已经告诉您要防止发生提交。如果相应地移动该行的if语句

$(document).ready(function() { 
    $('#submit').click(function(e) { 
     var doc = $('#doc').val(); 
     var extension = doc.substring(doc.lastIndexOf(".") + 1, doc.length); 
     extension = extension.toLowerCase(); 
     if (doc == '') { 
     $('.status').html('Please select pricing document'); 
     e.preventDefault(); 
     } else if (extension != 'pdf') { 
     $('.status').html('Document must be a pdf'); 
     e.preventDefault(); 
     } else { 
     $('#docForm').submit(); 
     } 
    }); 
    }); 

$('#docForm').submit()将被执行。但由于这已经是一个提交句柄最后else以及$('#docForm').submit();可以省略,因为它并不重要。

+0

有效。谢谢 –

相关问题