Solved

Getting the value of a DOM input element.

Posted on 2003-11-21
7
218 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 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