asked on

Getting the value of a DOM input element.

Hello, I'm trying to create a form that contains a table that contains an input text field. The input text field is changed by a user and then validated by JavaScript (the whole thing is JavaScript) and sent to variables accordingly. I want to know if you could provide me with a simple example of how to create an input field within a table within a form, and the code for getting the value of the input text. I would like to do this using the DOM, I know it's possible I just can't get it to work. Something along the lines of creating a form, then a table, then the input text field, appending the text field as a child to the table, and the table to the form, and the form to the body or a division. Then getting the value of the input text should attainable by getting its DOM element via the getElementByID('inputTextId') but that didn't work!!! I can display the input text perfectly, but when I click the button to get back the value of the input text, it says null. In fact it says my form is null too, so I'm at a loss of ideas as to where to go from here.

ASKER CERTIFIED SOLUTION

VincentPuglia

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zontar

This the sort of thing you're talking about?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
</style>

<script type="text/javascript">

function makeForm()
{
var form = document.createElement("form");
form.action = "form-processor.php";
form.method = "post";
form.onsubmit = function(){ return validate(this); };

var table = document.createElement("table");
table.width = "50%";
table.border = "1";
table.align = "center";

var tbody = document.createElement("tbody");
var row = document.createElement("tr");

var cell = document.createElement("td");
cell.align = "center";

var input = document.createElement("input");
input.type = "text";
input.size = "10";
input.name = "myText";

var button = document.createElement("input");
button.type = "button";
button.value = "Display form field value";
button.onclick = function(){ alert(this.form.myText.value); };

cell.appendChild(input);
cell.appendChild( document.createElement("br") );
cell.appendChild(button);

row.appendChild(cell);
tbody.appendChild(row);
table.appendChild(tbody);
form.appendChild(table);

document.body.appendChild(form);
}

window.onload = makeForm;

</script>

</head>
<body>

</body>
</html>

Zontar

Oh bugger stupid MSIE's event handling... Hang on...

Zontar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>

<style type="text/css">
</style>

<script type="text/javascript">

function makeForm()
{
var form = document.createElement("form");
form.action = "form-processor.php";
form.method = "post";
form.onsubmit = function(){ return validate(this); };

var table = document.createElement("table");
table.width = "50%";
table.border = "1";
table.align = "center";

var tbody = document.createElement("tbody");
var row = document.createElement("tr");

var cell = document.createElement("td");
cell.align = "center";

var input = document.createElement("input");
input.type = "text";
input.size = "10";
input.setAttribute("NAME", "myText");

var submit = document.createElement("input");
submit.type = "submit";
submit.value = "Submit";

var button = document.createElement("input");
button.type = "button";
button.value = "Display form field value";
button.onclick = display;

cell.appendChild(input);
cell.appendChild( document.createElement("br") );
cell.appendChild(submit);
cell.appendChild( document.createElement("br") );
cell.appendChild(button);

row.appendChild(cell);
tbody.appendChild(row);
table.appendChild(tbody);
form.appendChild(table);

document.body.appendChild(form);
}

window.onload = makeForm;

function display(e)
{
if(!e)
el = window.event.srcElement;
else
el = e.target;

alert(el.form.elements[0].value);
}

</script>

</head>
<body>

</body>
</html>

GwynforWeb

try this

<script>
function addit(){
str="</form>"
str+="<table>"
str+="<TR><TD ><input type='input' id='t1'></TD></TR>"
str+="<TR><TD ><input type='button' value='show value' onclick='alert(t1.value)'></TD></TR>"
str+="</table>"
str+="<form>"
d1.innerHTML+=str
}
</script>
Example of Creating a Form in with a table
<div id="d1">
</div>
put the form in here
<p><input type="button" value="create_form" onclick="addit()">

GwynforWeb

oops got the form tags the wrong way around

GwynforWeb

unfortunately my suggestion creates an invalid ie will not submit properly :(