用jquery强制表单提交按钮点击答案

【问题标题】：force form submit button click with jquery用jquery强制表单提交按钮点击
【发布时间】：2016-12-31 00:19:49
【问题描述】：

试图从 JQuery 触发提交功能。我究竟做错了什么？从理论上讲，这应该有效。不过，我尝试了大约 4 种不同的方法。

我试过了

$('input#submit').trigger("click");

$( form:first ).submit();

$( form:first ).trigger("submit");

$('form#databaseActionForm').submit();

什么都没有（还）？！

代码：

<html lang="en">
<head>
    <title>Database Management</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
        <style>
            table td { border: 1px solid black; }
            table td:first-child { text-align: left; }
        </style>
    <script>
        <!--
        $(document).ready(function() {
            $('#erase').click(function() {
                if (confirm("Are you sure that you want to ERASE ALL DATA from the database?"))
                {
                    $('#buttonTypePressed').val("erase");
                    $('input#submit').trigger("click"); <!-- HERE -->
                }
            });

            $('#update').click(function() {
                var appID = $('#updateAppID').val();
                var field = $('#fieldName').val();
                var value = $('#newValue').val();

                if (appID == null || appID == "") {
                    alert("You must enter the ID number of the entry you wish to modify.");
                    $('#updateAppID').focus();
                }
                else if (field == null || field == "") {
                    alert("You must choose which field you wish to modify.");
                    $('#fieldName').focus();
                }
                else if (value == null || value == "") {
                    alert("You must choose the new value you wish to appear in the database.");
                    $('#newValue').focus();
                }
                else {
                    $('#buttonTypePressed').val("update");
                    $('input#submit').trigger("click"); <!-- HERE -->
                }
            });

            $('#delete').click(function() {
                var appID = $('#deleteAppID').val();

                if (appID == null || appID == "") {
                    alert("You must enter the ID number of the entry you wish to delete.");
                    $('#deleteAppID').focus();
                }
                else {
                    $('#buttonTypePressed').val("delete");
                    $('input#submit').trigger("click"); <!-- HERE -->
                }
            });
        });
        -->
    </script>
</head>
<body>
    <div id="container">
        <from id="databaseActionForm" name="databaseActionForm" method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
            <table border=0 style="margin: 50px auto; text-align: right;">
                <tr style="text-align: center; font-weight: bold; font-size: 1.5em; text-decoration: underline;">
                    <th>Action</th>
                    <th>Additional Info</th>
                    <th>Button</th>
                </tr>
                <tr name="Clear">
                    <td>Erase Database</td>
                    <td style="text-align: center;">ARE YOU SURE?</td>
                    <td><input type="button" id="erase" name="erase" value="ERASE ALL?" /></td>
                </tr>
                <tr name="Update">
                    <td>Update Value</td>
                    <td>
                        Entry ID: <input type="text" id="updateAppID" name="updateAppID" placeholder="App entryID" /><br />
                        Field Name: <input type="text" id="fieldName" name="fieldName" placeholder="Field to change" /><br />
                        New Value: <input type="text" id="newValue" name="newValue" placeholder="New value" /><br />
                    </td>
                    <td><input type="button" id="update" name="update" value="Update Value" /></td>
                </tr>
                <tr name="Delete">
                    <td>Delete Payment</td>
                    <td>
                        Entry ID: <input type="text" id="deleteAppID" name="deleteAppID" placeholder="App entryID" />
                    </td>
                    <td><input type="button" id="delete" name="delete" value="Delete Entry" /></td>
                </tr>
            </table>
            <input type="hidden" id="buttonTypePressed" name="buttonTypePressed" />
            <input type="submit" id="submit" name="submit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1"/>
        </form>
    </div>
</body>

【问题讨论】：

试试document.databaseActionForm.submit();
@Karthikeyan.V 试过了，document.getElementByID('databaseActionForm').submit(); 也试过了，但没用
您是否尝试过使用<form> 元素代替<from> 元素？
@nnnnnn 还没有尝试过...大声笑让我试一试。我发誓我已经盯着这个看了一个多小时

标签： javascript jquery html forms submit

【解决方案1】：

这里有2个问题，1是元素名称form打错了，你有from。

另一个是提交按钮的名称/ID，它不应该是submit，因为它会覆盖form元素的默认submit属性（函数）

<input type="submit" id="bsubmit" name="bsubmit" value="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />

然后只需使用下面的sn-p提交表单

$('#databaseActionForm').submit();

演示：Fiddle

【讨论】：

是的，问题是拼写错误。我坐在那里玩了几个小时的 JS，这只是一个拼写错误。羞耻！

【解决方案2】：

我认为问题在于您将“form”拼写为“from”。检查语法突出显示。之后，这些中的任何一个都将起作用：

$('form#databaseActionForm').submit();

$('#databaseActionForm').submit(); // referencing the form's ID

document.databaseActionForm.submit(); // referencing the form's NAME

【讨论】：