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

.submit()的文档指出，

表单及其子元素不应使用与表单属性（ 例如 Submit ，length或method）冲突的输入名称或ID。 名称冲突可能导致混乱的故障。

您input的name submit 。

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

我尝试过有没有这个名字。 没有它就可以工作！

Answer 2

您无需preventDefault() ，在提交表单之前，代码仍将运行。

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

Answer 3

只是改变：

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

至：

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

也将您的提交元素重命名为@Matmarbon如此雄辩地解释过。

说明：

$('#entryForm').submit(); 只需触发submit事件并带您回到第一个方框。

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

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

我发现以下工作：

<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或false。 返回true将提交表单。

另外，您确实需要清理HTML，其中有select语句，没有关闭标签和提交按钮。

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

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