jQuery price calculation with conditions-CodePudding

I'm completely new to programming, so I apologize in advance.

I am trying to create a contact form on the website, which will also include a price calculation. The price will depend on the selected country and the number of "classes" that the user chooses.

Example: If the user chooses the European Union and at the same time chooses 1 class, the price will be €1100, if he chooses 2 classes, the price will be €1150, if he chooses 3 classes, the price will be €1400, and if he chooses 4 or more classes, the price will be 200€ for each class.

I tried using jQuery to get the number of selected classes (I succeeded) and then set the price through the "if" condition. The problem is that the "setPrice" function does not respond to the change in the number of classes via the "countSelectedItems" function. However, if I change the number of classes manually, the "setPrice" function works.

Please advise me where I am doing wrong?

$("#form-field-classes").change(function() {
  countSelectedItems();
}).change();

function countSelectedItems() {
  var count = $("#form-field-classes :selected").length;
  //console.log(count);
 parseInt($("#form-field-count").val(count));}
 
$("#form-field-count").change(function() {setPrice();
}).change();

function setPrice()
{
    if($("#form-field-count").val() === 1){
        $("#result").text("1100");
    }}

<select name="form_fields[classes][]" id="form-field-classes" type="select" multiple="" data-options='["Class 1","Class 2","Class 3","Class 4","Class 5","Class 6"]'  placeholder = Choose... >
<option value="Class 1">Class 1</option>
<option value="Class 2">Class 2</option>
<option value="Class 3">Class 3</option>
<option value="Class 4">Class 4</option>
<option value="Class 5">Class 5</option>
<option value="Class 6">Class 6</option>
        
<input type="number" name="form_fields[count]" id="form-field-count">

<br /> Total: &euro; <span id="result"></span>

CodePudding user response：

Hope the following code may work.

HTML:

<select name="form_fields[classes][]" id="form-field-classes" type="select" multiple="" data-options='["Class 1","Class 2","Class 3","Class 4","Class 5","Class 6"]'  placeholder = Choose... >
<option value="1">Class 1</option>
<option value="2">Class 2</option>
<option value="3">Class 3</option>
<option value="4">Class 4</option>
<option value="5">Class 5</option>
<option value="6">Class 6</option>
 <option value="7">Class 6</option>       
<input type="number" name="form_fields[count]" id="form-field-count">

<br /> Total: &euro; <span id="result">0</span>

JQuery:

$("#form-field-classes").change(function() {
  countSelectedItems();
}).change();

function countSelectedItems() {
  var count = $("#form-field-classes :selected").val();
    parseInt($("#form-field-count").val(count));
    setPrice();

}


function setPrice()
{
   if($("#form-field-count").val() === "1"){
        $("#result").text("1100");
    }
    else if($("#form-field-count").val() === "2"){
            $("#result").text("1150");
        }
    else if($("#form-field-count").val() === "3"){
            $("#result").text("1400");
        }
    
    else {
          let result;
          let selectedPrice = $("#form-field-count").val();
          resultedPRice = ( selectedPrice * 100  )   ((selectedPrice * 100  ) -200 )   1000;
          $("#result").text(resultedPRice);
        }
}