为什么在使用 JavaScript 提交表单时不提交输入和提交按钮

Why isn't submit inputs and submit buttons submitted in form when using JavaScript to submit form?

本文关键字：提交 输入 按钮 表单 JavaScript 为什么      更新时间：2023-09-26

myform1将值button-value的button发送到服务器，但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>');}  
?>
表单

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

放置在隐藏输入中的默认值

您可以在<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事件

您也可以只触发表单按钮的单击事件，该事件反过来将触发表单在 POST 中具有适当值的表单submit。 对于您当前的代码，将其放在示例中不太实用，因为nomal提交（将在触发单击事件后触发）被中断和阻止。

相关文章：