Home/ Questions/Q 6665713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:45:08+00:00

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

  • 0

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??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    • 0