使用JavaScript提交表单时，为什么不提交表单中的输入和提交按钮？

Question

myform1发送button与价值button-value到服务器，但myform2和myform3没有。 为什么是这样？

<?php
if(empty($_POST)){
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Testing</title>  
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
            <script type="text/javascript"> 
                $(function(){
                    $( "#myform2, #myform3" ).submit(function( event ) {
                        event.preventDefault();
                        console.log(this,$(this).find(":input,:button").serializeArray());
                        alert('submit')
                        this.submit();
                    });

                });
            </script>
        </head>
        <body>
            <form name="myform" id="myform1" method="post">
                <button value="button-value" name="button" type="submit">button</button>
                <input type="test" value="123" name="data">
            </form>
            <form name="myform" id="myform2" method="post">
                <button value="button-value" name="button" type="submit">button</button>
                <input type="test" value="123" name="data">
            </form>
            <form name="myform" id="myform3" method="post">
                <input value="button-value" name="button" type="submit">
                <input type="test" value="123" name="data">
            </form>
        </body> 
    </html> 
    <?php
}
else {echo('<pre>'.print_r($_POST,1).'</pre>');}  
?>

Answer 1

表单可以有多个提交按钮。 如果调用表单的submit方法，则无法推断使用了哪个submit。 要获得提交输入以在帖子中注册，您必须积极使用它来提交表单。 我可以想到两种解决方法。

默认值置于隐藏输入中

您可以在<input type="hidden">字段中添加默认值。 如果以编程方式提交表单，则将隐藏字段用作值。 如果手动单击“提交”按钮，则将在以后的表单中使用该按钮。

        <form name="myform" id="myform2" method="post">
            <input type="hidden" value="button-value" name="button">
            <button value="button-value" name="button" type="submit">button</button>
            <input type="test" value="123" name="data">
        </form>

触发`click`事件，而不是`submit`事件

您也可以只触发表单按钮的click事件，这将触发POST中具有适当值的表单的submit 。 在您当前的代码中，此示例不太实用，因为正常的提交（将在触发click事件后触发）会被阻止并阻止。

使用JavaScript提交表单时，为什么不提交表单中的输入和提交按钮？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-26 18:54:27

默认值置于隐藏输入中

触发`click`事件，而不是`submit`事件

使用JavaScript提交表单时，为什么不提交表单中的输入和提交按钮？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-26 18:54:27

默认值置于隐藏输入中

触发click事件，而不是submit事件

解决方案1
1 已采纳 2016-02-26 18:54:27

触发`click`事件，而不是`submit`事件