Q:

Trying to create a vanishing form once submitted using javascript

I am trying to create a vanishing form for a small web app. The purpose is once the form is submitted a new form will be displayed. My code at the moment works however it lasts for a bare few milliseconds before reverting to the original form. 
Firstly here is the main form :
<div id="question">
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish();">
<textarea name="question" class="form-field" placeholder="Ask your      question..."></textarea><br><br>
<input type="image" src="images/submit.png" name="qsubmit" >
</form>
</div>

Then there is the form that I want to replace the above one with :
<div id="email" style="display:none;">
<form action="" method="POST" id="email">
<input type="text" name="fName" placeholder="First Name" class="form-field">
<input type="text" name="sName" placeholder="Second Name">
<input type="text" name="email" placeholder="Email">
<input type="image" src="images/submit.png" name="esubmit" onclick="submitForm()">
</form>
</div>

I then have  a javascript function (I am still a newbie to javascript).
function Vanish() {

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "email";

// This line submits the form.
document.getElementById(IDofForm).submit();

// This replaces the form with the replacement content.
document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML;
};

I am trying to achieve :
A simple form swap. Once one form is submitted the other will appear.
A question I found to be simillar to mine is this : Content disappears immediately after form submitted and function runs
However it is only to make a form vanish and not be replaced.
Thanks in advance.

A:

On submit of the form, the page will refresh. So in your function, you must prevent the default behaviour and submit your form via AJAX.
In case the second form need to be shown based on the response from the first form, Then do the form replacement logic after the readyState event fired in AJAX.
function Vanish(event) {

event.preventDefault();

// Specify the id of the form.
var IDofForm = "quest";

// Specify the id of the div containing the form.
var IDofDivWithForm = "question";

// Specify the id of the div with the content to replace the form with.
var IDforReplacement = "email";

// This line submits the form.

// Get all the form elements and submit the form using ajax manually.
// document.getElementById(IDofForm).submit();

// This replaces the form with the replacement content.

// Put this code inside the success of ajax request
document.getElementById(IDofDivWithForm).innerHTML = document.getElementById(IDforReplacement).innerHTML;
};

In your code:
<form action="" method="POST" name="quest" id="quest" onsubmit="Vanish(event);">

