homepage Welcome to WebmasterWorld Guest from 54.161.147.106
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Two forms on one page AJAX
Submit second form, changes result first form...
Jim123




msg:4419022
 1:21 am on Feb 18, 2012 (gmt 0)

Found this script, it's working great, but I want to add a second form. When I do, the first form + result works well, but when I press the submit button of the second form, it updates the result of the first form.

I know it has something to do with
function updatepage(str){
document.getElementById('result').value = str;
}

but if I change it to
function updatepage(str){
document.getElementById('result2').value = str;
}

it is the other way around. I need to find a method whereby I can can submit and get results of both forms separately.

Any idea how I can get the result in the second form?

Here are the scripts

mult.html
<html>
<head>
<title>Ajax Multiply Example</title>
<script language="Javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}

function updatepage(str){
document.getElementById('result').value = str;
}

function callMultiply(){
var a = parseInt(document.f1.a.value);
var url = "multiply.php?a=" + a + "";
postRequest(url);
}

function callMultiplyVita(){
var b = parseInt(document.f2.b.value);
var url = "multiplyVita.php?b=" + b + "";
postRequest(url);
}
</script>
</head>

<body>
<h1 align="center"><font color="#000080">Ajax Example</font></h1>
<form name="f1">
<input name="a" id="a" value="">
<input name="result" type="text" id="result">
<input type="button" value="Multiply" onClick="callMultiply()" name="showmultiply">
</form>

<form name="f2">
<input name="b" id="b" value="">
<input name="result2" type="text" id="result2">
<input type="button" value="Multiply" onClick="callMultiplyVita()" name="showmultiply2">
</form>
</body>
</html>


and multiply.php
<?
$a=$_GET["a"];
$b=10;
$mul=$a*$b;
echo $mul;
?>


and multiplyVita.php
<?
$b=$_GET["b"];
$qq="100";
$mull=$b*$qq;
echo $mull;
?>


Thanks for the help!
Okoth

 

daveVk




msg:4419044
 5:23 am on Feb 18, 2012 (gmt 0)

change updatepage

function updatepage(str,
toId){
document.getElementById(
toId).value = str;
}

change how updatepage is called

function postRequest(strURL){
...
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);

becomes

function postRequest(strURL,
toId){
...
xmlHttp.onreadystatechange = doChange;
xmlHttp.send(strURL);
function doChange() {
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText,
toId);
}
}

calls to postRequest become
postRequest(url,
"result"); // or result2

This relies on function doChange being defined within postRequest where toId is visible. {known as closure)

Jim123




msg:4419097
 12:13 pm on Feb 18, 2012 (gmt 0)

I just copied and pasted the code above and it works perfectly. I am going to study a bit on it to understand why it is working.

Thanks for the help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved