select option based on all values in an input

Question

I have a simple reservation form. In this form, I have two input box and I change number of each room based on value of input hidden with class name "rooms", moreover there is another input that shows

numbers like this: 1 ,8*1 ,11

the first digit shows a count of person and the second digit after comma shows the age of that person in the first room.

I separated first and second rooms with a star between them. the digits after star shows count and age of each person in the second room as well.

my question is how can I use these digits for selecting my select boxes?

for example, I want to use the first digit for select box child. if that number was 1. i would choose 1 in first room for my child . also second number for age of first child in my first room and etc.

I wrote the below code with function fillchild but it does not work .

here is my snippet :

$(document).ready(function() {
  $('#rooms').val($('.rooms').val());
  $('#rooms').change()
})

$("#rooms").change(function() {

  countRoom = $(this).val();

  $(".numberTravelers").empty()
  for (i = 1; i <= countRoom; i++) {
    $(".numberTravelers").css("width", "100%").append('room' + i + '
child
')

  }
});

function childAge(a) {
  $(a).each(function() {
    age = $(a).val();

    $(a).closest(".countRoom").find(".selectAge").empty();
    for (var j = 1; j <= age; j++) {
      $(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('child age' + j + '');
    }
    fillchild();
  });
}

function fillchild() {
  var childCounts = $('.childage').val().split(',');
  var ageCounts = $('.childage').val().split('*');
  childCounts.forEach((childage, index) => {
    var selectname = '_root.rooms__' + (index + 1) + '.childcountandage';
    var selectElement = $('input[name="' + selectname + '"]');
    if (selectElement.length > 0) {
      $(selectElement).val(childage);
    }

  })
}

.numberOfRooms {
  border: 1px solid red;
}

.childage {
  background: #ccc;
}

Ankit Agarwal · Accepted Answer

I have made it dynamic so that it still works for 2 child with age 3 and 4. You can see that example below.

$(document).ready(function() {
  $('#rooms').val($('.rooms').val());
  $('#rooms').change()
})

$("#rooms").change(function() {

  countRoom = $(this).val();

  $(".numberTravelers").empty()
  for (i = 1; i <= countRoom; i++) {
    $(".numberTravelers").css("width", "100%").append('room' + i + '
child
')

  }
  fillchild();
});

var ageGlobal ='';
function childAge(a) {
  $(a).each(function() {
    age = $(a).val();
    ageGlobal = ageGlobal.split(',');
    $(a).closest(".countRoom").find(".selectAge").empty();
    for (var j = 1; j <= age; j++) {
      $(a).closest(".countRoom").css("width", "100%").find(".selectAge").append('child age' + j + '');
      var ageVal = ageGlobal[j-1] || "1";
      //set the value of age dropdown
      $(a).closest(".countRoom")
      .find("select[name='childage']:eq("+(j-1)+")")
      .val(ageVal);
    }
  });
  //reset ageGlobal so that it works when child is changed
  ageGlobal = "1";
}

function fillchild() {
  var roomChildAge = $('.childage').val().split('*');
  roomChildAge.forEach((childAge, index) => {
   //find the child dropdown for the room
    var childElement = $($('.countRoom')[index]).find('.childcount');
    //element for child exist
    if (childElement.length > 0) {
      //get the child and age values using substring
      var childCount;
      //when there is no child and its age
      if(childAge.trim()==="0"){
         childCount = "0";  
         ageGlobal ='';
      }else{
         childCount = childAge.substring(0, childAge.indexOf(','));
         ageGlobal = childAge.substring(childAge.indexOf(',')+1, childAge.length);
      }
      $(childElement).val(childCount.trim());
      //trigger change eveny so that age select box is pre-selected
      $(childElement).trigger('change');
    }

  })
}

.numberOfRooms {
  border: 1px solid red;
}

.childage {
  background: #ccc;
}

select option based on all values in an input

Answers (1)

Related Questions