Submit form without page refresh.

[vandALOT]

Hello.

I`m trying to build chat and i have problem using ajax to post message without refreshing whole page. I already have the code that refresh div with last 10 messages and it works nice.

 

I tried to use this code from

http://www.phpfreaks.com/forums/index.php?topic=343582.msg1621200#msg1621200

:

Ajax:
<script>
$.post('postmsg.php', $("#msgsending").serialize());
</script>


Form:
<form id="msgsending" name="msgsending">
<input type="text" name="message" style="width: 300px" size="20" />
<input type="submit" name="submit" style="width: 50px" value="Send" />
</form>


My file that receive form data starts:
if (!isset($_SESSION['myuser'])) { // if not logged go to 
   header ("Location: index.php");
}else{
   if (empty($_POST['message'])) {  
............
............

 

I dont know much about ajax and dont know how to set it up.

When i post form without ajax it works ok.

 

I`ll apreciate any help.

 

 

 

 

[AyKay47]

the ajax needs to be triggered by an event, in this instance, the onsubmit() event, which in jquery is submit():

 

<script type='text/javascript'>
      $("#msgsending").submit(function() {
            $.post('postmsg.php', $("#msgsending").serialize(), function(data)() {
                  alert(data);
            });
      });
</script>

[vandALOT]

It doesnt work.

Should I change anythink in form ?

 

<form id="msgsending" name="msgsending" method="post" action="">

 

When i put action="postmsg.php" it redirects me to postmsg file

[vandALOT]

I realy dont know how to use it. Please help.

[AyKay47]

<script type='text/javascript'>
      $("#msgsending").submit(function() {
            $.post('postmsg.php', $("#msgsending").serialize(), function(data)() {
                  alert(data);
            });
           return false;
      });
</script>

 

if this doesn't work, please post the results and any relevant form handling code.

[vandALOT]

Hmm  i dont know what im doing wrong.

Form and script alone works fine :

 

Form:
    <form id="msgsending" name="msgsending" method="post" action="">
	<input type="text" name="message" style="width: 435px" size="20" />
	<input type="submit" name="submit" style="width: 60px" value="Send" />
	</form>


Handling code:


session_start();

if (!isset($_SESSION['myuser'])) { // if not logged go to 

  header ("Location: index.php");
  
}else{

  if (empty($_POST['message'])) {
        
	header ("Location: index.php");
  
  }else{
	require('myplugins/db.connect.php');
	connect_to_db('rzrtube_db');
		#########################################  Find free 6-digit number in a table
		$idlist = mysql_query('select id from chat');    // add IDs to table	
		$idg = '123654';

		 while($nextrow=mysql_fetch_array ($idlist)) {   // first free 6 digit id

			 if ($idg == $nextrow['id']){

				 $idg = mt_rand(100000, 999999);
			 }

		 }		

	    $nick = $_SESSION['myuser']['nickname'];
		$message = $_POST['message'];
		$chat1st = "
					INSERT INTO chat ( id,        user,      message,                     time )
					VALUES           ( '$idg',   '$nick',   '$message',  NOW( ));
		 ";

		 mysql_query($chat1st) or die(mysql_error());

  }
  
}

 

This script alone works ok (when i put:  action="postmsg.php" in form)

But it redirect me to handling file.

 

[AyKay47]

okay, one more time.

 

<script type='text/javascript'>
      $(function() {
            $("#msgsending").submit(function() {
                  $.post('postmsg.php', $("#msgsending").serialize(), function(data)() {
                        alert(data);
                  });
            return false;
            });
      });
</script>

 

if this does not work, then an obvious question must be asked, do you have the jquery library included in your page?

[vandALOT]

At front of the code you gave me i have:

<script src="http://code.jquery.com/jquery-latest.js"></script>

 

Should it work without anythink in form action ?

<form id="msgsending" name="msgsending" method="post" action="">  <-----

 

 

[vandALOT]

I realy apreciate your help  AyKay47.

I still cant fix it

[AyKay47]

well, you are forgetting an attribute with the <script> element, and that is the type attribute. How does the parser know what kind of script to parse it as?

 

<script type='text/javascript' src="http://code.jquery.com/jquery-latest.js"></script>

 

if this does not work, there are still a few other things that could be causing this, and I will go over them.

[vandALOT]

still doesnt work, looks like page processing somethink but nothink added to mysql

Works old fashioned way(redirect).

[searls03]

try this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#msgsending").validate({
		debug: false,

		submitHandler: function(form) {
			// do other stuff for a valid form
			$.post('postmsg.php', $("#msgsending").serialize(), function(data) {

			});
		}
	});
});
</script>

 

if this doesn't work, check the processing page.