如何停止表单提交直到结束？

Question

我正在设计一个包含 3 个步骤的注册表单：

1. 输入您的姓名和电子邮件
2. 选择扇区（选项 1、选项 2）
3. 选择您感兴趣的内容（选项 1、选项 2、选项 3）

每个步骤都是连续的，并且它隐藏在导航按钮中，以便使用 jQuery 转到下一步或上一步，但由于某种原因，当您在第 1 步单击下一步时，它会自动提交表单，即使它不是可以使用的按钮提交您的表单，订阅按钮在最后称为 subscribe，这是一个 Mailchimp 嵌入式表单，我必须适应。

我的 HTML

<div class="mailchimp_custom_form"  style="background-color: #948F10;display: table;margin: auto;width: 100%;padding: 0px 0px 40px 0px;">

<div class="max-width" style="padding-top: 35px; padding-bottom: 20px;">

<!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
    <div id="mc_embed_signup">

        <form action="<formLink>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

            <div id="mc_embed_signup_scroll">
                <div class="vc_col-md-12 step1">    
                    <h5>Subscribe to our mailing list</h5>

                        <div class="wpb_column vc_column_container vc_col-sm-5">
                            <div class="mc-field-group">
                                <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Name *">
                            </div>
                        </div>

                        <div class="wpb_column vc_column_container vc_col-sm-5">
                            <div class="mc-field-group">
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email *">
                            </div>
                        </div>

                        <div class="wpb_column vc_column_container vc_col-sm-2">
                            <button name="step1" id="step1">Next</button>
                        </div>

                </div>

                <div class="vc_col-md-12 step2">

                    <div class="wpb_column vc_column_container vc_col-sm-8">
                        <div class="mc-field-group input-group">
                            <h5>Choose A Sector</h5>

                                <ul style="display: flex;">
                                    <li>
                                        <input type="checkbox" value="1" name="group[13][1]" id="mce-group[13]-13-0">
                                        <label for="mce-group[13]-13-0">
                                            <img width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" />
                                            <p>Employment & Skills</p>
                                        </label>
                                    </li>
                                    <li>
                                        <input type="checkbox" value="2" name="group[13][2]" id="mce-group[13]-13-1">
                                        <label for="mce-group[13]-13-1"><img  width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" />
                                        <p>Welfare Services &amp; Social Care</p></label>
                                    </li>
                                </ul>

                        </div>
                    </div>

                    <div class="wpb_column vc_column_container vc_col-sm-4 sign_buttons">
                        <button name="step2b" id="step2b">Back</button><button name="step2" id="step2">Next</button>
                    </div>

                </div>
                <div class="vc_col-md-12 step3">

                    <div class="wpb_column vc_column_container vc_col-sm-8">
                        <div class="mc-field-group input-group">
                            <h5>Choose A Topic</h5>
                            <ul style="display: flex;">
                                <li>
                                    <input type="checkbox" value="4" name="group[13][4]" id="mce-group[13]-13-2">
                                    <label for="mce-group[13]-13-2">
                                        <img  width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" />
                                        <p>News</p>
                                    </label>
                                </li>
                                <li>
                                    <input type="checkbox" value="8" name="group[13][8]" id="mce-group[13]-13-3">
                                    <label for="mce-group[13]-13-3">
                                        <img  width="50px" src="../wp-content/uploads/2016/02/sector_oppertunities.png"/>
                                        <p>Opportunities</p>
                                    </label>
                                </li>
                                <li>
                                    <input type="checkbox" value="16" name="group[13][16]" id="mce-group[13]-13-4">
                                    <label for="mce-group[13]-13-4">
                                        <img  width="50px" src=../wp-content/uploads/2016/02/events_training.png" />
                                        <p>Training &amp; Events </p>   
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="wpb_column vc_column_container vc_col-sm-4 sign_buttons">
                        <div class="clear">
                            <button name="step3b" id="step3b">Back</button>
                            <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
                        </div>
                    </div>

                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups /-->

                    <div style="position: absolute; left: -5000px;" aria-hidden="true">
                        <input type="text" name="b_769d2bdcba23fce40f0162f65_817220ff9c" tabindex="-1" value="">
                    </div>  
                </div>




            </div>

        </form>

    </div>

我的 jQuery 非常简单：

btstep1 = $('button#step1'),
btstep2 = $('button#step2'),
btstep2b = $('button#step2b'),
btstep3b = $('button#step3b');

var step1 = $('div.step1');
var step2 = $('div.step2');
var step3 = $('div.step3');

btstep1.click( function(){step1.hide(),step2.show();});
btstep2.click( function(){step2.hide(),step3.show();});
btstep2b.click( function(){step2.hide(),step1.show();});
btstep3b.click( function(){step3.hide(),step2.show();});

https://jsfiddle.net/hpus6r5e/

所以我的问题是如何停止表单提交直到结束？当他们点击订阅？

Answer 1

将所有导航按钮类型设为按钮 (<button type="button">)，将订阅按钮类型设为提交 (<button type="submit">)

参考：JS Fiddle

  btstep1 = $('button#step1'),
    btstep2 = $('button#step2'),
    btstep2b = $('button#step2b'),
    btstep3b = $('button#step3b');

  var step1 = $('div.step1');
  var step2 = $('div.step2');
  var step3 = $('div.step3');

  step2.hide();
  step3.hide();

  btstep1.click(function() {
    step1.hide(), step2.show();
  });
  btstep2.click(function() {
    step2.hide(), step3.show();
  });
  btstep2b.click(function() {
    step2.hide(), step1.show();
  });
  btstep3b.click(function() {
    step3.hide(), step2.show();
  });

  $("#testForm").submit(function(e) {
    alert('Form Submitted');
    event.preventDefault();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
  <div class='step1'>
    Step 1
    <button type="button" id="step1">
      Next
    </button>
  </div>
  <div class='step2'>
    Step 2
    <button type="button" id="step2b">
      Back
    </button>
    <button type="button" id="step2">
      Next
    </button>
  </div>
  <div class='step3'>
    Step 3
    <button type="button" id="step3b">
      Back
    </button>
    <button type="submit">
      Subscribe
    </button>
  </div>
</form>