2013-02-27 144 views
0

晚上好,我有一個HTML表單,其中包含一個提交按鈕,除了執行表單操作之外的其他操作,我希望這些提交按鈕做一個動作,然後做表單的動作,那個按鈕做一個很好的jQuery的slideUp(),但是當我將它嵌入到表單中時,它會執行表單的動作並忽略slideUp()行爲,有什麼可能在提交表單之前先讓該按鈕執行slideUp()的方法?如何讓表單中的提交按鈕在執行表單操作之前執行某些操作

這裏的形式:

<form action="AddNewCar" method="get"> 
      <table BORDER=2 BORDERCOLOR=YELLOW width="300px"> 
       <tr> 
        <td>Description: <input type="text" name="desc" /></td> 
        <td>Quantity:<input type="text" name="qunt" /></td> 
        <td>Price: <input type="text" name="price" /></td> 
       </tr> 

       <tr> 
        <td>CC.No: <input type="text" name="cc" /></td> 
        <td>Engine: <input type="text" name="engine" /></td> 
        <td>Cylinder.No: <input type="text" name="cylinder" /></td> 
       </tr> 

       <tr> 
        <td>Max-speed: <input type="text" name="speed" /></td> 
        <td>Petrol-type: <input type="text" name="ptr-type" /></td> 
        <td>Petrol-capacity: <input type="text" name="ptr-cpcty" /></td> 

       </tr> 
       <tr> 

        <td colspan="3"><input type="submit" class="btn1" value="Add" onclick="addNewCar()" /></td> 

       </tr> 
      </table> 




     </form> 

和這裏的腳本應該先天下之憂執行:

<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 

$(".btn1").click(function() { 
     $('#toggleText').slideUp(); 
    }); 



</SCRIPT> 
+0

是什麼toggleText在你的例子有與該ID不派息? – 2013-02-27 21:43:56

回答

3
$(".btn1").on('click', function(e) { 
    e.preventDefault() 

    var self = this; 
    $('#toggleText').slideUp('fast', function() { 
     self.form.submit(); 
    }); 
}); 
0

你應該把上滑在一個方法中,並在提交時調用它

<form action="AddNewCar" onsubmit="slideupmethod" method="get"> 

function slideupmethod(){ 
    $('#toggleText').slideUp(); 
} 
0

您可以創建一個提交按鈕,它使用onclick來觸發一個函數,然後提交您的表單。例如。

爲HTML按鈕提交

<input type="button" value="Submit Order" class="btn_submit" onclick="submitOrder()" /> 

你的JavaScript功能

//function called when submit button pressed 
function submitOrder() { 

    //perform client side form validation and other things 

    //submit the form 
    $('#yourFormId').submit(); 
} 

或者,使用您目前擁有的按鈕。您可以防止在按下按鈕時提交表單,執行所需的操作,然後提交表單。

的JavaScript

$('form').submit(function(evt){ 
//prevent form from submitting 
evt.preventDefault(); 
//do required actions 

//submit form 
$('form').submit(); 

}); 
相關問題