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.