Jump to content

Passing variables into a getElementById


ameliabob

Recommended Posts

I have set up a table where a text box is assigned an id as in the server:

$custNumber=n40;             // Changed to add a letter$custLimit = 55;$custName = "Fred";$x = "onblur="PostIt(' ".$custNumber. " ')" ";"<td align='center'><input id='".$custNumber."' type='text' ".$x." size='5' value='".$custLimit."'' /> </td><td>".$custName."</td>";  

and in the browser:

    function PostIt(numb){        alert("trying to post customer "+numb);        var q = document.getElementById('"+numb+"').value;         alert("and the value is "+q);    }

My problem is to find the correct syntax so that the "numb" parameter can get put in the getElementById correctly.

"q" comes back as undefined??

Edited by AmeliaBob
Link to comment
Share on other sites

I would suggest prefixing the id with a letter both in the PHP and when you pass the Id, because I don't believe numbers are valid id values in HTML.

Link to comment
Share on other sites

I have set up a table where a text box is assigned an id as in the server:

$custNumber=n40;             // Changed to add a letter$custLimit = 55;$custName = "Fred";$x = "onblur="PostIt(' ".$custNumber. " ')" ";"<td align='center'><input id='".$custNumber."' type='text' ".$x." size='5' value='".$custLimit."'' /> </td><td>".$custName."</td>";  

and in the browser:

    function PostIt(numb){        alert("trying to post customer "+numb);        var q = document.getElementById('"+numb+"').value;         alert("and the value is "+q);    }

My problem is to find the correct syntax so that the "numb" parameter can get put in the getElementById correctly.

"q" comes back as undefined??

 

I made the change to the customer number by adding an 'n' to it. The code that is sent to the browser is :

 

 

<tr><td></td><td>Bill Mertens</td><td align='center'>19</td><td id='n63' align='center'><input type='text' size='5' value='0'onblur="PostIt('n63')" /></td></tr>

 

Still can't find the problem....

Link to comment
Share on other sites

If you still have this:

 

var q = document.getElementById('"+numb+"').value;

 

That's not correct, you're telling it to look for something like this:

<div id='"+numb+"'>

Where the ID contains the double quotes and plus signs and the word "numb".

Link to comment
Share on other sites

The syntax is obviously confusing me.

 

Here is code that I used in the W3Schools tryme

 

[codebox}

<!DOCTYPE html><html><head><script>function PostIt(numb){ alert("in postit numb is "+numb); var q = document.getElementById(numb).value; alert("q's value is "+q);}</script></head><body><p id='n63' align='center'><input type='text' size='5' value='0'onblur="PostIt('n63')" /></p></body></html>[/codebox]

 

The first alert shows the n63.

The second shows undefined

 

So I have not grasped how the interpreter works.

 

Thanks

Link to comment
Share on other sites

My fault for not typing more in. This is much closer to the original code:

 

<!DOCTYPE html><html><head><script>function PostIt(numb){    alert("in postit numb is "+numb);    var q = document.getElementById(numb).value;    alert("q's value is "+q);}</script></head><body><table border='1'><tr><th>Name</th><th>Number</th><tr><tr><td>Fred</td><td id='n63' align='center'><input type='text' size='5' value='0'onblur="PostIt('n63')" /></td></tr></table></body></html>
Link to comment
Share on other sites

It still seems rather pointless to me.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>table junk</title><script>var out;window.onload = init;function init(){out = document.getElementById('out');for (n=1; n<=9 ; n++){document.getElementById('n'+ n).value = '0';document.getElementById('n'+ n).onchange = update;}}function update(){out.innerHTML = 'table cell ' + this.id + ' = ' + this.value;}</script></head><body><table border="1"><tr><td><input type="text" id="n1"/></td><td><input type="text" id="n2"/></td><td><input type="text" id="n3"/></td></tr><tr><td><input type="text" id="n4"/></td><td><input type="text" id="n5"/></td><td><input type="text" id="n6"/></td></tr><tr><td><input type="text" id="n7"/></td><td><input type="text" id="n8"/></td><td><input type="text" id="n9"/></td></tr></table><div id="out"></div></body></html>
Edited by davej
Link to comment
Share on other sites

  • 5 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...