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="1" value="myName" />
file2.html:
Email: <input type="text" name="2" value="
[email protected]" />
what i want
to do is that when i write something in one of
the textboxes and then click whichever radio button in home.html,
the value attribute should be changed
to the new value, any idea on
how to do that?
tia