jquery form submits twice...solved

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

jquery form submits twice...solved

Post 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>";
Last edited by scarface222 on Sun Sep 27, 2009 6:32 pm, edited 1 time in total.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

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

Post 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.
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

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

Post 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);
}
}
 
?>
 
 
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

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

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

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

Post 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?
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

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

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

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

Post by kaszu »

Well, javascript works fine for me. Maybe someone else can spot the error.
scarface222
Forum Contributor
Posts: 354
Joined: Thu Mar 26, 2009 8:16 pm

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

Post 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.
mongoose643
Forum Newbie
Posts: 1
Joined: Tue Feb 23, 2010 9:22 am

Re: jquery form submits twice...solved

Post 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.
Post Reply