提问人:Lori 提问时间:10/9/2014 最后编辑:Lori 更新时间:10/11/2014 访问量:1536
在不刷新整个页面的情况下提交表单数据
Submit form data without refreshing entire page
问:
这个简单的聊天有效,除非我提交表格;整个页面将重新加载。我只需要表单本身将数据提交到数据库并清除表单。显示输出的 div 会自动刷新,而不会出现任何问题。几天来,我已经尝试了所有可以想象的包含、div、框架等变体。如果我将表单与包含 div 的页面分开,它会起作用......但我需要所有内容都在一页上。
下面是 HTML:
<% @LANGUAGE = "VBScript" %>
<!-- #INCLUDE VIRTUAL="000_scripts/asp/chat_config.asp" -->
<!-- #INCLUDE VIRTUAL="chat_scripts.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="chat.js"></script>
</head>
<body>
<div id="div_db1">not loading db1</div>
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<input type="submit" value="send" onClick="submitform()">
</form>
</body>
</html>
下面是 JS:
function submitenter(myfield,e)
{
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return true;
if (keycode == 13)
{
myfield.form.submit();
return false;
}
else
return true;
}
function submitForm() {
var frm = document.getElementsByID('Send_Chat')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}
$.ajaxSetup ({
cache: false
});
$(document).ready(function(){
setInterval(function(){
$('#div_db1').load('viewalldb3.asp');
}, 50);
});
window.onload = function() {
var input = document.getElementById("T_Body_FieldID").focus();
}
答:
-1赞
Egli Becerra
10/9/2014
#1
嘿,你能试试这个吗?
而不是拥有
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<input type="submit" value="send" onClick="submitform()">
</form>
有这个
<form name="Send_Chat" id="Send_Chat" action="<% toDB() %>" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID" onKeyPress="return submitenter(this,event)" ></textarea>
<span onClick="submitform()">Send</span>
</form>
这样,您的按钮就不会回发,只需确保您用按钮外观设置跨度样式,然后您应该没问题:)即使使用您现有的代码,我认为......给它一个裂缝
评论
0赞
user692942
10/9/2014
它只是使用 Forms 事件来处理代码中的提交。为什么要使用 a 如果你要这样做,为什么不直接使用 or ?<input type="submit" />
submit
<span>
<button>
<input type="button" />
1赞
jordaniac89
10/9/2014
#2
使用 jquery.post。你可以通过点击按钮来完成,所以
$(":button").click(function(){
$.post({url where data is posted}, formData)
评论
0赞
user692942
10/9/2014
正确答案,但不是一个很好的答案。
1赞
jordaniac89
10/9/2014
我真的只是想给他指明正确的方向。其中大部分都可以通过简单的谷歌搜索来弄清楚。我不会为他/她写代码。
1赞
Birgit Martinelle
10/9/2014
#3
您必须防止 submit 事件冒泡,以避免默认的页面刷新行为。
因此,您的代码需要更改为如下所示(我将事件处理程序赋值移至 JavaScript,因为它更简洁)
$('#Send_Chat').on('submit', function(e){
e.preventDefault(); //this prevents the refresh because it cancels the default event bubbling
$.ajax({ //make sure your form data gets to the server ...
type: "POST",
url: <% toDB() %>,
data: $(this).serialize(),
success: function() {
//done - you've submitted your message
}
});
$('#T_Body_FieldID').on("keydown", function() {
if (event.keyCode == 13) {
$('#Send_Chat').submit(); // Submit form code
}
});
和你的 HTML
<form name="Send_Chat" id="Send_Chat" action="#" method="post">
<textarea name="T_Body_Field" id="T_Body_FieldID"></textarea>
<input type="submit" value="send">
</form>
0赞
Lori
10/11/2014
#4
我尝试了所有这些建议,不幸的是,它们都不适合我。不过我很感激!我终于通过将表单放入 iframe 中来让它工作。
评论
submitform()
submitForm()