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 ，這也是不必要的。