By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,312 Members | 1,248 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,312 IT Pros & Developers. It's quick & easy.

accessing the value of dynamically added fields by Name

P: n/a
I have a html where fields are created and added dynamically on the
client side. I use the

AppendChild() call to create fields dynamically.

On submit i try to get the value for all the elements in the form,
including those that are added

dynamically. I use document.getElementsByName('Field Name')to achieve
the same.

But this function returns 'undefined' for all dynamically added
elements.

Any pointers on why this happens ?

The sample HTML code is added below,

<html>
<head><title>Checking multiple fields with same name</title>
</head>
<script>
//------------------------------------------------------------------------------
// function to add the hidden field dynamically

function addField (form, fieldType, fieldName, fieldValue) {
var input = document.createElement('INPUT');
if (document.all) { // what follows should work
// with NN6 but doesn't in M14
input.type = fieldType;
input.name = fieldName;
input.value = fieldValue;
}
else if (document.getElementById) { // so here is the
// NN6 workaround
input.setAttribute('type', fieldType);
input.setAttribute('name', fieldName);
input.setAttribute('value', fieldValue);
}
form.appendChild (input);
}
//------------------------------------------------------------------------------
function check()
{
addField (document.checkform, "text", "newfield1",100);
var e = document.getElementsByName('newfield1') ;
alert("e value is "+e.value) ;//output for this is ->
'undefined' while the script is

executed

return true ;
}
</script>
<body>
<form name="checkform" method="POST" action="action.php" >
<input value="416223698001884" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="1" onClick="" name="fldStateBit" align="center"
type="hidden">
<input value="2662236980014" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="266223693333" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="266223694444" onClick="" name="fldFcatReference"
align="center" type="checkbox">

<input value="1" onClick="" name="fldStateBit" align="center"
type="hidden">

<input value="1" onClick="" name="fldradio" align="center"
type="radio">
<input value="2" onClick="" name="fldradio" align="center"
type="radio">
<input value="3" onClick="" name="fldradio" align="center"
type="radio">
<input value="4" onClick="" name="fldradio" align="center"
type="radio">

<input value="Submit" name="submit" align="center" onClick="check()"
type="submit">

</form>

</body>
</html>

Mar 29 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
d
<st*********@gmail.com> wrote in message
news:11*********************@z34g2000cwc.googlegro ups.com...
I have a html where fields are created and added dynamically on the
client side. I use the

AppendChild() call to create fields dynamically.

On submit i try to get the value for all the elements in the form,
including those that are added

dynamically. I use document.getElementsByName('Field Name')to achieve
the same.

But this function returns 'undefined' for all dynamically added
elements.

Any pointers on why this happens ?

The sample HTML code is added below,

<html>
<head><title>Checking multiple fields with same name</title>
</head>
<script>
//------------------------------------------------------------------------------
// function to add the hidden field dynamically

function addField (form, fieldType, fieldName, fieldValue) {
var input = document.createElement('INPUT');
if (document.all) { // what follows should work
// with NN6 but doesn't in M14
input.type = fieldType;
input.name = fieldName;
Try this here:

input.id = fieldName;
input.value = fieldValue;
}
else if (document.getElementById) { // so here is the
// NN6 workaround
input.setAttribute('type', fieldType);
input.setAttribute('name', fieldName);
input.setAttribute('value', fieldValue);
}
form.appendChild (input);
}
//------------------------------------------------------------------------------
function check()
{
addField (document.checkform, "text", "newfield1",100);
var e = document.getElementById('newfield1') ;
alert("e value is "+e.value) ;//output for this is ->
'undefined' while the script is

executed

return true ;
}
</script>
<body>
<form name="checkform" method="POST" action="action.php" >
<input value="416223698001884" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="1" onClick="" name="fldStateBit" align="center"
type="hidden">
<input value="2662236980014" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="266223693333" onClick="" name="fldFcatReference"
align="center" type="checkbox">
<input value="266223694444" onClick="" name="fldFcatReference"
align="center" type="checkbox">

<input value="1" onClick="" name="fldStateBit" align="center"
type="hidden">

<input value="1" onClick="" name="fldradio" align="center"
type="radio">
<input value="2" onClick="" name="fldradio" align="center"
type="radio">
<input value="3" onClick="" name="fldradio" align="center"
type="radio">
<input value="4" onClick="" name="fldradio" align="center"
type="radio">

<input value="Submit" name="submit" align="center" onClick="check()"
type="submit">

</form>

</body>
</html>


I hope that helps!

dave
Mar 29 '06 #2

P: n/a
I could retrive the value by 'id' property.Is there any way to access
the value by name?

Mar 30 '06 #3

P: n/a
st*********@gmail.com wrote:
I have a html where fields are created and added dynamically on the
client side. I use the

AppendChild() call to create fields dynamically.

On submit i try to get the value for all the elements in the form,
including those that are added

dynamically. I use document.getElementsByName('Field Name')to achieve
the same.

But this function returns 'undefined' for all dynamically added
elements.

Any pointers on why this happens ?

The sample HTML code is added below,

<html>
<head><title>Checking multiple fields with same name</title>
</head>
<script>
//------------------------------------------------------------------------------
// function to add the hidden field dynamically

function addField (form, fieldType, fieldName, fieldValue) {
var input = document.createElement('INPUT');
if (document.all) { // what follows should work
// with NN6 but doesn't in M14
You didn't test for createElement, so why test for a Microsoft proprietary
method, then proceed to use properties that are totally unrelated?

if (!document.createElement) return;
var oInput = document.createElement('input');

input.type = fieldType;
input.name = fieldName;
input.value = fieldValue;
}
else if (document.getElementById) { // so here is the
// NN6 workaround
Forget this part of the loop, so you have:

function addField (form, fieldType, fieldName, fieldValue)
{
if (!document.createElement) return;
var oInput = document.createElement('input');
oInput.type = fieldType;
oInput.name = fieldName;
oInput.value = fieldValue;
}

Noting that IE has problems with creating some elements (e.g. option
elements) using DOM methods.
[...]
function check()
{
addField (document.checkform, "text", "newfield1",100);
var e = document.getElementsByName('newfield1') ;


getElementsByName returns a collection - but you don't need to use it
anyway. Have your addField() function return a reference to the new
element, then you don't have to go and get it. Add this as the last line
of addField():

return oInput;
And in check() use:

var e = addField( ... );
Now e is a reference to the new element.

[...]
--
Rob
Mar 30 '06 #4

P: n/a
RobG said the following on 3/30/2006 8:23 AM:
st*********@gmail.com wrote:
<snip>
function addField (form, fieldType, fieldName, fieldValue)
{
if (!document.createElement) return;
var oInput = document.createElement('input');
oInput.type = fieldType;
oInput.name = fieldName;
oInput.value = fieldValue;
form.appendChild (oInput);
}


--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 30 '06 #5

P: n/a
st*********@gmail.com wrote:
I could retrive the value by 'id' property.Is there any way to access
the value by name?


.elements['some_name'].value
PointedEars
Mar 30 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.