Question

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 1

按钮通常会触发表单操作，除非您覆盖它。 因此，最好使用输入类型=＆＃34;按钮＆＃34;

在表单代码中使用以下内容 - 这应该可以使用！

Answer 2

您可以在事件侦听器闭包中停止click事件的传播和默认操作。

$(".show_next_div").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

    $(".hide1").toggle();
});

Answer 3

只需在按钮标记中添加type =“button”即可停止提交操作

<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>

注意：还有另一个选项，如停止事件或在表单

上返回false onsubmit

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

3 个答案: