error in ajax code

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>

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.

Add fail handler to Ajax call and see what you get as error

   error: function(xhr, textStatus, errorThrown){       

       } 

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.