I know this seems like I should have immediately found the one example out there that simply explained this concept, and I can’t find the right one. The examples in tutorials out there use flickr as the request url, and I get it up to a point. I’m trying to handle a very complex form with four different buckets of info under one larger bucket of info. I though json would be a good choice. So I found an example that shows me how to serialize the data like this:
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
Which is great! Via an alert, I can see the json structure and my form elements. So I thought the rest would be totally simple. And here I am banging my head because I can’t find one simple example of HOW to SEND or REQUEST this serialized data from my processing page which needs to print, organize and calculate the values of what was sent.
So what I did next (and I’m sure it’s wrong, but perhaps this will illustrate how new I am to it and where I need to start in my understanding of it) was to write the serialized data out to a hidden field like so:
$('form').submit(function() {
var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">';
// alert($.toJSON($('form').serializeObject()));
alert(field);
document.write(field);
return true;
});
I’m using the GET method in the form and when it pops the alert it looks fine, then it goes to the next page. Only that hidden var I wrote out isn’t there. The rest of the form values are. I just WANT to see the darn json somehow so I can then use json.parse or whatever I have to use in PHP to decode it.
Here’s the complete code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Attendees</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script>
</head>
<body>
<form action="receive.php" method="get">
<p><br/>
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Preconference:<br/>
A:<input type="radio" name="gender" value="A"/><br/>
B:<input type="radio" name="gender" value="B"/><br/>
What days:<br/>
ConfA:
<input type="checkbox" name="conf[]" value="ConfA"/><br/>
ConfB:
<input type="checkbox" name="conf[]" value="ConfB"/><br/>
ConfC:
<input type="checkbox" name="conf[]" value="ConfC"/>
</p>
<p><br/>
<input name="quote" type="text" value="Enter your meal preference" size="20">
</p>
<p><br/>
Select a role:<br/>
<select name="education">
<option value="decision">Decision Maker</option>
<option value="person">Person</option>
<option value="fcg">Family</option>
</select>
</p>
<p><br/>
Select your educational credits:<br/>
<select size="3" name="edu">
<option value="nursing">Nursing</option>
<option value="welding">Welding</option>
<option value="case">Case Managers</option>
</select>
</p>
<hr>
First Name:<input type="text" name="Fname2" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname2" maxlength="36" size="12"/> <br/>
Preconference:<br/>
A:<input type="radio" name="gender" value="A2"/><br/>
B:<input type="radio" name="gender" value="B2"/><br/>
What days:<br/>
ConfA:
<input type="checkbox" name="conf[]" value="ConfA2"/><br/>
ConfB:
<input type="checkbox" name="conf[]" value="ConfB2"/><br/>
ConfC:
<input type="checkbox" name="conf[]" value="ConfC2"/>
</p>
<p><br/>
<input name="quote2" type="text" value="Enter your meal preference" size="20">
</p>
<p><br/>
Select a role:<br/>
<select name="education2">
<option value="decision2">Decision Maker</option>
<option value="person2">Person</option>
<option value="fcg2">Family</option>
</select>
</p>
<p><br/>
Select your educational credits:<br/>
<select size="3" name="edu2">
<option value="nursing2">Nursing</option>
<option value="weld2">Welding</option>
<option value="case2">Case Managers</option>
</select>
</p>
<script type="text/javascript">
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$('form').submit(function() {
var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">';
// alert($.toJSON($('form').serializeObject()));
alert(field);
document.write(field);
return true;
});
</script>
<p><input type="submit" /></p>
</form>
</body>
</html>
How do I get it to just communicate in some fashion with the receive.php page? Thanks for fielding such a newbie question. I did search for awhile, but can’t figure out if I need to use a framework, or if there is a nice straightforward way…. There were so many different kinds of examples that were more complex than this problem seemed to call for.
Try putting the hidden input there to begin with
And then in your javascript just do…