How to read value from a text-field, create dynamic

Michael Munch · Aug 7, 2008

Hi

I want to read the value of af text-field, create dynamic, in a form.
Se below a small test-site to do that (but readning fails):
I use the function Test_Read for reading the value from the dynamic create
text-field "txtName".

I thanks...

<html>

<head>

<script language="JavaScript" type="text/javascript">

function Test_Build() {
var tbody =
document.getElementById('tbllist').getElementsByTagName("TBODY")
[0];
var row = document.createElement("TR");
var td = document.createElement("TD");
td.appendChild(document.createTextNode(""));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","txtName");
S.setAttribute("value","Michael")
td.appendChild(S);
row.appendChild(td);
tbody.appendChild(row); }

function Test_Read() {
// alert(document.getElementById('txtName'));
// alert(document.getElementByTagName('txtName').value);
}

</script>

</head>

<body>
<form id="FormName">
<input type="button" value="Create a textfield" onClick="Test_Build();">
<input type="button" value="Read value from textfield"
onClick="Test_Read();">
<table id="tbllist" cellspacing="0" cellpadding="0" border="0"
width="340">
<tbody>
<tr>
<td>List of name</td>
</tr>
</tbody>
</table>
</form>
</body>

</html>

Robin Rattay · Aug 7, 2008

<html>

What about a DOCTYPE?

<head>

<script language="JavaScript" type="text/javascript">

language="JavaScript" is deprecated and can be dropped.

Add a global variable to store the reference to the input field:

var myNameField;

function Test_Build() {
var tbody =
document.getElementById('tbllist').getElementsByTagName("TBODY")
[0];

Tables have a collection "tBodies", which is preferable to using
getElementsByTagName. Also you should make sure getElementById
actually found something:

var table = document.getElementById('tbllist');
if (table) {
var tbody = table.tBodies[0];
// ...
}

var row = document.createElement("TR");
var td = document.createElement("TD");

Consider using the methods insertRow() and insertCell(). That way you
don't need to append them

var row = tbody.insertRow(-1);
var td = row.insertCell(-1);

td.appendChild(document.createTextNode(""));

S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","txtName");
S.setAttribute("value","Michael")

Use the previously declared global variable here and avoid
setAttribute since it is broken in IE 6:

myNameField = document.createElement("input");
myNameField.type = "text";
myNameField.name = "txtName";
myNameField.value = "Michael";

td.appendChild(S);

td.appendChild(myNameField);

The following appendChilds are unnecessary when using insertRow/Cell.

row.appendChild(td);
tbody.appendChild(row); }

function Test_Read() {
// alert(document.getElementById('txtName'));
// alert(document.getElementByTagName('txtName').value);
}

You can't use getElementById nor getElementByTagName because "txtName"
is its *name* and neither its *id* nor its *tag name*.

Instead you use the reference to field from the global variable here
now:

alert(myNameField.value);

If you don't use the reference variable. you can use normal form
element reference (if you give the form a name and not an ID):

alert(document.forms["FormName"].elements["txtName"].value);

</script>

</head>

<body>
<form id="FormName">

Give the form a name if you need to reference it or its fields:

<form name="FormName">

Don't confuse id and name. They are two distinct attributes.
Unfortunately IE does consider them the same, so don't you let it
confuse you.

<input type="button" value="Create a textfield" onClick="Test_Build();">
<input type="button" value="Read value from textfield"
onClick="Test_Read();">
<table id="tbllist" cellspacing="0" cellpadding="0" border="0"
width="340">
<tbody>
<tr>
<td>List of name</td>
</tr>
</tbody>
</table>
</form>
</body>

</html>

If you want to add more that one field, you'll need to store the
references some other way, for example in an array.

Robin

Laser Lips · Aug 7, 2008

alert(document.getElementById('txtName'));
This does not work because you have not set the ID for the text box

alert(document.getElementByTagName('txtName').value);

This does not work because getElementByTagName gets HTML tags, and
txtName is not a tag.

Add S.setAttribute("id","txtName"); in your code to set up the text
box and then use alert(document.getElementById('txtName').value);

Graham
http://cylo.co.uk

Thomas 'PointedEars' Lahn · Aug 7, 2008

Robin said:
What about a DOCTYPE?

The whole thing is not Valid. Not having a DOCTYPE declaration is the least
of its problems.

[...]
You can't use getElementById nor getElementByTagName because "txtName"
is its *name* and neither its *id* nor its *tag name*.

Instead you use the reference to field from the global variable here
now:

alert(myNameField.value);

If you don't use the reference variable. you can use normal form
element reference (if you give the form a name and not an ID):

alert(document.forms["FormName"].elements["txtName"].value);

This also works with IDs in more recent user agents, as specified in W3C DOM
Level 2 HTML.

[...]
<form id="FormName">

Click to expand...

Give the form a name if you need to reference it or its fields:

<form name="FormName">

Don't confuse id and name. They are two distinct attributes.
Unfortunately IE does consider them the same, so don't you let it
confuse you.

And don't forget the `action' attribute, it is #REQUIRED.

PointedEars

David Mark · Aug 7, 2008

<html>

Click to expand...

What about a DOCTYPE?

<head>

Click to expand...

<script language="JavaScript" type="text/javascript">

Click to expand...

language="JavaScript" is deprecated and can be dropped.

Add a global variable to store the reference to the input field:

var myNameField;

function Test_Build() {
var tbody =
document.getElementById('tbllist').getElementsByTagName("TBODY")
[0];

Click to expand...

Tables have a collection "tBodies", which is preferable to using
getElementsByTagName. Also you should make sure getElementById
actually found something:

var table = document.getElementById('tbllist');
if (table) {
var tbody = table.tBodies[0];
// ...

}

var row = document.createElement("TR");
var td = document.createElement("TD");

Click to expand...

Consider using the methods insertRow() and insertCell(). That way you
don't need to append them

var row = tbody.insertRow(-1);
var td = row.insertCell(-1);

td.appendChild(document.createTextNode(""));
S = document.createElement("input");
S.setAttribute("type","text");
S.setAttribute("name","txtName");
S.setAttribute("value","Michael")

Click to expand...

Use the previously declared global variable here and avoid
setAttribute since it is broken in IE 6:

And 7. And probably 8 too.

How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How can I create a table using the input element?	1	Mar 25, 2022
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value?	7	Aug 22, 2023
Set value after clicking in field	11	May 9, 2023
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
Only one table shows up with the information	2	Mar 29, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021

How to read value from a text-field, create dynamic

Michael Munch

Robin Rattay

Laser Lips

Thomas 'PointedEars' Lahn

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads