CODEWITHSUNDEEP
phpjavascriptajax
JochemQuery
JochemQuery

Reputation: 1547

Can a submit button work without refresh AJAX?

I have a problem with my very simple chat. The page is constanly refreshing with AJAX with an timeout of 750ms. If I press or use enter to submit my 'reaction', the page refreshes: is there an way to remove that, so that you can instantly see what you've posted?

You can see the chat at my website: chat

The code:
Index.php

<!DOCTYPE HTML>
<?php include 'config.php'; ?>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.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;
}


</script>

    <title>JavaScript Chat</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>

</head>
<body>
    <div class="container">
        <div id="chatwindow">

        </div>

        <div class="inputMessage">
            <form method="post">


    enter code here

            <hr></hr>
                <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                <input type="text" value="" name="username" />
                <input type="submit" value="verstuur" name="submit" onKeyPress="return submitenter(this,event)" />

            </form>
            <?php   include 'send.php'; ?>      
        </div>

        <script type="text/javascript">
          $(document).ready(function(){
            setInterval ( "get()", 750 );
          });
          function get(){
             $.ajax({
               type: 'GET',
               url: 'chat.php',
               success: function(data){
                 $("#chatwindow").html(data);
               }
             });
          }
        </script>
</div>
</body>
</html>

chat.php

<?php
    include 'config.php';
    $result = mysql_query("select * from Message");
    while($row = mysql_fetch_array($result))
    {
        echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
    }
?>

send.php

<?php 

if(isset($_POST['submit'])) 
    {
    if (!empty($_POST['username']))
        {
            if(!empty($_POST['message']))
            {
                $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                mysql_query($query);
            }
            else
            {
            echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
            }
        }
    else
    {
        echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
    }
}
?>

if my question is not clear say it please. And is there a topic/question/post about good spacing? google translated it as "indent". Thanks

Upvotes: 0

Views: 2840

Answers (3)

Steve Buzonas
Steve Buzonas

Reputation: 5700

Your desired action is to prevent the onSubmit action as the other answers have mentioned. Currently your script isn't quite ready to block submit as you don't have an ajax post method.

You need ajax functionality for the submission side of the application still. For this you can use jQuery post().

You want to create something like

function send() {
    $.post(); // Fill in appropriate post() code.
    return false;
}

And then call it from your event handlers like onsubmit="return send()" and in place of myfield.form.submit() in your keypress handler.

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 12503

Replace 

<form method="post">

With

 <form onsubmit="event.preventDefault()" method="post">

You may also use your callback function here like:

 <form onsubmit="event.preventDefault();return submitenter(this,event);" method="post">

Working demo: http://jsfiddle.net/usmanhalalit/5RCwF/2/

Upvotes: 3

Dion
Dion

Reputation: 3335

Add e.preventDefault(); in JS.

Upvotes: 1

Related Questions