CODEWITHSUNDEEP
javascripthtml
iCodeLikeImDrunk
iCodeLikeImDrunk

Reputation: 17806

how do i get the info from a form using javascript?

i have a form which user enters some data, could be checkboxes, radio buttons, textfields, etc

when user click submit button, i want to refresh the page with whatever data that was entered

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    </head>
<body id="ref">
<form>
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
</form>
<input type="button" onclick="c()" value="submit">

<script type="text/javascript">

function c() 
{
    var o = document.getElementById('ref');
    o.innerHTML = '';

    var n = document.createElement('p');
    var nam = document.getElementById('name');
    n.innerHTML = "Your name is: " + nam;
    o.appendChild(n);

    var a = document.createElement('p');
    var ag = document.getElementById('age');
    a.innerHTML = "Your age is: " + ag;
    o.appendChild(a);

    //how do i get the info from the form? because both nam and ag are coming up null

}

</script>
</body>
</html>

my guess this is not working is because the page refreshes then tries to fetch the element by id which is not there anymore.. whats the correct way of doing this??

Upvotes: 1

Views: 260

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

You're confusing objects with their properties. Here, you're getting the HTMLInputElement instance for the "age" field:

var ag = document.getElementById('age');

But here you're using that object as though it were a simple value:

a.innerHTML = "Your age is: " + ag;

The HTMLInputElement object has a value field you can use for that:

a.innerHTML = "Your age is: " + ag.value;

Separately, you're completely destroying the page by doing this:

var o = document.getElementById('ref');
o.innerHTML = '';

...because you've given the body element the ID "ref". Completely replacing the body element completely replaces the body element, so you can't rely on objects that only exist as subordinates of that element.

The usual thing is to have an element to fill in, and (optionally) to remove the elements you no longer need. For instance (live copy):

HTML:

<form id="theForm">
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
    <input type="button" onclick="c()" value="submit">
</form>
<div id="result">
</div>

(Note I moved the button into the form for convenience.)

JavaScript:

function c() {
  var form = document.getElementById("theForm"),
      nameField = document.getElementById("name"),
      ageField = document.getElementById("age"),
      result = document.getElementById("result");

  form.parentNode.removeChild(form);
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
}

There, when the button is pressed, I remove the form and fill in the "result" div.

You could add the "result" div dynamically if you wanted (live copy):

HTML:

<form id="theForm">
    Please enter your name:<input type="text" id="name" />
    Please enter your age:<input type="text" id="age" />
    <input type="button" onclick="c()" value="submit">
</form>

JavaScript:

function c() {
  var form = document.getElementById("theForm"),
      nameField = document.getElementById("name"),
      ageField = document.getElementById("age"),
      result;

  result = document.createElement("div");
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
  form.parentNode.insertBefore(result, form);
  form.parentNode.removeChild(form);
}

You can access the fields using a briefer and somewhat more natural syntax if you change your id values to name values instead (live copy):

HTML:

<form name="theForm">
    Please enter your name:<input type="text" name="name" />
    Please enter your age:<input type="text" name="age" />
    <input type="button" onclick="c()" value="submit">
</form>

JavaScript:

function c() {
  var form = document.theForm,
      nameField = form.name,
      ageField = form.age,
      result;

  result = document.createElement("div");
  result.innerHTML =
    "Your name is " + nameField.value +
    " and your age is " + ageField.value;
  form.parentNode.insertBefore(result, form);
  form.parentNode.removeChild(form);
}

Further reading:

Upvotes: 5

Adi Omari
Adi Omari

Reputation: 126

If you want to update your html using java-script only , you may use ".value" attribute of the input;

 var a = document.createElement('p').value;
 var ag = document.getElementById('age').value;

Usually the Form information is processed using server-side code , this is done by specifying the action attribute of the form:

<form action="processuserinfo.aspx">
...
</form>

Upvotes: 1

RylandAlmanza
RylandAlmanza

Reputation: 1388

I'm pretty sure this isn't doable javascript alone. You'll need to use a server-side language like php. Try to google php forms, and you should get some good results. :)

Upvotes: -1

Related Questions