Javascript 具有多个窗体的引导单模式窗口
我有一个模式上的表单提交,它可以很好地为一个表格,但需要有一个页面上的15个模式形式。如何将特定的模式开启器字段绑定到每个表单 我肯定我没有很好地解释自己,所以这里有一个例子。这是定价表的一部分,因此每个div集都将提交自己的时段选择和隐藏字段-由每个单独的模式窗口开启器启动Javascript 具有多个窗体的引导单模式窗口,javascript,php,jquery,twitter-bootstrap,Javascript,Php,Jquery,Twitter Bootstrap,我有一个模式上的表单提交,它可以很好地为一个表格,但需要有一个页面上的15个模式形式。如何将特定的模式开启器字段绑定到每个表单 我肯定我没有很好地解释自己,所以这里有一个例子。这是定价表的一部分,因此每个div集都将提交自己的时段选择和隐藏字段-由每个单独的模式窗口开启器启动 <form action="<?php echo JRoute::_('index.php?option=com_component&view=cart'); ?>" enctype="multi
<form action="<?php echo JRoute::_('index.php?option=com_component&view=cart'); ?>" enctype="multipart/form-data" method="post">
<div class="col col-md-4 no-padding">
<div class="col-header text-center">
<h3>Single Domain</h3>
<h3>$4.99/Mo</h3>
</div>
<div class="col-body">
<ul>
<li class="row0 yes">Single Domain</li>
<li class="row1 yes">Unlimited Web Space</li>
<li class="row0 yes">Unlimited Bandwidth</li>
<li class="row1 yes">Unlimited Mail Accounts</li>
<li class="row0">
<select name="periods">
</option value="12">12 Months</option>
</option value="24">24 Months</option>
</option value="36">36 Months</option>
</select>
</li>
</ul>
<input type="hidden" name="plan_name" value="Single" />
<input type="hidden" name="plan_type" value="Windows_Hosting" />
<input type="hidden" name="plan_id" value="123456" />
</div>
<div class="col-footer text-center">
<!-- Button trigger modal -->
<a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-target="#myModal">Buy Now</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Specify a domain name for your order</h4>
</div>
<div class="modal-body">
<label class="radio-inline">
<input type="radio" name="has_domain" id="inlineRadio1" value="option1"> I already have a Domain Name
</label>
<label class="radio-inline">
<input type="radio" name="register_domain" id="inlineRadio1" value="option1"> I want to buy a new Domain Name
</label>
<input type="text" placeholder="www." id="inputDomain" class="form-control">
<div class="row">
<strong>Building a website for your business? Don't risk it - safeguard your website with our must-have website tools</strong>
<div class="col-sm-6">
<div class="media">
<span class="pull-left sitelock-menu-icon"> </span>
<div class="media-body">
<h4 class="media-heading text-left">Sitelock</h4>
<p class="text-left">Over 5000 websites get attacked everyday. Get SiteLock and secure your website from hackers, viruses and malware.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media">
<span class="pull-left codeguard-menu-icon"> </span>
<div class="media-body">
<h4 class="media-heading text-left">CodeGuard</h4>
<p class="text-left">Protect yourself from unexpected website crashes. Add CodeGuard and get automatic cloud backup for your website and database.</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary btn-small">Continue to checkout</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</div>
</div>
好了,我们开始吧。我认为HTML5的数据属性可以帮到你。请记住我在下面分享的代码非常少。请看一个更完整的示例 通过这样做,您只需要一组隐藏字段(您将与模式表单一起提交的字段)。情况就是这样:
- 用户点击产品。单击的按钮具有与其关联的数据属性,这些属性将传递给模式表单李>
- 打开一个模式,其中包含一个表单(您可以将其隐藏,它们可以显示以演示),该表单现在保存正确的数据李>
- 用户继续,表单将被提交
$(document).ready(function() { // You'll probably wan't to make .btn-default more specific $('.btn-default').on( 'click', function() { var name = $(this).attr('data-name'); var type = $(this).attr('data-type'); var id = $(this).attr('data-id'); var option = $(this).parents('.product').find(':selected').attr('data-option'); $('.modal input#choosen_option').val(option); $('.modal input#choosen_name').val(name); $('.modal input#choosen_type').val(type); $('.modal input#choosen_id').val(id); }); });
<!-- Set #1 -->
<div class="product">
<select name="periods_single">
<option data-option="12">12 Months</option>
<option data-option="24">24 Months</option>
<option data-option="36">36 Months</option>
</select>
<a class="btn-default" data-name="Single" data-type="Windows_Hosting" data-id="1">
Buy Now
</a>
</div>
<!-- Set #2 -->
<div class="product">
<select name="periods_double">
<option data-option="12">12 Months</option>
<option data-option="24">24 Months</option>
<option data-option="36">36 Months</option>
</select>
<a class="btn-default" data-name="Double" data-type="Windows_Hosting" data-id="2">Buy Now</a>
</div>
12个月
24个月
36个月
立即购买
12个月
24个月
36个月
立即购买
具有形式的情态动词:
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog-md">
<div class="modal-content">
<div class="modal-footer">
<form action="">
<input type="text" id="choosen_option" />
<input type="text" id="choosen_name" />
<input type="text" id="choosen_type" />
<input type="text" id="choosen_id" />
</form>
</div>
</div>
</div>
</div>
谢谢Tim,我知道数据属性会传递它们的值,但我如何使用它们来提取周期?请看我的更新答案。JSFIDLE也更新了。抱歉,看起来不错,但我还没有尝试。我今天会给你更新。谢谢成功了!非常感谢。我不得不查一下“父母”是干什么的,但我一读就明白了你的意思是的,一开始这是一个令人困惑的问题,但在工作中很漂亮。很高兴我能帮忙,祝你好运!
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog-md">
<div class="modal-content">
<div class="modal-footer">
<form action="">
<input type="text" id="choosen_option" />
<input type="text" id="choosen_name" />
<input type="text" id="choosen_type" />
<input type="text" id="choosen_id" />
</form>
</div>
</div>
</div>
</div>