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.
LVL 1
graphicjunkieAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

VincentPugliaCommented:
Hi,

if you provide the code you are using, I could rewrite it to do exactly what you asking.  In the meanwhile, here's another option:

<html><head>
<script language="javascript" type="text/javascript">
function init()
{
document.body.innerHTML = '<form name="a"><table><tr><td><input type="text" id="theField" onblur="doit(this.value)"></td></tr></table></form>'
}
function doit(val)
{
 alert(val)
 alert(document.getElementById('theField').value)
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">init()</script>
</body>
</html>

Vinny
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZontarCommented:
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>
0
ZontarCommented:
Oh bugger stupid MSIE's event handling... Hang on...
0
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

ZontarCommented:
<!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>
0
GwynforWebCommented:
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()">
0
GwynforWebCommented:
oops got the form tags the wrong way around
0
GwynforWebCommented:
unfortunately my suggestion creates an invalid ie will not submit properly :(
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.