Form Disappears Immediately when Button Is Clicked

When the submit button is clicked, the form immediately disappears. The space the form previously occupied can be:

Collapsed. The content that was below the form moves into the space vacated by the form.
Removed. Only the page background remains where the form had been.
Replaced. The replacement can be any content that fits the area previously occupied by the form.

Examples of each are included later in this article.

Reasons for removing a form immediately when the submit button is clicked include:

Preventing repeated clicks on the submit button.
Ajax is silently handling the form processing with no acknowledgement required for the site user.
Presenting a message as the submission proceeds.

How It Works

The submit button is a type="button" field instead of type="submit"

When the button is clicked, JavaScript submits the form and then immediately (without waiting for server response) removes the form from the page.

Examples

Each of the three examples demonstrate the form disappearing after the button is clicked. The first replaces the form with other content. The second collapses the form for other content to move into the space. The third makes the form invisible.

The example forms don't actually submit. (So you stay on the page.)

Each of the three examples is followed by the source code to provide the example functionality.

Here is the first example. When the button is clicked the space occupied by the form collapses, allowing other content to replace the space previously occupied by the form.

First example.

The first example source code, notes follow:

<div id="example1" style="text-align:center; border:1px solid black; padding:10px;">
<p style="margin:0;"><b>First example.</b></p>
<form id="form1" method="post" action="script.php">
Name: <input type="text" style="width:200px;"><br>
<input type="button" onclick="CollapseForm()" value="Click Me" style="width:300px;">
</form>
</div>

<script type="text/javascript">
function CollapseForm()
{
// Two places to customize:

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

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

// This line submits the form. (If Ajax processed, call Ajax function, instead.)
document.getElementById(IDofForm).submit();

// This line collapses the form.
document.getElementById(IDofDivWithForm).style.display = "none";
}
</script>

Notes:

Pertinent id values in the source code are colored red and pertinent JavaScript function names are colored blue.

The div containing the form — The div has an id value used in the JavaScript. The div's style may be changed as needed.
The form tag — The form tag has an id value used in the JavaScript. The form tag's attributes need to be modified for the location of the form processing software (unless the form will be Ajax processed, in which case the form tag can remain as is).
The submit button — The submit button is type="button" instead of type="submit". The button tag contains an onclick="CollapseForm()" attribute, which launches the JavaScript CollapseForm() function when the button is clicked.
The JavaScript — The JavaScript has two places to customize, one for the id value of the form tag and one for the id value of the div containing the form.

The JavaScript may be anywhere on the page that JavaScript can run. It may also be imported from an external file.

Here is the second example. When the button is clicked the space occupied by the form becomes blank except for the page background.

Second example.

The second example source code, notes follow:

<div id="example2" style="text-align:center; border:1px solid black; padding:10px;">
<p style="margin:0;"><b>Second example.</b></p>
<form id="form2" method="post" action="script.php">
Name: <input type="text" style="width:200px;"><br>
<input type="button" onclick="RemoveForm()" value="Click Me" style="width:300px;">
</form>
</div>

<script type="text/javascript">
function RemoveForm()
{
// Two places to customize:

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

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

// End of customizations.

// This line submits the form. (If Ajax processed, call Ajax function, instead.)
document.getElementById(IDofForm).submit();

// This collapses the form.
document.getElementById(IDofDivWithForm).style.visibility = "hidden";
}
</script>

Notes:

Pertinent id values in the source code are colored red and pertinent JavaScript function names are colored blue.

The div containing the form — The div has an id value used in the JavaScript. The div's style may be changed as needed.
The form tag — The form tag has an id value used in the JavaScript. The form tag's attributes need to be modified for the location of the form processing software (unless the form will be Ajax processed, in which case the form tag can remain as is).
The submit button — The submit button is type="button" instead of type="submit". The button tag contains an onclick="RemoveForm()" attribute, which launches the JavaScript RemoveForm() function when the button is clicked.
The JavaScript — The JavaScript has two places to customize, one for the id value of the form tag and one for the id value of the div containing the form.

The JavaScript may be anywhere on the page that JavaScript can run. It may also be imported from an external file.

Here is the third example. When the button is clicked the space occupied by the form is replaced with other content.

Third example.

The third example source code, notes follow:

<div id="example3" style="text-align:center; border:1px solid black; padding:10px;">
<p style="margin:0;"><b>Third example.</b></p>
<form id="form3" method="post" action="script.php">
Name: <input type="text" style="width:200px;"><br>
<input type="button" onclick="ReplaceForm()" value="Click Me" style="width:300px;">
</form>
</div>

<div id="for_replacement" style="display:none;">
<p>
<b>This replaces the form when the button is clicked.</b>
<br>(This visual example does not submit. A real form would.)
</div>

<script type="text/javascript">
function ReplaceForm()
{
// Three places to customize:

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

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

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

// End of customizations.

// This line submits the form. (If Ajax processed, call Ajax function, instead.)
document.getElementById(IDofForm).submit();

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

Notes:

Pertinent id values in the source code are colored red and pertinent JavaScript function names are colored blue.

The div containing the form — The div has an id value used in the JavaScript. The div's style may be changed as needed.
The form tag — The form tag has an id value used in the JavaScript. The form tag's attributes need to be modified for the location of the form processing software (unless the form will be Ajax processed, in which case the form tag can remain as is).
The submit button — The submit button is type="button" instead of type="submit". The button tag contains an onclick="ReplaceForm()" attribute, which launches the JavaScript ReplaceForm() function when the button is clicked.
The div containing the replacement content — In the example, this div is between the div containing the form and the JavaScript. However, it can be anywhere in the BODY area of the web page. The div has an id value used in the JavaScript. The div's style may be changed as needed – except keep the display:none; CSS attribute.
The JavaScript — The JavaScript has three places to customize, one for the id value of the form tag, another for the id value of the div containing the form, and a third for the id value of the div containing the replacement content.

The JavaScript may be anywhere on the page that JavaScript can run. It may also be imported from an external file.

Implementing Ajax

The source code of the above examples mention that forms can be Ajax-processed. How to do that is beyond the scope of this article.

See Copy and Paste Ajax Engine for an Ajax engine that may be modified to submit form data to form processing software on the server without reloading the form page.

Ajax for Forms, a premium product available in WebSite's Secret, is already coded to submit form data to software on the server.

JavaScript-displayed Forms

To display the above forms only when browsers are JavaScript enabled, follow the instructions for the example of your choice.

Instructions for the form at the first example:

In the style attribute of the div containing the form, insert display:none;
Somewhere below the form, insert this JavaScript:
```
<script type="text/javascript">
document.getElementById("example1").style.display = "block";
</script>
```
If the id value of the div containing the form is something other than "example1", modify the JavaScript accordingly.

Instructions for the form at the second example:

In the style attribute of the div containing the form, insert visibility:hidden;
Somewhere below the form, insert this JavaScript:
```
<script type="text/javascript">
document.getElementById("example2").style.visibility = "visible";
</script>
```
If the id value of the div containing the form is something other than "example2", modify the JavaScript accordingly.

Instructions for the form at the third example:

In the style attribute of the div containing the form, insert display:none;
Somewhere below the form, insert this JavaScript:
```
<script type="text/javascript">
document.getElementById("example3").style.display = "block";
</script>
```
If the id value of the div containing the form is something other than "example3", modify the JavaScript accordingly.

Implementing a Disappearing Form

To implement a disappearing form on your website, first determine what shall happen with the form's disappearance.

If the area occupied by the form shall collapse, use example 1 as your guide.
If the area occupied by the form shall remain empty, use example 2 as your guide.
If the area occupied by the form shall be replaced with other content, use example 3 as your guide.

There are a number of reasons for disappearing a form when the submit button is clicked. Whatever your reason is, one of the above examples are likely to have the functionality you're looking for.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.