jQuery $('#id').submit() not working


jQuery $('#id').submit() not working

我正在创建一个表单,当用户单击"submit"按钮时,它会阻止默认操作,序列化字段子集,然后继续通过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标签来清理代码。

谢谢你的帮助!

问候。

.submit()的文档声明,

表单及其子元素不应该使用输入名称或与表单属性冲突的id,如 submit、长度或方法。名称冲突会导致令人困惑的失败。

你有一个inputname submit

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

我试了试有没有那个名字。它工作没有!

我发现下面的工作:

<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,这里有选择语句,没有结束标签和提交按钮

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

没有结尾的>,它也有两个类型属性type="button"type="submit"(它既是一个按钮和一个提交?),并有一个name=submit,这也是不必要的。

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

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

您可以尝试下面的内容

在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();
}

修改:

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

:

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

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

解释:

$('#entryForm').submit();只是触发submit事件,让你回到起点。

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