CODEWITHSUNDEEP
serializationjquery
Trevor Arjeski
Trevor Arjeski

Reputation: 2168

jquery ajax serialize problem

Just another humiliating struggle in my journey to screw up everything that has to do with jquery:

I'm trying to post a form to a php page create.php

On the click of a button (surprise) I serialize a form and post it to the php page. Like so:

$('#createbutton').click(function (event) {
    event.preventDefault();
    $.post("create.php", $("#creation").serialize());
});

Here is the form:

<form method="post" id="creation">
        Type:<select name="table">
        <option value="Standard">Standard</option>
        <option value="Special">Special</option>
        <option value="Writing">Writing</option>
        </select></br></br>
        <select name="department">
        <option value="CSC">CSC</option>
        <option value="MAT">MAT</option>
        </select>
        <input value="100" size="3" type="text" name="CRN" maxlength="3"/></br>
        Course Title:</br> <input size="32" type="text" name="title" maxlength="32" placeholder="Enter a title"/></br>
        Date received by UCF: </br><input name="addDate" id="datepicker" type="text" placeholder="Click here to add date"></br>
        LEP: <input type="checkbox" name="lep" value="1" /></br>
        </br></br>
        <button id="createbutton" class="ui-state-default ui-corner-all">Create</button>
        </form>

None of it works, not even the event.preventDefault();. It seems so simple, I just don't know what I missed. If anyone can spot an error, it will allow me to go to sleep. I appreciate it. Thanks.

Upvotes: 2

Views: 2497

Answers (2)

Trevor Arjeski
Trevor Arjeski

Reputation: 2168

I guess I just had to wrap the event in an anonymous function:

$(function (){
$('#createbutton').click(function () {
    $.post('create.php', $('#creation').serialize());
});
});

Upvotes: 0

Mike Neumegen
Mike Neumegen

Reputation: 2486

I usually return false in the event function to prevent the default action but what you have should work as well.

You need to do some investigation as to why it's not working. console.log is a fantastic tool for debugging along with Google Chrome's Developer tools.

To debug this I would first change the function to this:

$('#createbutton').click(function (event) {
    console.log($("#creation").serialize()));
    return false;
});

You can the see if the serialize form data is what you expect.

The next step would be to look at the outgoing data sent by your ajax call. You can do this in the "Network" tab in Chrome's Developer tools.

Upvotes: 1

Related Questions