Update value of hidden input element on textarea onChange?

johnnnn · 12-05-2009, 05:29 PM

I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too.

Here's what I have so far:

function getNewValue(inputhidden, textinput) {
var data = document.getElementById(inputhidden);
var text = document.getElementById(textinput);
data.value = text.value;
}

<input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')">
<input type= "hidden" name= "detail" id="detail" value= "">

However, this is not working and I'm not sure why

oesxyl · 12-05-2009, 05:37 PM

Quote:

Originally Posted by johnnnn

I have an idea for a little script.....I'm just stuck on one little part: When a user changes the value in a input or textarea box, I want it to change the value of a certain hidden input tag too.

Here's what I have so far:

function getNewValue(inputhidden, textinput) {
var data = document.getElementById(inputhidden);
var text = document.getElementById(textinput);
data.value = text.value;
}

<input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 'name')">
<input type= "hidden" name= "detail" id="detail" value= "">

However, this is not working and I'm not sure why

try to change onChange to lowercase, 'onchange'. I don't think that 'name' is a proper value of name and id attributes but if I'm not wrong this is not a problem, maybe in IE, I don't know.

best regards

Philip M · 12-05-2009, 06:57 PM

Quote:

Originally Posted by oesxyl

I don't think that 'name' is a proper value of name and id attributes but if I'm not wrong this is not a problem, maybe in IE, I don't know.

In fact it is permissible (but not very wise) to give an HTML element the name "name".

In Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID. You should also avoid giving names or id's to your Javascript variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value'.

glenngv · 12-06-2009, 08:44 AM

Your code works. No need to modify onChange to onchange in the html (although it's good practice to use all lowercase in html). Html is not case-sensitive unlike Javascript.

Code:

<html>
<head>
<script type="text/javascript">
function getNewValue(inputhidden, textinput) {
var data = document.getElementById(inputhidden);
var text = document.getElementById(textinput);
data.value = text.value;
}
</script>
<body>
<form>
<input type= "text" name= "name" id= "name" onChange="getNewValue('detail', 
'name')">
<input type= "hidden" name= "detail" id="detail" value= "">
</form>
</body>
</html>

After loading the page and typing something in the field, quickly verify that the hidden input's value changed by typing this in the browser's address bar and hitting Enter key:

Code:

javascript:alert(document.getElementById('detail').value)

It should alert the value entered in the 'name' field.

oesxyl · 12-06-2009, 09:47 AM

Quote:

Originally Posted by glenngv

After loading the page and typing something in the field, quickly verify that the hidden input's value changed by typing this in the browser's address bar and hitting Enter key:

Code:

javascript:alert(document.getElementById('detail').value)

It should alert the value entered in the 'name' field.

I didn't know that js can be used this way,

I use ffox 3 with noscript installed and when I try this ends with a xss alert. Seems normal but is some way to avoid this?
maybe what I type was wrong,

Code:

.....html?javascript:alert('alert this');

best regards