Jquery Serialization not working

Question

Have a simple form (only extract fields here) but for some reason the JQserilization is not working; looks fine in alert() but only the first form field gets posts. Suggestions please - thanks in advance

Form:

<form id="neweventform" method="post" action="">
<div class="grid_4 alpha">Setup date *</div>
<div class="grid_7 omega">
<select name="setup_day" id="setup_day"><?php days_list(); ?></select>
<select name="setup_month" id="setup_month"><?php month_list(); ?></select>
<select name="setup_year" id="setup_year"><?php year_list(); ?></select> 
<div class="grid_11">
<input type="submit" name="createevent" value="Create" id="createevent" />
</div>
</form>

Jquery

$j(document).ready(function(){
$j('#neweventform').live('submit',function () {
var data= $j('#neweventform').serialize();
alert(data);
$j.ajax({type: "POST", url: "scripts/process.php",data: "newevent=newevent&event_options=" + data, cache: false, complete: function(data){ 
$j('#neweventform').fadeOut(2000),loading.fadeOut('slow'),$j('#content').fadeIn(2000), $j('#content').load('scripts/events.php #eventslist'); 
}
});
return false;
});
});

And the PHP processing

if(isset($_POST['newevent'])) :
$insert = mysql_query("INSERT INTO events (event_options) VALUES ('".$_POST['event_options']."')");
endif;

Any suggestions?

Answer 1

first. Try doing a simple

<?php

print_r($_POST);

?>

to see what are you getting on the post var.

Second. Rename your parameter

var data

to something more "exclusive"

I don't recall at the moment if you can have a conflict with the "data" symbol used to make the call but at least you can start debugging from here.

Answer 2

Your data will be serialized into something like this:

setup_day=1&setup_month=2&setup_year=2010

You then construct your data like this:

newevent=newevent&event_options=setup_day=1&setup_month=2&setup_year=2010

This query string is wrong (two '=' without an '&') and probably this the root of your problem.

Answer 3

Try this:

$j.ajax({
    type: "POST", 
    url: "scripts/process.php",
    data: { newevent: newevent, event_options: $j('#neweventform').serialize() },
    cache: false, 
    complete: function(data) { 
        ...
    }
});

Answer 4

Have a look how serialize() works. It creates a string that, in your case, should look like this:

"setup_day=foo&setup_month=bar&setup_year=baz"

Then you concat this string with another (as data), which results in an invalid parameter string:

data: "newevent=newevent&event_options=" + data

// gets
"newevent=newevent&event_options=setup_day=foo&setup_month=bar&setup_year=baz"

---

Depending what type event_options is in your database (from the data in your form I assume it is a field containing a date), you might want to do this:

Javascript:

data: "newevent=newevent&" + data

PHP (sanitize the user input!):

if(isset($_POST['newevent'])) :
    $date = $_POST['setup_year']. '-' . $_POST['setup_month'] . '-' . $_POST['setup_day'];
    $insert = mysql_query("INSERT INTO events (event_options) VALUES ('". $date . "')");
endif;

Answer 5

Checklist:

-make sure "$j" is linked to jQuery object
-replace .live() with .bind()
-use $('this') within your event handler
-use more line breaks (omg)
-see other comments above/below

Kind Regards

--Andy

Answer 6

OK, tried a mix of, but eventually got this to work:

$j(document).ready(function(){

$j('#neweventform').live('submit',function () { var optdata= $j('#neweventform').serialize(); $j.ajax({ type: "POST", url: "scripts/process.php", data: "newevent=" + $j('#neweventform').serialize(), cache: false, complete: function(data) { $j('#neweventform').fadeOut(2000), loading.fadeOut('slow'), $j('#content').fadeIn(2000), $j('#content').load('scripts/events.php #eventslist'); } }); return false; }); });

then in the PHP

if(isset($_POST['newevent'])) :

$tryit = serialize($_POST); $insert = mysql_query("INSERT INTO events (event_options) VALUES ('".$tryit."')"); endif;