如何停止提交表单直到结束?
How do I stop the form submitting until the end?
我只需要 3 个步骤就可以设计一个注册表单:
- 输入您的姓名和电子邮件
- Select扇区(选项1,选项2)
- Select你感兴趣的(选项1,选项2,选项3)
每个步骤都是连续的,并且隐藏了导航按钮,可以使用 jQuery 转到下一步或上一步,但出于某种原因,当您在第 1 步单击下一步时,它会自动提交表单,即使它不是提交表单的按钮,订阅按钮在最后称为订阅,这是一个我必须修改的 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 & 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 & 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/
所以我的问题是如何停止提交表单直到结束?当他们点击订阅时?
将所有导航按钮类型设为按钮 (<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>
我只需要 3 个步骤就可以设计一个注册表单:
- 输入您的姓名和电子邮件
- Select扇区(选项1,选项2)
- Select你感兴趣的(选项1,选项2,选项3)
每个步骤都是连续的,并且隐藏了导航按钮,可以使用 jQuery 转到下一步或上一步,但出于某种原因,当您在第 1 步单击下一步时,它会自动提交表单,即使它不是提交表单的按钮,订阅按钮在最后称为订阅,这是一个我必须修改的 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 & 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 & 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/
所以我的问题是如何停止提交表单直到结束?当他们点击订阅时?
将所有导航按钮类型设为按钮 (<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>