title: Jquery Ajax pass data between two forms
body: <p>I have a page with an ajax filled autocomplete field, if an extra addition to the autocomplete is needed, based upon the user selctind add new on the ('mainForm') I am popping up a modal form ('subForm') in which to enter the new data, process on the server using classic asp via an ajax post I would then like to pass the resulting data (two fields returned after a database insert, locId and locName) back to orginal form. </p>
  
  <p><strong>Original form</strong></p>
  
  <pre><code>&lt;form method="post" action="default.asp" name="mainForm" id="mainForm"&gt;
  
   .... rest of form ....
  
    &lt;label for="locName"&gt;Location (autocomplete): &lt;/label&gt;
    &lt;input type="text" name="locName" id="locName" value="locName"/&gt;
    &lt;label for="locId"&gt;Location Id: &lt;/label&gt;
    &lt;input type="text" name="locId" id="locId" value="locId"/&gt;
    &lt;input type="submit" name="sub" id="sub"  value="sub"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Modal Form</strong></p>
  
  <pre><code>&lt;form name="subForm" id="subForm" action="default.asp"&gt;
    &lt;label for="nme"&gt;Name&lt;/label&gt;&lt;input type="text" name="nme" id="nme" /&gt;
    &lt;label for="pcd"&gt;Postcode&lt;/label&gt;&lt;input type="text" name="pcd" id="pcd" /&gt;
    &lt;input type="submit" name="sub2" id="sub2"  value="sub2"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The modal form is then processed on the server after an ajax submit. The form is submitted to a database and creates two values (id,name) - I'd like to to pass these values back to the original form into </p>
  
  <p><strong>Jquery so far</strong></p>
  
  <pre><code>$(document).ready(function() {
    var $form = $('#subForm');     
    $form.submit( function() {
      $.ajax({ 
        beforeSend:function(response){$("#locName").val("loading...");},
        cache:false,
        data: $(this).serialize(), 
        type: $(this).attr('method'), 
        url: $(this).attr('action'),
  
  // this is the bit I need help with  
  
        success:function(response){
          $("#locName").val(response); // populate original form
          $("#locId").val(response); // populate original form
        },
  // ---------------------------------------------
        error:function(){alert("error")},
        complete:function(){alert("done");}
      });           
    return false;  
  });
  });
  </code></pre>
  
  <p>Thanks in advance</p>
  
  <p>Steve</p>