Submit form data without refreshing entire page
Question
This simple chat works except when I submit the form; the entire page reloads. I need only for the form itself to submit the data to the database and clear the form. The div that displays the output refreshes automatically with no trouble. I have tried every conceivable variation of includes, divs, frames, etc for days. If I separate the form from the page containing the div, it works ...but I need everything on one page.
here is the 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>
here is the 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();
}
4 answers
solution1
1 2014-10-09 00:28:29
Use jquery.post . You can do it on a button click, so
$(":button").click(function(){
$.post({url where data is posted}, formData)
solution2
1 2014-10-09 00:38:43
you have to prevent the submit event to bubble up to avoid the default page refresh behavior.
so your code would need to be changed to something like this (i moved your event handler assignment into javascript because it's cleaner)
$('#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
}
});
and your 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>
solution3
0 2014-10-10 18:03:18
I tried all of these suggestions and unfortunately none of them worked for me. I appreciate it though! I finally got it to work by placing the form into an iframe.
solution4
-1 2014-10-09 00:27:22
Hey can you please try this...
Instead of having
<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>
Have this
<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>
This way your button wont do a post back just make sure u style the span with a button look you should be fine after that :) even with your existing code i reckon... give it a crack
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.