Clever Geek Handbook

Hide div with form after form submit and show hidden div

so i have this

    <div id="first" class="1" style="display:">
        <form>
            <input type=submit>
        </form>
    </div>
    <div id="second" class="2" style="display:none">
        test
    </div>

I want to toggle the display option after the form is submitted (button is clicked). I want the script to become like after clicking the submit button

    <div id="first" class="1" style="display:none">
        <form>
            <input type=submit>
        </form>
    </div>
    <div id="second" class="2" style="display:">
        test
    </div>
+3


source to share


2 answers


You can add a handler onsubmit

. Without using a third party library like jQuery, here's a basic way to do it with inline JavaScript:

<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">

onsubmit

is triggered whenever the form is submitted, whether by clicking a button Submit

, programmatically, or if the user clicks Enterin a text box, for example.



However, I would recommend using jQuery and a more unobtrusive approach than this built-in approach. If you want to see how to do this using jQuery, here's a jsFiddle that shows one way to accomplish this. Basically, you would add id

, for example myform

, to an element form

, and then add this to your JavaScript:

$(document).ready(function() {
    $("#myform").submit(function(e) {
        $("#first").hide();
        $("#second").show();
    });
});
+3


source


First enter the id to submit the button.

<div id="first" class="1" style="display:">
    <form>
        <input type=submit **id="submit-btn"**>
    </form>
</div>
<div id="second" class="2" style="display:none">
    test
</div>


Then write the button "Click Event of submit" 

jQuery("#submit-btn").click(function(e)) {
    e.preventDefault();
    jQuery('#first').hide();
    jQuery('#show').show();
}
+2


source






More articles:


All Articles