2014-10-08 13 views
0

Этот простой чат работает за исключением при отправке формы; вся страница перезагружается. Мне нужно только для самой формы, чтобы отправить данные в базу данных и очистить форму. Div, который отображает вывод, автоматически обновляется без проблем. Я пробовал все мыслимые варианты включений, divs, frames и т. Д. В течение нескольких дней. Если я отделяю форму от страницы, содержащей 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>  

здесь является ЯШ:

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(); 
} 
+2

Сразу видно, что вы вызываете 'submitform()' при щелчке, но ваша функция называется 'submitForm()'. –

ответ

-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

Это '' просто использовать событие 'submit' для обработки представления в коде. Зачем использовать '', если вы собираетесь это сделать, а не просто использовать'

1

Использование jquery.post. Вы можете сделать это на кнопку мыши, так

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

Правильный ответ, но не большой ответ. – Lankymart

+1

Я действительно просто пытался указать ему в правильном направлении. Большинство из них можно понять с помощью простого поиска Google. Я не буду писать код для него/нее. – jordaniac89

1

вы должны предотвратить представить событие пузыря, чтобы избежать поведения обновления страницы по умолчанию.

поэтому код нужно будет изменить на что-то вроде этого (я переехал ваше событие назначение обработчика в 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

Я попробовал все эти предложения и, к сожалению, никто из них не работал для меня. Я ценю это, хотя! Я, наконец, получил его для работы, поместив форму в iframe.

Смежные вопросы