Question

我正在创建一个表单，当用户点击＆＃34;提交＆＃34;按钮，它阻止默认操作，序列化字段的子集，然后继续通过POST数组（PHP）提交所有信息。

我遇到的问题是，当我使用.submit（）方法时，表单基本上没有提交。当我禁用我的javascript时，表单提交正常（只是错误的信息，因为数组没有序列化）。但是一旦我重新启用我的js，单击提交按钮除了在控制台中显示我的test 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 ，例如 < em>提交 ，长度或方法。名称冲突可能导致令人困惑的失败。

您的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，这是也没必要。

jQuery $（＆＃39; #id＆＃39;）。submit（）无效

5 个答案: