title: How can I submit this form using json to another page and parse json in PHP or jQuery?
body: <p>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:</p>
  
  <pre><code>    $.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;
  };
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>$('form').submit(function() {
      var field = '&lt;input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '"&gt;';
     // alert($.toJSON($('form').serializeObject()));
  
      alert(field);
      document.write(field);
      return true;
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's the complete code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt; 
  &lt;html lang="en"&gt; 
  &lt;head&gt; 
      &lt;title&gt;Attendees&lt;/title&gt; 
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"&gt;&lt;/script&gt; 
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;form action="receive.php" method="get"&gt; 
    &lt;p&gt;&lt;br/&gt; 
      First Name:&lt;input type="text" name="Fname" maxlength="12" size="12"/&gt; &lt;br/&gt; 
      Last Name:&lt;input type="text" name="Lname" maxlength="36" size="12"/&gt; &lt;br/&gt; 
      Preconference:&lt;br/&gt; 
      A:&lt;input type="radio" name="gender" value="A"/&gt;&lt;br/&gt; 
      B:&lt;input type="radio" name="gender" value="B"/&gt;&lt;br/&gt; 
      What days:&lt;br/&gt; 
      ConfA:
    &lt;input type="checkbox" name="conf[]" value="ConfA"/&gt;&lt;br/&gt; 
      ConfB:
    &lt;input type="checkbox" name="conf[]" value="ConfB"/&gt;&lt;br/&gt; 
      ConfC:
    &lt;input type="checkbox" name="conf[]" value="ConfC"/&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt;
      &lt;input name="quote" type="text" value="Enter your meal preference" size="20"&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt; 
      Select a role:&lt;br/&gt; 
      &lt;select name="education"&gt;
        &lt;option value="decision"&gt;Decision Maker&lt;/option&gt;
        &lt;option value="person"&gt;Person&lt;/option&gt;
        &lt;option value="fcg"&gt;Family&lt;/option&gt;
      &lt;/select&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt; 
      Select your educational credits:&lt;br/&gt; 
      &lt;select size="3" name="edu"&gt;
        &lt;option value="nursing"&gt;Nursing&lt;/option&gt;
        &lt;option value="welding"&gt;Welding&lt;/option&gt;
        &lt;option value="case"&gt;Case Managers&lt;/option&gt;
      &lt;/select&gt; 
    &lt;/p&gt;
    &lt;hr&gt;
        First Name:&lt;input type="text" name="Fname2" maxlength="12" size="12"/&gt; &lt;br/&gt; 
      Last Name:&lt;input type="text" name="Lname2" maxlength="36" size="12"/&gt; &lt;br/&gt; 
      Preconference:&lt;br/&gt; 
      A:&lt;input type="radio" name="gender" value="A2"/&gt;&lt;br/&gt; 
      B:&lt;input type="radio" name="gender" value="B2"/&gt;&lt;br/&gt; 
      What days:&lt;br/&gt; 
      ConfA:
    &lt;input type="checkbox" name="conf[]" value="ConfA2"/&gt;&lt;br/&gt; 
      ConfB:
    &lt;input type="checkbox" name="conf[]" value="ConfB2"/&gt;&lt;br/&gt; 
      ConfC:
    &lt;input type="checkbox" name="conf[]" value="ConfC2"/&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt;
      &lt;input name="quote2" type="text" value="Enter your meal preference" size="20"&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt; 
      Select a role:&lt;br/&gt; 
      &lt;select name="education2"&gt;
        &lt;option value="decision2"&gt;Decision Maker&lt;/option&gt;
        &lt;option value="person2"&gt;Person&lt;/option&gt;
        &lt;option value="fcg2"&gt;Family&lt;/option&gt;
      &lt;/select&gt;
    &lt;/p&gt;
    &lt;p&gt;&lt;br/&gt; 
      Select your educational credits:&lt;br/&gt; 
      &lt;select size="3" name="edu2"&gt;
        &lt;option value="nursing2"&gt;Nursing&lt;/option&gt;
        &lt;option value="weld2"&gt;Welding&lt;/option&gt;
        &lt;option value="case2"&gt;Case Managers&lt;/option&gt;
      &lt;/select&gt; 
    &lt;/p&gt;
  
  
  &lt;script type="text/javascript"&gt; 
  
  $.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 = '&lt;input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '"&gt;';
     // alert($.toJSON($('form').serializeObject()));
  
      alert(field);
      document.write(field);
      return true;
  });
  
  &lt;/script&gt; 
  &lt;p&gt;&lt;input type="submit" /&gt;&lt;/p&gt; 
  &lt;/form&gt; 
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p>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.</p>