CODEWITHSUNDEEP
jqueryhtmlajaxforms
Spufferoo
Spufferoo

Reputation: 127

Jquery Ajax pass data between two forms

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.

Original form

<form method="post" action="default.asp" name="mainForm" id="mainForm">

 .... rest of form ....

  <label for="locName">Location (autocomplete): </label>
  <input type="text" name="locName" id="locName" value="locName"/>
  <label for="locId">Location Id: </label>
  <input type="text" name="locId" id="locId" value="locId"/>
  <input type="submit" name="sub" id="sub"  value="sub"/>
</form>

Modal Form

<form name="subForm" id="subForm" action="default.asp">
  <label for="nme">Name</label><input type="text" name="nme" id="nme" />
  <label for="pcd">Postcode</label><input type="text" name="pcd" id="pcd" />
  <input type="submit" name="sub2" id="sub2"  value="sub2"/>
</form>

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

Jquery so far

$(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;  
});
});

Thanks in advance

Steve

Upvotes: 0

Views: 1621

Answers (1)

lauhub
lauhub

Reputation: 920

Assuming that 'response' is a JSON formatted string returned by your server (e.g. "{locName:'Groenland', locId:'212'}"):

success:function(response){
    //You need to first parse JSON data:
    var data = jQuery.parseJSON(response);

    //Then fill the original form
    $("#locName").val(data.locName); // populate original form
    $("#locId").val(data.locId); // populate original form
}

Upvotes: 2

Related Questions