jquery form submits twice...solved
Posted: Sun Sep 27, 2009 12:58 pm
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>";