0

I have a form that is defined as follows:

<form id="form" onsubmit="validate()">

I process information and then modify the body of the HTML as follows:

var toRemove = document.getElementById("formContainer");
toRemove.parentNode.removeChild(toRemove);
document.getElementById("main").childNodes[1].innerHTML = text1;
document.getElementById("main").childNodes[3].innerHTML = text2;

This displays corectly for a milisecond maybe, but then the page resets to the blank form. I can fix this by adding an alert afterwards, but as soon as I dismiss the alert the page resets. Is there a way to stop it from resetting?

Here is the full code:

HTML - http://puu.sh/p7HIl/e1abcc7920.html JavaScript - http://puu.sh/p7HJ3/54850f8588.js

Also here is a live version - http://139.62.210.151/~n00876544/assign2/index.html?firstName=Cameron&lastName=Bixby&age=21-30&email=Other&baduk=yes

Pareod
  • 151
  • 1
  • 11

2 Answers2

2

I presume the js snippets are written inside validate function

If it is so you can use event.preventDefault() function which will block the default behavior .

function validate(event){
  event.preventDefault();
  //Rest of the code
}

Note: This will stop from submitting the form. But you can use ajax to send form data

brk
  • 48,835
  • 10
  • 56
  • 78
  • I'm not familiar with `ajax`, but this is for a class so I doubt I can use other languages. This auto-reset isn't a problem I have to fix for the assignment, but I'd like to anyways. – Pareod May 28 '16 at 04:59
  • It seems you aren't planning to send the form data to a server (as you're evidently processing information and outputting response with JavaScript) so preventing that default behavior as described should be sufficient. – darrylyeo May 28 '16 at 05:05
  • Thanks, it worked. If I had to send data to a server is there any other way to do this? Is the `ajax` solution simple? – Pareod May 28 '16 at 05:33
  • @Pareod yes ajax is very simple. It is even simpler If you intend to you jquery – brk May 28 '16 at 06:26
1

The classic method to prevent form submission was to return false from the event handler, as in

<form id="form" onsubmit="validate(); return false;">

or if the validate function returns false to prevent submission, as

<form id="form" onsubmit="return validate();">

You can also prevent the default action by calling preventDefault on the event object. The event object is passed as the first parameter to event handler functions, or set as a window property in older versions of IE. In either case you can prevent the default immediately,

<form id="form" onsubmit="event.preventDefault(); validate();">

or pass it to the validation routine where perhaps preventDefault can be called conditionally.

<form id="form" onsubmit="validate(event)">

Note that HTMLelement.addEventListener functionality provides an alternative to writing javascript event handlers as HTML attribute values and has the advantage of minimizing conflicts between multiple scripts trying to set the same " onEvent" HTML element attribute on the same HTML element.

traktor
  • 17,588
  • 4
  • 32
  • 53