Ensure Multiple Select Element Has Non Empty Option Selected

I have a dropdown where the default selected option has a value of empty. After clicking the submit button the save() function is called where if any of the selects have 'empty' ch

Solution 1:

First of all, You need to change from PUT to POST have a look Here

Second, you needn't go to the server with every valid select but what you should do is collect your data and then if all valid go do ajax request so your function should look like this:

functionsave() {

  let order = [];
  //as you have many selects you need this flag to cancel ajax 
    request if any select is empyt
  let isEmpty = false;
  $('select[name="statusSelect[]"]').each(function() {
    let id = this[this.selectedIndex].id;
    let value = this.value;
    debugger;
    // if any of the selects values === 'empty' break the each//and set the flag to beak the ajax requestif (value === 'empty') {
      console.log("empty");
      $(".alertEmptySelect").show();
      isEmpty = true;
      return;
    }
    // order array must be in the each loop to carry all the data
    order.push({
      id: id,
      status: value
    });

  });
  if (isEmpty) {
    console.log("save canceled");
    return;
  }
  let data = JSON.stringify(order);
  console.log(data);
  //should be outside the each to go only one time to the sever (make sure to put the Url)
  $.ajax({
    method: 'post',
    url: 'your Url',
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    success: function(response) {
      console.log('success.');
      $(".alertSubmitted").show("slow");
    },
    error: function(data) {
      console.log('error');
      console.log(data);
      let errorString = '';
      $.each(data.responseJSON, function(key, value) {
        errorString += '<li>' + value + '</li>';
      });
      $('.alertError').show().html(errorString);
    }
  });
}

Solution 2:

It seems like you are simply forgetting to close your empty value condition:

functionsave() {
  let order = [];

  $('select[name="statusSelect[]"]').each(function() {
    let id = this[this.selectedIndex].id;
    let value = this.value;

    // if any of the selects values === 'empty' break if (value === 'empty') {
      console.log("empty");
      $(".alertEmptySelect").show();
      return;
    }

    // else continue if all selects have a value 
    order.push({id: id, status: value});
    let data = JSON.stringify(order);

    $.ajax({
      method: 'put',
      url: '',
      data:  data,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async: false,
      success: function(response){
        $(".alertSubmitted").show("slow");
      },
      error: function (data) {
        console.log(data);
        let errorString = '';
        $.each(data.responseJSON, function (key, value) {
            errorString += '<li>' + value + '</li>';
        });
        $('.alertError').show().html(errorString);
      }
    });
  });
}

Solution 3:

Agree with @twmulloy, curly braces issue.

Validate no empty selection on all dropdowns:

// all dropdownsvar allDropdowns = $('select[name="statusSelect[]"]');

  // empty selected optionsvar emptySelectedOptions = allDropdowns.find('[value=empty]:selected');

  // flag if validvar isValid = (emptySelectedOptions.length === 0);

    if (!isValid){
    // exitalert('Please select option from all!');
    return;
  }

Reuse list of all dropdowns to iterate through each dropdowns: allDropdowns.each

JsFiddle and overall code for save function:

functionsave() {

  let order = [];

    // all dropdownsvar allDropdowns = $('select[name="statusSelect[]"]'),

    // empty selected options
    emptySelectedOptions = allDropdowns.find('[value=empty]:selected'),

    // flag if valid
    isValid = (emptySelectedOptions.length === 0);

 if (!isValid){
    // exitalert('Please select option from all!');
    return;
  }

  allDropdowns.each(function() {
    let id = this[this.selectedIndex].id;
    let value = this.value;

    alert('Saving...');

    // else continue if all selects have a value 
    order.push({
      id: id,
      status: value
    });
    let data = JSON.stringify(order);

    $.ajax({
      method: 'put',
      url: '',
      data: data,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async: false,
      success: function(response) {
        $(".alertSubmitted").show("slow");
      },
      error: function(data) {
        console.log(data);
        let errorString = '';
        $.each(data.responseJSON, function(key, value) {
          errorString += '<li>' + value + '</li>';
        });
        $('.alertError').show().html(errorString);
      }
    });
  });
}