jQuery不会提交表格

Question

<!-- /Search box --> 
<aside class="vehicle-search"> 
    <header> 
     <h2>Find your vehicle</h2> 
    </header> 

    <article> 
     <script> 
      jQuery(function() { 
       jQuery('.go').click(function(e) { 
        e.preventDefault(); 
        jQuery('#vehicle').submit(function (event){ 
         var action = ''; 
         var actionid = jQuery('#categoryid').children(':selected').attr('value'); 

         if (actionid == 1) { 
          action = 'sales/new-motorhomes'; 
         } 
         if (actionid == 2) { 
          action = 'sales/used-motorhomes'; 
         } 
         if (actionid == 3) { 
          action = 'sales/caravans'; 
         } 
         jQuery(this).attr('action', action); 
        }); 
       }); 
      }); 
     </script> 
     <form id="vehicle" action="sales/new-motorhomes" method="post"> 
      <h3>Manufacturer</h3> 
      <!-- <input type="submit"> --> 
      <select name="manufacturer" id="manufacturers"> 
       <option value="1">Auto-Trail</option> 
       <option value="2">Adria</option> 
       <option value="3">Elddis</option> 
      </select> 

      <h3>Vehicle Type</h3> 
      <select name="category" id="categoryid"> 
       <option value="1">New Motorhomes</option> 
       <option value="2">Used Motorhomes</option> 
       <option value="3">Caravans</option> 
      </select> 

      <h3>Berths</h3> 
      <input type="text" name="berth" id="berths" style="border: 0; color: #f6931f; font-weight: bold;" /> 
      <div id="slider-berths"></div> 
     </form> 
    </article> 

    <footer> 
     <span class="goButton"> 
      <a class="go" href=""></a> 
     </span> 
    </footer> 
</aside> 
<!-- /Search box --> 

我在这里错过了什么..？

Answer 1

由于submit -event刚刚宣布，但从来没有叫你必须把你的click -handler的submit -event外，只是触发它上点击：

http://fiddle.jshell.net/rvx27/

jQuery(function() { 
    jQuery('form:first').submit(function (event) { 
     var action = ''; 
     var actionid = jQuery('#categoryid').children(':selected').attr('value'); 

     if (actionid == 1) { 
      action = 'sales/new-motorhomes'; 
     } 
     if (actionid == 2) { 
      action = 'sales/used-motorhomes'; 
     } 
     if (actionid == 3) { 
      action = 'sales/caravans'; 
     } 
     jQuery(this).attr('action', action); 

    }); 
    jQuery('.go').click(function (e) { 
     e.preventDefault(); 
     jQuery('form:first').submit(); 
    }); 
}); 

Answer 2

当你使用jquery提交表单时，你需要使用表单id。

更换jQuery('form:first').submit(function (event){

随着jQuery('#vehicle').submit(function (event){

Answer 3

你为什么不使用id选择

jQuery('#vehicle').submit(); 

这是更快，比:first更好，应提交表单..

Answer 4

您的代码：

jQuery('form:first').submit(function (event){ ... }); 

...绑定提交处理程序。要提交您所需要的形式：

jQuery('form:first').submit(); 

如果表单可以提交的唯一途径是通过该链接就可以直接做链接的点击处理程序内的动作设定的东西在表单上调用.submit()之前。或者单独绑定提交处理程序（从单击处理程序外部绑定或它会在每次单击时保持绑定其他处理程序），然后在点击处理程序中调用.submit()。

Answer 5

试试这个：

jQuery(function() { 

      jQuery('.go').click(function(e) { 
       e.preventDefault(); 

       var action = ''; 
       var actionid = jQuery('#categoryid').children(':selected').attr('value'); 

       if (actionid == 1) { 
        action = 'sales/new-motorhomes'; 
       } 
       if (actionid == 2) { 
        action = 'sales/used-motorhomes'; 
       } 
       if (actionid == 3) { 
        action = 'sales/caravans'; 
       } 
       jQuery('form:first').attr('action', action); 

       jQuery('form:first').submit() 

       }); 
      }); 
     }); 

Answer 6

该代码

jQuery('form:first').submit(function (event){}); 

将分配一个事件处理程序，以便在提交表单时调用。 它确实没有提交表格。

要提交你必须调用

jQuery('form:first').submit(); 

，或者在形式提交按钮的形式。

你的代码可以作为rewritted

jQuery(document).ready(function() { 
    jQuery('form:first').submit(function (event){ 
     var action = ''; 
     var actionid = jQuery('#categoryid').children(':selected').attr('value'); 

     if (actionid == 1) { 
      action = 'sales/new-motorhomes'; 
     } 
     if (actionid == 2) { 
      action = 'sales/used-motorhomes'; 
     } 
     if (actionid == 3) { 
      action = 'sales/caravans'; 
     } 
     jQuery(this).attr('action', action); 

     return true; // Important to return okay to submit 

    }); 

    jQuery('.go').click(function(e) { 
     e.preventDefault(); 
     jQuery('form:first').submit(); // Trigger the submission 
    }); 
}); 

此代码将事件处理程序document.ready()事件，然后随后的点击触发提交。