Javascript and forms

Question

This is my html:

<form id="questions">
<p>Answer: <input type="text" name="textbox1" size="30" /> 
<button onclick="answers()">Submit</button></p>
</form>

This is my javascript:

function answers () {
   var x = document.getElementById("questions");
   var y = x.elements["textbox1"].value;
   document.write("Hello " +y);
}   

My issue is when I click the button, it flashes the document.write string for a split second. I'm not sure why it's only happening for a split second.

Answer 1

try putting

type="button"

in your button element

Answer 2

• Don't use document.write() ; it will replace the page.
  Instead, use the DOM APIs.

• You need to return false from the handler to prevent the default action of submitting the form.

Answer 3

Even though there is no action on your form, some browsers still reload the page on submission, and my guess is this is what's happening.

If you return false on the onclick event, it will stop the default behaviour. You should add an action to the form too, to comply with standards.

<form id="questions" action="#">
    <p>Answer: <input type="text" name="textbox1" size="30" /> 
    <button onclick="return answers()">Submit</button></p>
</form>

function answers () {
   var x = document.getElementById("questions");
   var y = x.elements["textbox1"].value;
   document.write("Hello " +y);
   return false;
}   

Answer 4

return false to avoid the form to be submited

  function answers () {
  var x = document.getElementById("questions");
   var y = x.elements["textbox1"].value;
  document.write("Hello " +y);
  return false;
 }