title: How to submit a form with AJAX/JSON?
body: <p>Currently my AJAX is working like this:</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;a href='one.php' class='ajax'&gt;One&lt;/a&gt;    
  &lt;div id="workspace"&gt;workspace&lt;/div&gt;
  </code></pre>
  
  <p><strong>one.php</strong></p>
  
  <pre><code>$arr = array ( "workspace" =&gt; "One" );
  echo json_encode( $arr );
  </code></pre>
  
  <p><strong>ajax.js</strong></p>
  
  <pre><code>jQuery(document).ready(function(){
      jQuery('.ajax').live('click', function(event) {
          event.preventDefault();
          jQuery.getJSON(this.href, function(snippets) {
              for(var id in snippets) {
                  jQuery('#' + id).html(snippets[id]);
              }
          });
      });
  });
  </code></pre>
  
  <p>Above code is working perfectly. When I click link <strong>'One'</strong> then <strong>one.php</strong> is executed and String <strong>"One"</strong> is loaded into <strong>workspace DIV</strong>.</p>
  
  <h1>Question:</h1>
  
  <p>Now I want to submit a form with AJAX. For example I have a form in <strong>index.php</strong> like this.</p>
  
  <pre><code>&lt;form id='myForm' action='one.php' method='post'&gt;
   &lt;input type='text' name='myText'&gt;
   &lt;input type='submit' name='myButton' value='Submit'&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>When I submit the form then <strong>one.php</strong> should print the textbox value in workspace DIV.</p>
  
  <pre><code>$arr = array ( "workspace" =&gt; $_POST['myText'] );
  echo json_encode( $arr );
  </code></pre>
  
  <p>How to code js to submit the form with AJAX/JSON.</p>
  
  <p>Thanks</p>