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 Form (который я не думаю, что это проблема, но полагал, что я бы включить его в любом случае)

<?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, есть выберите заявления в там, без закрытия тегов и ваша кнопка отправки

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

уже не заканчивается >, он также имеет два типа атрибутов 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(); 

To:

$('#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

The documentation of .submit() состояний, что

Формы и их дочерние элементы не должны использовать входные имена или идентификаторы, которые конфликтуют со свойствами формы, такие как представить, длину или метод. Конфликты имен могут вызывать запутывающие сбои.

У вас есть input, который имеет расширение namesubmit.

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

Я пробовал его с этим именем и без него. Он работает без!