Page 1 of 1

jquery form submits twice...solved

Posted: Sun Sep 27, 2009 12:58 pm
by scarface222
Hey guys I have a page where the user can write messages to their friend. I have it set up so there is a list of the friends and when the user clicks on one of the names it opens a jquery window with a unique id form. This means there is a unique form, window, and open window function for each name. The form submits through jquery post however it submits twice and I am not sure why. If anyone knows please help me learn what I've done wrong.

Code: Select all

 
//this is the link to open the unique window
 
echo "<p><a id=\"$to\">$to</a>";
 
//this is the unique div dialog window
 
echo "<div id=\"message$to\">
 
 
//this is the unique form
 
  <form id=\"submit$to\" method=\"POST\" >
<input type=\"hidden\" id=\"from$to\" name=\"from$to\" maxlength=\"255\" value=\"$USER_ID\">
    
  <input type=\"hidden\" name=\"to$to\" id=\"to$to\" value=\"$to\" maxlength=\"255\" >
   
  Subject<input type=\"text\" name=\"subject$to\" maxlength=\"255\" id=\"subject$to\">
   
   Message<textarea name=\"message$to\" id=\"message$to\" cols=\"75\" rows=\"15\"></textarea>
   
   <input id=\"submit$to\" type=\"submit\" value=\"Send\"> 
   </form>
 
//this is the unique jquery function to open the dialog window
 
 <script type=\"text/javascript\">
    $.ui.dialog.defaults.bgiframe = true;
    $(function() {
        $(\"#message$to\").dialog({hide: 'clip', modal: true
,width: 600,height: 350,position: 'center',
                            show: 'clip',stack: true,title: '$to', minHeight: 25,
                            minWidth: 100, autoOpen: false});
                            
                            $('#$to').click(function() {
            $('#message$to').dialog('open');
        })
        .hover(
            function(){ 
                $(this).addClass(\"ui-state-hover\"); 
            },
            function(){ 
                $(this).removeClass(\"ui-state-hover\"); 
            }
        ).mousedown(function(){
            $(this).addClass(\"ui-state-active\"); 
        })
        .mouseup(function(){
                $(this).removeClass(\"ui-state-active\");
        });
 
    });
 
       
    </script>
    
//finally this is the jquery post function to submit the form to a seperate page
 
<script type=\"text/javascript\">
$(document).ready(function(){
    $(\"form#submit$to\").submit(function() {
 
    // we want to store the values from the form input box, then send via ajax below
    
     var to    = $('#to$to').attr('value');
     var from    = $('#from$to').attr('value');
     var subject    = $('#subject$to').attr('value');
     var message    = $('#message$to').attr('value');
 
 
        $.ajax({
            type: \"POST\",
            url: \"messageprocess.php\",
            data: 'to='+ to + '&from=' + from + '&subject=' + subject + '&message=' + message,
            success: function(response) {
if(response == \"OK\") {
 $('form#submit$to').html(\"<div id='message'></div>\");
        $('#message').html(\"<h2>Email has been sent!</h2>\")
        .append(\"<p>Please Wait...</p>\")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append(\"<img id='checkmark' src='images/check.png' />\");
        });
                
                
} else {
alert(response);
}
}
        });
    return false;
    });
});
</script>
</div>";

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 1:54 pm
by kaszu
Works for me as excepted. Form is sent only once.
Maybe there is some problem with $.ui.dialog, but it's not likely.

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 2:12 pm
by scarface222
could it be a cause of the processing page? It processes twice, so two entries go into the database. How can you be sure its not the javascript? I will examine further. Thanks for the response bro.

this is the page in case you know php

Code: Select all

<?php
 
 
include("includes/connection.php");
 
if (isset($_POST['from']))
{
$to=$_POST['to'];
$from=$_POST['from'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$date=date("Ymd");
//seconds
 
$friend_check="SELECT * FROM friendships
INNER JOIN users
ON users.id = friendships.friend_id
WHERE users.username = '$from'";
$friend_result=mysql_query($friend_check) or die('Error, check query failed');
$count = mysql_num_rows($friend_result);
    
if (!$count>=1){
    print 'You and this user are not friends';
return;
}
else{
$friend_check="SELECT * FROM friendships
INNER JOIN users
ON users.id = friendships.friend_id
WHERE users.username = '$to'";
$friend_result=mysql_query($friend_check) or die('Error, check query failed');
$count = mysql_num_rows($friend_result);
}
if (!$count>=1){
    print 'You and this user are not friends';
return;
}
else{
    print "$to";
$query= "INSERT into messages VALUES ('', '$to', '$subject', '$message', '$from', '$date')";
$query1=mysql_query($query);
}
}
 
?>
 
 

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 2:54 pm
by scarface222
Not sure how you tested it but IT Has to be the javascript. The processing is fine and I tried using it by itself.

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 3:05 pm
by kaszu
Not sure how you tested it
I copied your code into page, added <head> and jQuery, removed dialog and submited form. Firebug showed only 1 request to the server.

How you tested that it's sent twice?

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 3:14 pm
by scarface222
Well I have 3 friends added as a test so 3 names show up. I open one up and hit send. On my processing page when it prints $to when inserting into database, the message pops up twice and is inserted twice into database. Then when I tried deleting the jquery post script, it only submit once because it only went once into the database.

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 3:54 pm
by kaszu
Well, javascript works fine for me. Maybe someone else can spot the error.

Re: jquery form submits twice...need expert advice

Posted: Sun Sep 27, 2009 6:19 pm
by scarface222
I moved the div because the end </div> tag was too far extended and included too much other than the form. Didn't know that could have that effect, I just included both jquery functions within the div so when I put just the form in it worked. Thanks for your help anyway man appreciate it.

Re: jquery form submits twice...solved

Posted: Tue Feb 23, 2010 9:29 am
by mongoose643
Just to clarify why his solution worked.

I had the same error in a form I was trying to submit via ajax. This form was shown inside of a jQuery UI Dialog.

In my code I had the javascript inside the div element that was used to create the dialog. Apparently, when jQuery UI created the dialog from that div, it ran the javascript code a second time, thus attaching the same event handler twice.

There are two ways to solve this:

1. Move your javascript block outside the div element that is used to create the dialog.
2. Load the dialog's content (including the javascript) via Ajax after you have already initialized the dialog.