我有一个HTML表单,点击按钮会生成一个Modal窗口。按钮如下所示。
<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>
启动的模态类型将是"基本"类型。Modal实际上是另一种形式,然后通过POST方法将其提交到另一个PHP页面。模态如下。
<div class="modal fade" id="BASIC" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Header</h4>
</div>
<div class="modal-body">
<form class="contact-work-form2 mar" id="contact-form" action="" method="post">
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Name" id="name2" name="name" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Email" id="mail2" name="mail" required>
</div>
</div>
<div class="text-input">
<div class="float-input">
<input type="text" placeholder="Phone" id="phone" name="phone" required>
</div>
<div class="float-input2">
<input type="text" placeholder="Company" id="company" name="company" required>
</div>
</div>
<div class="text-input">
<div class="float-input1">
<input type="text" required name="country" id="country" placeholder="Country">
</div>
</div>
<input type="submit" value="Submit" class="submit_contact main-form" name="mailing-submit">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我可以POST到PHP页面。然而,在发布时,我还需要传递一个变量,该变量具有启动模态的按钮的值或ID。
您可以通过访问按钮id
$(document).ready(function(){
$('.btn').click(function(){
var a=$(this).attr('id');
alert(a);
});
});
尝试以下代码,
- 当你点击按钮时,它会获取相应的模态id
- 该id将作为隐藏字段添加到表单中
- 当您提交表单时,您可以访问服务器端的数据
<script type="text/javascript">
function appendHiddenDiv(){
var modalNameWithHash = $(this).attr('data-target');
var modalName = modalNameWithHash.substring(1)
$('<input>').attr({
type: 'hidden',
name: 'plan',
value: modalName
}).appendTo(modalNameWithHash+' '+'form');
}
$(document).on("click",'button[data-toggle="modal"]', appendHiddenDiv);
</script>
我希望这能有所帮助。