Dynamically Hide Form On Submit?

August 26, 2023 Post a Comment

I am not a big web programmer, and have a friend who wants me to help him with something. He wants to be able to have a form that once it is submitted changes to say something like

Solution 1:

What is supposed to happen to the information in the form? Doesn't matter?

If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.

On the submitting side:

<h1>Email Subscription:</h1><formaction="successForm.html"><inputtype="text"name="emailAddress" /><buttontype="submit">Send Info</button></form>

On the receiving side (successForm.html)

<h1>Email Subscription:</h1><p>Great job, you submitted!</p>

However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.

It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:

<!-- Goes in the <head> or in a seperate script --><scripttype="text/javascript">var theSubmitButton = document.getElementById('formSubmit');

    theSubmitButton.onclick = function() {
        var theFormItself = 
            document.getElementById('theForm');
        theFormItself.style.display = 'none';
        var theSuccessMessage = 
            document.getElementById('successMessage');  
        theSuccessMessage.style.display = 'block';          
    }
</script><!-- Goes in the body --><h1>Email Subscription:</h1><pid="successMessage">You submitted the form, good job!</p><formid="theForm"action="successForm.html"><inputtype="text"name="emailAddress" /><buttonid="formSubmit"type="submit">Send Info</button></form>

Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.

However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.

(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)

Solution 2:

Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.

This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.

Solution 3:

The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.

You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.

Solution 4:

There's 2 options:

Old school forms: Person clicks submit and form data gets sent server side via GET or POST, the page loads again and displays "Thanks for submitting"
New school javascript AJAX Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"

Anything else is some hybrid of both these techniques.

Solution 5:

I know you want to avoid anything other than html but this simple php code may help. You could use php within the page

fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');

Then in the original form page, add a php IF statement above the form code:

$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

if(strpos($url, 'form=submited')) {
echo'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}

Build Html5