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

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

P: n/a
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').getElementsByTa gName("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').valu e);
}

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

Aug 7 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On 7 Aug., 12:13, "Michael Munch" <watch4mu...@gmail.comwrote:
<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').getElementsByTa gName("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').valu e);
* *}
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
Aug 7 '08 #2

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

alert(document.getElementByTagName('txtName').valu e);

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
Aug 7 '08 #3

P: n/a
Robin Rattay wrote:
On 7 Aug., 12:13, "Michael Munch" <watch4mu...@gmail.comwrote:
><html>

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

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
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Aug 7 '08 #4

P: n/a
On Aug 7, 6:44*am, Robin Rattay <rot...@gmail.comwrote:
On 7 Aug., 12:13, "Michael Munch" <watch4mu...@gmail.comwrote:
<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').getElementsByTa gName("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:
And 7. And probably 8 too.
Aug 7 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.