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.
//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.
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.
<?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);
}
}
?>
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.
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.
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.