如何让表单中的提交按钮在执行表单操作之前做一些事情 [英] how to let a submit button in a form do something before executing the action of the form

问题描述

晚上好，我有一个HTML表单，它包含一个提交按钮，除了执行表单的动作之外，我希望这些提交按钮先执行一个动作，然后执行表单的动作，该按钮做一个漂亮的jQuery的slideUp（）但是当我将它嵌入到表单中时，它会执行表单的动作并忽略slideUp（）行为，在提交表单之前先让那个按钮先执行slideUp（）

< form action =AddNewCarmethod = GET >
< table BORDER = 2 BORDERCOLOR = YELLOW width =300px>
< tr>
< td>说明：< input type =textname =desc/>< / td>
< td>数量：< input type =textname =qunt/>< / td>
< td>价格：< input type =textname =price/>< / td>
< / tr>

< tr>
< td> CC.No：< input type =textname =cc/>< / td>
< td>引擎：< input type =textname =engine/>< / td>
< td> Cylinder.No：< input type =textname =cylinder/>< / td>
< / tr>

< tr>
< td>最高速度：< input type =textname =speed/>< / td>
< td> Petrol-type：< input type =textname =ptr-type/>< / td>
< td>汽油容量：< input type =textname =ptr-cpcty/>< / td>

< / tr>
< tr>

< td colspan =3>< input type =submitclass =btn1value =Addonclick =addNewCar（）/>< / td> ;

< / tr>
< / table>




< / form>

以下脚本应该在其他任何地方执行：

 < script type =text / javascriptsrc =jquery-1.9.1.min.js>< / script> 
  

  $（'＃toggleText'）。slideUp（）; 
}）; 
 
 
 
< / SCRIPT> 
  

解决方案

  $（ .btn1）。on（'click'，function（e）{
 e.preventDefault（）
 
 var self = this; 
 $（'＃toggleText'） .slideUp（'fast'，function（）{
 self.form.submit（）; 
}）; 
}）; 
  

Good evening, i have a HTML form that contains a submit button that does something other than executing the action of the form, i want these submit button to do an action first then do the action of the form, that button do a nice jquery slideUp() but when i embed it in a form it does the action of the form and neglect the slideUp() behavior, what are the possible ways to let that button do the slideUp() first before submitting the form?

here's the form:

    <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>

and here's the script is supposed to execute before anything else:

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

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



</SCRIPT>

解决方案

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

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

这篇关于如何让表单中的提交按钮在执行表单操作之前做一些事情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！