Solved

Getting the value of a DOM input element.

Posted on 2003-11-21
7
223 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

626 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