复选框创建多个AJAX请求

Question

On my way to solve an issue about an xhr 200 status (So the request is "ok") who's in fact isn't so ok (nothing land in the db), I've found out something weird.

On chrome, I hit F12, then go to network to see all the activities and complete the form randomly. In this form there's some checkboxes, so I've checked them all to see if the values are correctly transfered.. And surprise !

The network activities showed up 6 times the same php files who's used for the request. In the 1st activity of this php file, I've been able to see this (1 for checked, 0 for unchecked) :

windows:1
shutter:0
garage:0
portal:0
door:0
blind:0

In the 2nd call :

windows:1
shutter:1
garage:0
portal:0
door:0
blind:0

Ect... To get this final data when the file is called for the 6th time, with only one click :

windows:1
shutter:1
garage:1
portal:1
door:1
blind:1

This last transfert is the one who should be done in the first place, without going through a loop.

I wonder what's going on here. If you want some code, feel free to ask. To be honest I've never seen this before.

EDIT : Here's the full script, maybe the $(':checkbox:checked').each(function(i) should be closed before the AJAX request ?

  $(function() {

    // Only if the form is submitted
    $('#estimate').on('click', function(e) {
      // To prevent the page to be reloaded on submit
      e.preventDefault();

      // Declare all variable
      var civil = $('input[name="gender"]:checked').val();
      var lastname = $('input[name="lastname"]').val();
      var firstname = $('input[name="firstname"]').val();
      var address = $('input[name="address"]').val();
      var zipcode = $('input[name="zipcode"]').val();
      var city = $('input[name="city"]').val();
      var tel = $('input[name="tel"]').val();
      var email = $('input[name="email"]').val();
      var situation = $('input[name="situation"]:checked').val();
      var place = $('input[name="place"]:checked').val();
      var message = $('#message').val();
      var selectedProject = [];

      // Set 0 to get a false boolean
      var windows = 0;
      var shutter = 0;
      var garage = 0;
      var portal = 0;
      var door = 0;
      var blind = 0;

      // At least one checkbox need to be checked
      if ( $('div.checkbox-group :checkbox:checked').length > 0 ) {
        // If the last message was displayed for an error
        $('.select').fadeOut('slow')

        // Get the value of the checked box
        $(':checkbox:checked').each(function(i) {
          selectedProject[i] = $(this).val();

          // Set 1 to get a true boolean for the checked box
          if ( selectedProject[i] == 'windows') {
            windows = 1
          }
          if ( selectedProject[i] == 'shutter') {
            shutter = 1
          }
          if ( selectedProject[i] == 'garage') {
            garage = 1
          }
          if ( selectedProject[i] == 'portal') {
            portal = 1
          }
          if ( selectedProject[i] == 'door') {
            door = 1
          }
          if ( selectedProject[i] == 'blind') {
            blind = 1
          }

          // Declare the data for the AJAX request
          data = {
            civil : civil,
            lastname : lastname,
            firstname : firstname,
            address : address,
            zipcode : zipcode,
            city : city,
            tel : tel,
            email : email,
            situation : situation,
            place : place,
            windows : windows,
            shutter : shutter,
            garage : garage,
            portal : portal,
            door : door,
            blind : blind,
            message : message,
          }

          // Beginning of the AJAX request
          $.ajax({
            url : "transfert/db_transfert.php",
            method :"POST",
            data : data,
            success : function(res){
              if ( res == "done" ) {
                $("#res").hide().html("<p style=\"color:green;\">Votre demande à était envoyée</p>").fadeIn('slow');
              } else if ( res == "missing" ) {
                $("#res").hide().html("<p style=\"color:red;\">Il manque des renseignements</p>").fadeIn('slow');
              } else {
                $("#res").hide().html("<p style=\"color:red;\">Une erreur s'est produite, recommencez ultérieurement</p>").fadeIn('slow');
              }
            }
          })
        });

      } else {
        $('.select').hide().html('<p style="color:red;">Veuillez choisir votre projet avant de continuer.</p>').fadeIn('slow');
      }

    })

  })

Answer 1

You could do the AJAX request out side the loop. But I don't think you need the loop at all. Just set the variables related to the checkboxes similarly to the way you set the other variables earlier:

var windows = $(":checkbox[value=windows]:checked").length;
var shutter = $(":checkbox[value=shutter]:checked").length;
...

Another way you could do it is to create the data object before the loop, and then update it from the checkboxes.

  data = {
    civil : civil,
    lastname : lastname,
    firstname : firstname,
    address : address,
    zipcode : zipcode,
    city : city,
    tel : tel,
    email : email,
    situation : situation,
    place : place,
    windows : 0,
    shutter : 0,
    garage : 0,
    portal : 0,
    door : 0,
    blind : 0,
    message : message,
  }


$(":checkbox:checked").each(function() {
    data[this.value] = 1;
});