从模式引导程序调用操作
Call action from modal bootstrap
我的HTML代码如下:
<form action="form2_action.php" method="post">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
我的Javascript代码是这样的:
$('#submit').on('click',function(e){
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
演示如下:http://jsfiddle.net/oscar11/xxx03c6z/
如何从模式引导程序调用操作?
那么,当点击模式引导中的"保存更改"按钮时,如何保持系统调用动作form2_action.php
?
非常感谢
-
给表单一个
id
,以便在javaScript代码中引用。<form id="form1">
-
然后定义如下函数:
function formSubmit(){ $('#form1').submit(); }
-
点击保存按钮调用
formSubmit
。<button type="button" onClick="formSubmit();" class="btn btn-primary">
-
表单提交
$("#modal submit btn").click(function(){$('mal-dialog-id').modal('hide');$('#form id').submit();});
检查我的脚本,它运行良好。。只需将表单标签置于引导模式,并从bootstap模型的输入中获取值。这是小提琴,你可以查看:https://jsfiddle.net/kriz1439/v5wpwcv9/
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required> </td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button type="button" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm-save">Submit</button></td>
</tr>
</table>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action ="action.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" > <input type="text" id ="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" > <input type="text" id ="last_name_modal"> </td>
</tr>
<tr>
<td>Age</td>
<td height="40"> <input type="text" id ="age_modal"> </td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<input type="submit" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
<script>
$('#submit').on('click',function(e){
document.getElementById("first_name_modal").value = document.getElementById("first_name").value;
document.getElementById("last_name_modal").value= document.getElementById("last_name").value;
document.getElementById("age_modal").value = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
</script>
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- 如何使用Ajax调用特定的控制器和操作来重定向用户
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- HTML class=Ajax操作,如何让类点击调用好的操作
- 控制台.log触发,但随后的 Jquery 调用不执行任何操作
- 是否可以将alertify.js的cancel按钮和onclose调用的操作分开
- 如何从 MVC4 链接调用 Javascript 方法(错误 JavaScript 运行时错误:对象不支持此操作)
- Rails:如何在jQuery(.js.erb)中调用“create”操作
- 如何重新加载调用部分视图的操作
- React/Redux 状态在第二次操作调用时为空
- 如何使用ROR从控制器操作调用javascript函数
- 表单操作调用按钮
- 从表单操作调用JS函数,然后从JS调用PHP
- 在对支柱 1 执行操作调用之前确认对话框
- 如何在 Yii 中通过操作调用 CJui对话
- EmberJS actions - 当包装在“actions”中时,从另一个操作调用一个操作
- ServiceNow UI操作调用客户端和服务器代码
- 在js文件中播放框架控制器操作调用
- 使用URL从html表单操作调用Java API时返回的响应