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

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. 显示输出的div自动刷新而不会出现问题。 I have tried every conceivable variation of includes, divs, frames, etc for days. 我已经尝试了包括，divs，框架等的所有可能的变体几天。 If I separate the form from the page containing the div, it works ...but I need everything on one page. 如果我将表单与包含div的页面分开，它可以工作...但是我需要将所有内容都放在一页上。

here is the html: 这是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: 这是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

Use jquery.post . 使用jquery.post 。 You can do it on a button click, so 只需单击一下按钮即可完成操作，因此

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

Answer 2

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) 因此您的代码将需要更改为以下内容（我将事件处理程序分配移至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
  }
});

and your html 和你的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

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. 我终于通过将表单放入iframe使其工作了。

Answer 4

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 这样，您的按钮就不会发回去，只是要确保您使用按钮外观来设置跨度，在那之后您应该还可以:)即使使用您现有的代码，我也认为...给它一个破解

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

问题描述

4 个解决方案

解决方案1
1 2014-10-09 00:28:29

解决方案2
1 2014-10-09 00:38:43

解决方案3
0 2014-10-10 18:03:18

解决方案4
-1 2014-10-09 00:27:22

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

问题描述

4 个解决方案

解决方案1 1 2014-10-09 00:28:29

解决方案2 1 2014-10-09 00:38:43

解决方案3 0 2014-10-10 18:03:18

解决方案4 -1 2014-10-09 00:27:22

解决方案1
1 2014-10-09 00:28:29

解决方案2
1 2014-10-09 00:38:43

解决方案3
0 2014-10-10 18:03:18

解决方案4
-1 2014-10-09 00:27:22