error in ajax code - php

Question

I am trying to implement ajax when the button is clicked, but the ajax is not wroking, can anyone tell me what's wrong, many thanks! what I want is that when click the "Move marked to set" button, in the "formstatus" div should display some message I defined in the addtoset.php, but currently it direct to to "#"page instead of remain on the same page
here is my ajax code
$('#movetoset').click(function() {
var fail="";
var hint="";
if ($('#selectsett').val() === 'General') {
fail += "Please chooose a set.\n";
}
for(j=0;j< array_str_idnum.length;j++)
{
if( document.getElementById('check' + array_str_idnum[j]).checked ==false){
hint='1';
}
}
if(hint=="1"){
fail += "Please check all the box.\n";
}
if(fail == ""){
var str = $("#complicated").serialize();
$.ajax({
type: "POST",
url: "addtoset.php",
data: str,
cache: false,
success: function(msg)
{
$("#formstatus").ajaxComplete(function(){
$(this).fadeIn("slow").html(msg)
});
}
});
return true;
}else{
alert(fail);
return false;
}
});
here is my html code
<form id ="complicated" method = 'post' action = '#'>
<div class="fancybuttonwrapper" style="margin-left:480px;"><span class="button"><span>
<input type="submit" class="form_button" id="movetoset" value=" Move Marked to Set"></span></span> </div>
<select name="sets" id ="selectsett">
<option value="General">Select Set</option>
<option value="Ceremony">Ceremony</option>
<option value="Lunch">Lunch</option>
<option value="Garden">Garden</option>
<option value="Longname">This is max length</option>
</select>
</div>
<div id="formstatus"></div>
</form>

Answer 1

your array array_str_idnum is not defined.
Further, you have to return false, else your form gets posted and so no ajax call at all.
Try this script. (always return false when you are in a form, else it gets send)
$('#movetoset').click(function() {
console.log("here")
var fail = "";
var hint = "";
if ($('#selectsett').val() === 'General') {
fail += "Please chooose a set.\n";
}
var str = $("#complicated").serialize();
$.ajax({
type: "POST",
url: "addtoset.php",
data: str,
cache: false,
success: function(msg) {
$("#formstatus").ajaxComplete(function() {
$(this).fadeIn("slow").html(msg)
});
}
});
return false;
});
check out: http://jsfiddle.net/wRNQv/5/ there is a running version.

Answer 2

Add fail handler to Ajax call and see what you get as error
error: function(xhr, textStatus, errorThrown){
}

Answer 3

The problem is you do not prevent the default action from executing. So the request may be started, but the page immediately redirects to different URL (defined in form's action).
Change the following part of the code:
$('#movetoset').click(function() {
var fail="";
into the following:
$('#movetoset').click(function(event) {
event.preventDefault(); // prevent form from submitting
var fail="";
It should help. Please let me know if it did.