Solved

Getting the value of a DOM input element.

Posted on 2003-11-21
7
219 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:graphicjunkie
  • 3
  • 3
7 Comments
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 125 total points
ID: 9801087
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9801090
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9801099
Oh bugger stupid MSIE's event handling... Hang on...
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 11

Expert Comment

by:Zontar
ID: 9801117
<!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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9805144
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9805146
oops got the form tags the wrong way around
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9805254
unfortunately my suggestion creates an invalid ie will not submit properly :(
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question