accessing the value of dynamically added fields by Name

S

stellstarin

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>
 
D

d

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;
Click to expand...

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>
Click to expand...

I hope that helps!

dave
 
S

stellstarin

I could retrive the value by 'id' property.Is there any way to access
the value by name?
 
R

RobG

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
Click to expand...

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
Click to expand...

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') ;
Click to expand...

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.

[...]
 
R

Randy Webb

RobG said the following on 3/30/2006 8:23 AM:
(e-mail address removed) wrote:
Click to expand...

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

form.appendChild (oInput);
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Reversing output of user input by using while loop... 2
Image shifts to the right when export the page to pdf 4
Checking dynamically populated data using ajax with user entered value 5
Positioning CSS components 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Function call from button to automatic 7
I dont get this. Please help me!! 2
Help with code 0

Members online

Total: 24 (members: 2, guests: 22)
Robots: 157

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top