jQuery $('#id').submit() 不工作

Question

我正在创建一个表单，当用户单击“提交”按钮时，它会阻止默认操作，序列化字段子集，然后继续通过 POST 数组 (PHP) 提交所有信息。

我遇到一个问题，当我使用 .submit() 方法时，表单基本上没有提交。当我禁用我的 javascript 时，表单提交正常（只是信息错误，因为数组未序列化）。但是，一旦我重新启用我的 js，单击提交按钮除了在控制台中显示我的测试 console.log(var) 之外什么都不做。这是我的一些代码，希望你能看到我做错了什么。所有在线文档都说要使用 .submit()，但无论我尝试什么，它似乎都不起作用。

HTML：

<form id="entryForm" action="add_entry.php" method="post">
        <div class="leftDiv">
        <input type="text" class="inputFormTitle" name="entryName" placeholder="Name your entry..." />
        <span class="regText">
        <b>Entry Properties</b>
        Specify entry properties, permissions, etc.</span>
        <table class="formTable">
        <tr>
            <th>Parameter</th>
            <th>Value</th>
        <tr>
            <td>Group</td>
            <td><select name="group"><option></option><option>Graham Test</option></select>
        </tr>
        <tr>
            <td>Project</td>
            <td><select name="project"><option></option><option>Project 1</option><option>Project 2</option></select>
        </tr>
        <tr>
            <td>Protocol</td>
            <td>        
                <select id="protocolloader" name="protocol">
                <option></option>
                <option>PCR & Gel</option>
                <option>Item Storage</option>
        <tr>
            <td>Permissions</td>
            <td><input type="radio" name="permission" value="0">Only I can access this entry</input>
                <input type="radio" name="permission" value="1">Only group members can access this entry</input>

                <input type="radio" name="permission" value="2">Everyone can access this entry</input>

        </select>
        </tr>
        </table>
        <input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
        <br/>
        </div>
        <div class="rightDiv">      
        <input type="text" class="inputFormTitle" id="ppt" placeholder="Please select a protocol" disabled/>
        <div class="formHolder" id="protocolForm">
        </div>
        </div>
        <input type="hidden" id="serialInput" name="protocolValues" value="nuttin" />
    </form>

以及随附的 javascript：

var entrySubmit = $('#submitEntry');
entrySubmit.on('click', initEntrySubmission);

function initEntrySubmission(e) {
    e.preventDefault(); 
    var serializedProtocol = $("#protocolForm :input").serialize();
    console.log(serializedProtocol);
    $('#serialInput').val(serializedProtocol);
    $('#entryForm').submit();
}

PHP 表单（我认为这不是问题，但我想我还是会包含它）

<?php // add_entry.php

session_start();

include_once 'creds.php';
$con=mysqli_connect("$db_hostname","$db_username","$db_password","$db_database");

if (isset($_POST['group'])){

$lab = $_SESSION['labname'];
$author = $_SESSION['username'];
$name = $_POST['entryName'];
$group = $_POST['group'];
$protocol = $_POST['protocol'];
$permission = $_POST['permission'];
$array = $_POST['serialInput'];
$filearray = $_POST['fileArray'];
$project = $_POST['project'];



    $query = "INSERT INTO data (protocol, name, lab, author, uniquearray, filearray, group, project, permissionflag) 
                    VALUES ('$protocol', '$name', '$lab', '$author', '$array', '$filearray', '$group', 'project', '$permission')";

    mysqli_query($con, $query);

    mysqli_close($con);

}

?>

我通常不会包含这么多 HTML，但我想也许我在那里搞砸了一些可能是问题的东西，我只是没有意识到这一点。我试着去掉大部分的break和header标签来清理一下代码。

感谢您的帮助！

问候。

Answer 1

documentation of .submit() 声明

表单及其子元素不应使用输入名称或与表单属性冲突的ID，例如 提交、长度或方法。名称冲突可能会导致令人困惑的失败。

您有一个input，其中包含name submit。

<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" />

我试过有没有那个名字。没有它也能工作！

Answer 2

我发现以下方法可行：

<script>
function initEntrySubmission() {
  var serializedProtocol = $("#protocolForm :input").serialize();
  alert(serializedProtocol);
  $('#serialInput').val(serializedProtocol);
  return true;
}
</script>

<form id="entryForm" action="" method="post" onSubmit="return initEntrySubmission();">
...
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" value="Submit Entry"/>
</form>

要做的主要事情是在表单标签中添加一个 onSubmit。该函数必须返回真或假。返回 true 将提交表单。

另外，你确实需要清理你的 HTML，那里有选择语句，没有结束标签和你的提交按钮

<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /

没有结尾>，还有type="button"和type="submit"两个类型属性（既是按钮又是提交？）还有name=submit，这也是没必要的。

Answer 3

您不必preventDefault()，代码仍然会在提交表单之前运行。

function initEntrySubmission() {
    var serializedProtocol = $("#protocolForm :input").serialize();
    console.log(serializedProtocol);
    $('#serialInput').val(serializedProtocol);
}

Answer 4

你可以试试下面的方法

在 HTML 中只需添加

<form id="entryForm" action="add_entry.php" method="post" onsubmit="return false;">

在JS函数中

function initEntrySubmission(e) {
    var serializedProtocol = $("#protocolForm :input").serialize();
    $('#serialInput').val(serializedProtocol);
    $('#entryForm').removeAttr('onsubmit');
    $('#entryForm').submit();
}

Answer 5

只是改变：

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

收件人：

$('#entryForm')[0].submit();

还重命名您的提交元素，因为 @Matmarbon 已经如此雄辩地解释了。

说明：

$('#entryForm').submit(); 只是触发submit 事件并带您回到第一格。

$('#entryForm')[0].submit(); 提交表单...更像默认操作，不触发submit 事件。