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

Question

I am creating a form such that when the user click the "submit" button, it prevents the default action, serializes a subset of the fields, and then proceeds to submit all of the information via the POST array (PHP).

I am encountering a problem where the form is basically not submitting when I use the .submit() method. When I disable my javascript, the form submits fine (just with the wrong information, as the array is not serialized). But as soon as I re-enable my js, clicking the submit button does nothing except show my test console.log(var) in console. Here is some of my code, hopefully you can see what I am doing wrong. All of the online documentation says to use .submit(), but it doesn't seem to work, no matter what I try.

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>

And the accompanying 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 (which I don't think is the issue but figured I would include it anyways)

<?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);

}

?>

I wouldn't normally include so much HTML but I thought maybe I messed something up in there that may be the issue, and I just don't realize it. I tried to take out most of the break and header tags to clean up the code a bit.

Thanks for any help!

Regards.

Answer 1

The documentation of .submit() states, that

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit , length, or method. Name conflicts can cause confusing failures.

You have an input that has the name submit .

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

I tried it with and without that name. It works without!

Answer 2

You don't have to preventDefault() , the Code will still be run before the Form is submitted.

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

Answer 3

Just change:

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

To:

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

Also rename your submit element as @Matmarbon has so eloquently explained.

Explanation:

$('#entryForm').submit(); simply triggers the submit event and takes you back to square one.

$('#entryForm')[0].submit(); submits the form ... more like the default action, without triggering the submit event.

Answer 4

You can try something like below

In HTML just add

<form id="entryForm" action="add_entry.php" method="post" onsubmit="return false;">

And in JS function

function initEntrySubmission(e) {
    var serializedProtocol = $("#protocolForm :input").serialize();
    $('#serialInput').val(serializedProtocol);
    $('#entryForm').removeAttr('onsubmit');
    $('#entryForm').submit();
}

Answer 5

I found the following to work:

<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>

The main things to do are to add an onSubmit to your form tag. The function must return either true or false. Return true will submit the form.

Also, you do need to clean up your HTML, there are select statements in there, without closing tags and your submit button

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

has no ending > , it also has 2 type attributes type="button" and type="submit" (its both a button and a submit?) and has a name=submit , which is also unnecessary .