dynamically name an input box with javascript

J

jpw

i have a script to create an input box, but i need to name it
dynamically suffixing the field with a loop counter (e.g. "field" +
x_counter). i've tried this a few ways unsucessfully. i even tried
creating a variable first and then setting the name property of the
input tag to equal the variable. no dice. ideas?

thx
 
R

RobG

i have a script to create an input box, but i need to name it
dynamically suffixing the field with a loop counter (e.g. "field" +
x_counter). i've tried this a few ways unsucessfully. i even tried
creating a variable first and then setting the name property of the
input tag to equal the variable. no dice. ideas?
Click to expand...

I guess you are referring to IE's problem with the name attribute when
adding form controls with script. If you add a control using
createElement and set the name attribute using either dot property or
setAttribute (which itself is broken in places in IE), you can't
access the element by name.

However, it will still be successful when you submit the form, you
just can't use document.forms.elementName (or similar) to access it.

One solution is to add an ID that is the same as the name, then
document.forms.elementNameID works fine. Another is to use innerHTML
to insert your new element into a div, then grab it and add it to the
form. A third is to use an entirely different ID and use
getElementById to access it.

Some play code:

<script type="text/javascript">

function addInputDOM(f) {
var el = document.createElement('input');
el.type = 'text';
el.value = 'fred';
el.name = 'text01';

/* Adding an ID the same as the name makes
** document.forms.text01 'work' in IE
*/
// el.id = 'text01';

f.appendChild(el);
}

function addInputHTML(f) {
var el = document.createElement('div');
el.innerHTML = '<input type=\'text\'' +
' value=\'fred\' name=\'text01\'>';
f.appendChild(el.firstChild);
}

</script>

</head>
<body>

<form>
<div>
<input type="button" value="DOM add field"
onclick="addInputDOM(this.form)">
<input type="button" value="innerHTML add field"
onclick="addInputHTML(this.form);">

<input type="button" value="Check name"
onclick="alert(typeof this.form.elements['text01']);">
<input type="submit"><br>
</div>
</form>
 
J

jpw

i have a script to create an input box, but i need to name it
dynamically suffixing the field with a loop counter (e.g. "field" +
x_counter). i've tried this a few ways unsucessfully. i even tried
creating a variable first and then setting the name property of the
input tag to equal the variable. no dice. ideas?
Click to expand...

I guess you are referring to IE's problem with the name attribute when
adding form controls with script. If you add a control using
createElement and set the name attribute using either dot property or
setAttribute (which itself is broken in places in IE), you can't
access the element by name.

However, it will still be successful when you submit the form, you
just can't use document.forms.elementName (or similar) to access it.

One solution is to add an ID that is the same as the name, then
document.forms.elementNameID works fine. Another is to use innerHTML
to insert your new element into a div, then grab it and add it to the
form. A third is to use an entirely different ID and use
getElementById to access it.

Some play code:

<script type="text/javascript">

function addInputDOM(f) {
var el = document.createElement('input');
el.type = 'text';
el.value = 'fred';
el.name = 'text01';

/* Adding an ID the same as the name makes
** document.forms.text01 'work' in IE
*/
// el.id = 'text01';

f.appendChild(el);

}

function addInputHTML(f) {
var el = document.createElement('div');
el.innerHTML = '<input type=\'text\'' +
' value=\'fred\' name=\'text01\'>';
f.appendChild(el.firstChild);

}

</script>

</head>
<body>

<form>
<div>
<input type="button" value="DOM add field"
onclick="addInputDOM(this.form)">
<input type="button" value="innerHTML add field"
onclick="addInputHTML(this.form);">

<input type="button" value="Check name"
onclick="alert(typeof this.form.elements['text01']);">
<input type="submit"><br>
</div>
</form>
Click to expand...

This is the script I'm using (attempting to use). Onclick, a new
column is added to the table. Each cell in the new coloumn must have
an input control named "field" + (# of row in column). ID will not
work here, it must be "name" - this is an unfortunate project
requirement.

<script>
function addColumn(tblId)
{
var mytable=document.getElementById(tblId)
for (var h=0; h<mytable.rows.length;h++) {
var x_number = h + 1
var newcell=mytable.rows[h].insertCell(-1)
var x_name = "field" + x_number.toString()
var x_inner_html = "<input type='text' name=x_name value = x_name
size='10' maxlenth='100'>"
newcell.innerHTML=x_inner_html
}
}
</script>
 
R

RobG

[...]
This is the script I'm using (attempting to use). Onclick, a new
column is added to the table. Each cell in the new coloumn must have
an input control named "field" + (# of row in column). ID will not
work here, it must be "name" - this is an unfortunate project
requirement.
Click to expand...

I helps greatly if you say what you expect to happen and what actually
happens.

<script>
function addColumn(tblId)
{
var mytable=document.getElementById(tblId)
Click to expand...

Although not strictly necessary, it's a good idea to end statements
with a semi-colon, though some disagree:

var mytable = document.getElementById(tblId);

for (var h=0; h<mytable.rows.length;h++) {
var x_number = h + 1
Click to expand...

It's also usual to declare variables outside loops, though again, some
disagree. But x_number isn't necessary anyway.

var newcell=mytable.rows[h].insertCell(-1)
var x_name = "field" + x_number.toString()
Click to expand...

When dealing with primitives, there is no need to call the toString()
method which will force conversion to an object first.

var x_name = "field" + x_number;

You don't need to use x_name.

var x_inner_html = "<input type='text' name=x_name value = x_name
size='10' maxlenth='100'>"
Click to expand...

To concatenate a string with variables (and skip another local
variable):

newCell.innerHTML = "<input type='text' name='field" + (h+1)
+ " value='x_name' size='10' maxlength='100'>"


Note misspelling of "maxlenth". Untested, but should work OK.
 

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

How to make an input box enable for only past dates and for the startdate if it falls in the current month? 5
How to display input options only after selecting an option from the 'select class' tag JS? 6
Checking dynamically populated data using ajax with user entered value 5
Mandatory Elements To Conduct JavaScript Form Manipulation 7
How to dynamically set the length of an input box 1
Setting Values of Input Box in Iframes via Javascript 2
Help with my responsive home page 2
Set input value on form with javascript? 3

Members online

No members online now.
Total: 1,942 (members: 0, guests: 1,942)
Robots: 305

Forum statistics

Threads
474,159
Messages
2,570,879
Members
47,414
Latest member
GayleWedel

Latest Threads

Top