CODEWITHSUNDEEP
javascriptjqueryhtmlasp-classic
Lori
Lori

Reputation: 130

Submit form data without refreshing entire page

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

Upvotes: 0

Views: 1573

Answers (4)

Lori
Lori

Reputation: 130

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.

Upvotes: 0

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

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>

Upvotes: 1

jordaniac89
jordaniac89

Reputation: 574

Use jquery.post. You can do it on a button click, so

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

Upvotes: 1

Egli Becerra
Egli Becerra

Reputation: 1040

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

Upvotes: -1

Related Questions