Question

我正在尝试将我的bootstrap 3.0表单添加到： 1.单击“提交”按钮时提交表单数据 2.打开一个模态窗口，我在其中发送确认消息

现在我只能得到其中一个。

这是我的表单代码：

<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb"  method="POST">

<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />

<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>

<input type="submit" data-target="#myModal" data-toggle="modal" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- JS Code -->

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">     </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>$('#myModal').modal(options)</script>

Answer 1

HTML，

<form class="form-inline" role="form" action="https://dr113.infusionsoft.com/app/form/process/c187fc8ec993976a148e2c952f89e9fb"  method="POST" id="myForm">

<input name="inf_form_xid" type="hidden" value="c187fc8ec993976a148e2c952f89e9fb" />
<input name="inf_form_name" type="hidden" value="Sign-up 50 Design Report" />
<input name="infusionsoft_version" type="hidden" value="1.29.6.37" />

<div class="form-group">
<label class="sr-only" for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="inf_field_Email">
</div>

<input type="submit" id="sbm" value="Download Your Guide" class="btn btn-primary btn-large" />
</form>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></p>
</div>
<div class="modal-body">
<h4 class="text-center">Share this Guide with your readers</h4>
<p class="text-center">Twitter | Facebook | LinkedIn</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

和SCRIPT，

$("#sbm").click(function(e){
    e.preventDefault();
    // validate form inputs
    // if validated
    $("#myForm").submit()
    $('#myModal').modal('show'); 
});

试试这样。不要忘记包含jQuery，Bootstrap并进行验证。阅读http://api.jquery.com/submit/

Bootstrap表单提交和模态

1 个答案: