Question

当我提交表单时，这个简单的聊天工作除了;整个页面重新加载。我只需要表单本身将数据提交到数据库并清除表单。显示输出的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();
}

Answer 1

使用jquery.post。你可以点击一下按钮就可以了，所以

 $(":button").click(function(){
       $.post({url where data is posted}, formData)

Answer 2

您必须阻止提交事件冒泡以避免默认页面刷新行为。

所以你的代码需要改成这样的东西（我将你的事件处理程序赋值转移到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>

Answer 3

我尝试了所有这些建议，不幸的是，这些建议都没有为我工作。我很感激！我终于通过将表单放入iframe来实现它。

Answer 4

嘿，你可以试试这个......

而不是

<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>

通过这种方式你的按钮不会做回帖只是确保你用按钮看样式的跨度看起来你应该没关系:)即使你现有的代码我估计...给它一个裂缝

提交表单数据而不刷新整个页面

4 个答案: