Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Getting the value of a DOM input element.

Posted on 2003-11-21
7
Medium Priority
?
225 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 500 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

722 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