2

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.

2
  • are you getting any error while clicking on button?
    – Vivek
    May 4, 2011 at 3:08
  • no, it just refreshes the page. May 4, 2011 at 3:09

2 Answers 2

1

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.

5
  • If it refreshes the page that means you either have an error in your javascript or the event.preventDefault(); isn't working. Try just $('#createbutton').click(function() { return false; }); and make sure the page doesn't submit. May 4, 2011 at 3:15
  • Just checked, it still submits. May 4, 2011 at 3:17
  • Can you post the whole script? May 4, 2011 at 3:30
  • Everything...just stick it on copypastecode.com or something. You shouldn't have to wrap it in an anonymous function if that's the only javascript you're doing. May 4, 2011 at 21:51
  • That's not the only stuff I have. It seems to be the only solution that works. May 4, 2011 at 22:16
0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.