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

我發現了以下工作：

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

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

的documentation of .submit()狀態，即

種

形式及其子元素不應該使用輸入名或ID與表格的屬性衝突，如提交，長度或方法。名稱衝突可能導致令人困惑的失敗。

你有一個input有namesubmit。

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

我試過它，沒有這個名字。它沒有工作！