刷新表单结果而不刷新页面
Refreshing form results without refreshing the page
这是对我的结构的解释,以便更好地理解我要做的事情。
我有一个初始表单,您可以在其中选择一个项目。提交初始表单后,您会得到一个包含多行和多列的表,最后还有三个按钮。其中一个按钮将打开另一个窗体的模式窗口,您可以在其中编辑表的某些值。
当我保存并关闭表单时,我添加了一个window.parent.location.reload();
来刷新父页面并显示新编辑。不幸的是,这会问我是否想在父页面上重新提交表格,这可能很烦人!我需要一种方法来刷新父窗体的结果,而不是整个页面,而不需要一直刷新对话框。此外,chrome会从父窗体中删除所有以前的数据,并将父页面重新加载到其初始状态。
初始形式
<form class="form-horizontal" action="surveyCategories.cfm" method="post">
<input type="hidden" name="post" value="1">
<select name="survey" class="span3">
<option value="">Select a Survey to Edit</option>
<cfloop query="surveys">
<option value="#id#">#name#</option>
</cfloop>
</select>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
带有按钮的结果表:(这是我关闭模态后需要刷新的表)
<form name="list" method="post" action="surveyCategories.cfm" >
<input type="hidden" name="listFormPost" value="1">
<table class="table table-hover">
<tr>
<th>Select</th><th>Survey Name</th><th>Category</th><th>Category Weight</th>
</tr>
<cfloop query="categories">
<tr>
<td><input class="checkbox" type="checkbox" name="mark" value="#recID#"></td>
<td>#name#</td>
<td>#categoryname#</td>
<td>#cweight#</td>
</tr>
</cfloop>
</table>
<hr />
<div class="pull-left">
<a href="##addCategory" role="button" class="btn btn-success" data-toggle="modal">Add Category</a>
<a href="##update" role="button" class="btn btn-warning" data-toggle="modal">Update</a>
<button class="btn btn-danger" type="button" onClick="dlte(mark); window.parent.location.reload();" >Delete</button>
</div>
</form>
模式窗口:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Update</h3>
<div id="results"></div>
</div>
<div class="modal-body">
<form name="update" action="updateSCpair.cfm" method="post">
<input type="hidden" name="post2" value="1">
<input type="hidden" name="surveyid" value="#categories.surveyid#" >
<input type="text" value="#categories.name#" class="input-xlarge" disabled> <br />
<select name="categories" onChange="handleCategoryChange();">
<option value="" selected >Select a Category</option>
<cfloop query="ratingCat">
<option value="#ratingCat.categoryid#" >#ratingCat.categoryName#</option>
</cfloop>
</select>
<br />
<input id="score" name="score" class="span3" type="text" required >
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true" onClick="window.parent.location.reload();">Close</button>
<button class="btn btn-primary" type="button" onClick="upd();" >Save changes</button>
</div>
</form>
您将想要使用AJAX。
<!DOCTYPE html>
<html>
<head>
<script>
function showModal(){ /*code to show modal*/}
function hideModel(){ /*code to hide modal*/}
function updateParentForm(jsonObject){
var parentFormNameInput = document.getElementById('parent_form_name');
parentFormNameInput.value = jsonObject.name;
}
function submitForm() {
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function readyStateChange(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
// Lets assume you're responding back with a JSON string:
// { "name": "submitted name" }
var jsonObject = JSON.parse(xmlhttp.responseText);
updateParentForm(jsonObject);
hideModal();
}
}
xmlhttp.open("POST","submit.cfm",true);
xmlhttp.send("name=" + document.getElementById('modal_name').value);
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let's submit a form!</h2></div>
<!-- HERE IS OUR BUTTON TO DISPLAY THE MODAL -->
<button type="button" onclick="showModal()">Show Modal Form</button>
<!--
Our modal HTML might look like this:
<form>
<input name="modal_name" id="modal_name" />
<button type="button" onclick="submitForm()">Submit</button>
</form>
-->
<form>
<input name="name" id="parent_form_name" />
</form>
</body>
</html>
submitForm方法负责跨浏览器兼容性。onreadystatechange事件在响应的生命周期中被触发多次。
您所关心的只是readyState为4和状态为200。在本例中,您的submit.cfm使用JSON进行响应,以便于解析。
使用xmlhttp.send方法发送名称值。对于多于一个的参数,将每个参数与&即xmlhttp.send('name=bill&age=30')。
代码借用自:http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
我希望这能有所帮助。
您可以尝试以下操作。
window.location = 'http://yourlocation';
如果这不起作用,那么您可以通过AJAX提交表单。请参阅此处,或者如果您使用的是jQuery,请参阅此处
- Jquery提交表单而不刷新
- 单击表单中的按钮会导致页面刷新
- 停止刷新表单,但要发布
- 如何刷新表单的yii2前端验证
- 刷新<表单>送审不起作用
- 阻止 jquery 移动刷新表单提交
- Javascript AppendChild 自动刷新表单
- 我需要刷新表单,但仍然保持复选框的值不变
- CRM 2013:刷新表单或通过浏览器的后退按钮向后导航时出现奇怪的行为
- 如何在表单提交到_blank后刷新表单页面
- CRM 2013:保存后强制刷新表单
- 停止刷新表单
- 使用jQuery Mobile刷新表单页面
- 如何停止随机生成的数字从刷新表单提交
- 提交parse.com后刷新表单
- 提交后,刷新表单页面上的感谢信息
- 在提交时停止自动刷新表单
- 刷新表单结果而不刷新页面
- 在不刷新表单的情况下调用锚链接单击事件上的标记库
- 刷新表单提交不工作