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