...

View Full Version : variables in innerHTML



mauzzzie
02-27-2007, 02:50 PM
Hi,

I am creating an ajaxscript and used some innerHTML to replace some contents. But now I would like to use some values from the updated content.

How can I access these variables? I am using this code to update the innerHTML of a div with an inputfield and button. But now I would like to use the value of the input field in another function.

I can't seem to find the correct way of accessing it through the DOM...


function editSite(siteId, siteNaam){
var x = document.getElementById(siteId);
x.innerHTML = "<input type='text' value='" + siteNaam + "' onfocus='this.select(); this.style.backgroundColor=\"red\";' onblur='this.style.backgroundColor=\"white\";' />"
+ "<input id='save_button' type='submit' value='save' onclick='UpdateSite(\"" + siteNaam + "\");' />";
}

Does anyone have any ideas?

Thanks

vwphillips
02-27-2007, 08:15 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function editSite(siteId, siteNaam){
var x = document.getElementById(siteId);
x.innerHTML = "<input type='text' value='" + siteNaam + "' onfocus='this.select(); this.style.backgroundColor=\"red\";' onblur='this.style.backgroundColor=\"white\";' />"
+ "<input id='save_button' type='submit' value='save' onclick='UpdateSite(\"" + siteNaam + "\");' />";
}

//-->
</script>
</head>

<body onload="editSite('siteId', 'siteNaam');">
<div id="siteId" ></div>
<input type="button" name="" value="Change Value" onclick="document.getElementById('siteId').getElementsByTagName('INPUT')[0].value='fred';">
</body>

</html>

mauzzzie
02-28-2007, 09:26 AM
Hi Philip,

I understand what you did, but I do not seem to be able to get it to work. Or I might just be doing it very wrong.

This is what I did:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function UpdateSite(siteNaam, waarde){
alert("sitenaam = " + siteNaam + "\n waarde = " + waarde);
}


function editSite(siteId, siteNaam){
var x = document.getElementById(siteId);
x.innerHTML = "<input type='text' value='" + siteNaam + "' onfocus='this.select(); this.style.backgroundColor=\"red\";' onblur='this.style.backgroundColor=\"white\";' />"
+ "<input id='save_button' type='submit' value='save' onclick='UpdateSite(\"" + siteNaam + "\", document.getElementById('siteId').getElementsByTagName('INPUT')[0].value;' />";
}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad="editSite('siteId', 'siteNaam');">
<DIV id="siteId" ></DIV>
</BODY>
</HTML>

I do not get an error. But also no result at all.

Do you know what is wrong???

vwphillips
02-28-2007, 10:09 AM
well I got loads of errors


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function UpdateSite(siteNaam, waarde){
alert("sitenaam = " + siteNaam + "\n waarde = " + waarde);
}


function editSite(siteId, siteNaam){
var x = document.getElementById(siteId);
x.innerHTML = "<input type=text value=" + siteNaam + " onfocus=\"this.select();this.style.backgroundColor='red'\"; onblur=\"this.style.backgroundColor='white';\" />";
x.innerHTML+= "<input id=\"save_button\" type=\"submit\" value=\"save\" onclick=\"UpdateSite('" + siteNaam + "',document.getElementById('siteId').getElementsByTagName('INPUT')[0].value);\" />";
}

//-->
</SCRIPT>
</HEAD>
<BODY onLoad="editSite('siteId', 'siteNaam');">
<DIV id="siteId" ></DIV>
</BODY>
</HTML>

mauzzzie
02-28-2007, 10:14 AM
Thanks a million!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum