views:

47

answers:

0

if i have 3 html pages as follows:

home.html:

<form method="get">        
  <input class="someForm" type="radio" value="1" name="someForm" /> Name
  <input class="someForm" type="radio" value="2" name="someForm" /> Email
  <div id="container"></div>
  <input type="submit" />
</form>

<script type="text/javascript" src="jquery.js"></script>
<script>
  var ajaxResponse = new Object();
  $(document).ready(function () {
    $('.someForm').click(function () {
    var rbVal = $(this).val();
        var myContent;
        if (ajaxResponse[rbVal]) { //in cache
          myContent =  ajaxResponse[rbVal];
          $("#container").html(myContent);
        }
        else { // not in cache
      var urlForAjaxCall = "file" + rbVal + ".html"; 
          $.get(urlForAjaxCall, function (myContent) {
             ajaxResponse[rbVal] = myContent;
             $("#container").html(myContent);
          });
        }
      });
    });
</script>

file1.html:

Name: <input type="text" name="name1" value="myName" />

file2.html:

Email: <input type="text" name="email2" value="[email protected]" />

what i want to do is that when i click (for example) radio button 1 and write something in the corresponding textbox (Name) "Alex" for example and then click whichever radio button in home.html and then reclick radio button 1 then i get the new value instead of getting "myName", any idea on how to do that? tia