Sol Sol - 2 months ago 13
PHP Question

How do you show/hide content inside a form with jquery?

How do you show/hide content in a form with jquery? When I click this button it just wants to submit.

$(document).ready(function(){

$( ".hide1" ).toggle();
$( ".show_next_div" ).click(function() {
$( ".hide1" ).toggle();
});
});


<form method="post" action="form_submit_action.php">
<button class="btn btn-primary show_next_div">Next Step</button>
<div class="hide1">
<p>something here hidden, now show with button press</p>
</div>
</form>

Answer

just add type="button" to the button tag to stop the submit action

<form method="post" action="form_submit_action.php">
    <button type="button" class="btn btn-primary show_next_div">Next Step</button>
    <div class="hide1">
       <p>something here hidden, now show with button press</p>
    </div>
</form>

Note : there is another option like stop event or return false onsubmit at the form