javascript calculating combined values from html select and radio inputs

March 3, 2023

everyone, I have run into a similar problem as before, this time, however, I am trying to calculate price based on a combined data calculation:

a select input + a radio input (one of three) of a form. The result must be visible as the value of a input type="number".

I tried using the very function you suggested for my previous issue but this time, this does not solve my problem. Can you please help me again?

HTML

<form action="" method="post" id="regForm" >
<select id="st" name="st" form="regForm"  required >
      <option value="" disabled selected>Select period...</option>  
      <option value="1">1 DAY</option>
      <option value="2.9">3 DAYS</option>
      <option value="5" >7 DAYS</option>
      <option value="18" >30 DAYS</option>
</select>
<div class="buttonFrame">
    <h4>Select a version</h4>
<input type="radio" name="plan" class="planBtn" id="planBtn1" value="0" required />
    <label for="planBtn1"><h5><center>FREE</center></h5>
    </label>
<input type="radio" name="plan" class="planBtn" id="planBtn2" value="90" required />
    <label for="planBtn2"><h5><center>BASIC</center></h5>
    </label>
<input type="radio" name="plan" class="planBtn" id="planBtn3" value="120" required />
    <label for="planBtn3"><h5><center>STANDARD</center></h5>
    </label>
</div>
<label for="price"><text>YOUR PRICE: </text>
    <input type="number" id="regPrice" name="price" form="regForm" readonly value="getTotal()" />
    <text> EUR</text>
</label>
<input type="submit" name="submit" id="submit" value="SUBMIT" />
</form>

JAVASCRIPT

const a1 = document.getElementById("st");

const regPrice = document.getElementById("regPrice");

[a1].forEach(field=> field.addEventListener('change', getTotal));


function getTotal() {
if (document.getElementById('planBtn1').checked) {
    var e1 = parseInt(a1.options[a1.selectedIndex].value);
    var e2 = 0;
    try{
    regPrice = e1*e2;
    }
    catch(e){
      console.log(e.message);
    }
}

else if (document.getElementById('planBtn2').checked) {
  var e1 = parseInt(a1.options[a1.selectedIndex].value);
  var e2 = 90;
  try{
  regPrice = e1*e2;
  }
  catch(e){
    console.log(e.message);
  }
}

else if (document.getElementById('planBtn3').checked) {
  var e1 = parseInt(a1.options[a1.selectedIndex].value);
  var e2 = 120;
  try{
  regPrice = e1*e2;
  }
  catch(e){
    console.log(e.message);
  }
}
}

I have tried using array() but couldn’t get it to work. Looking forward to your ideas. TIA.

First, I simply copied the one javascript function I had from my previous question but that did nothing for me because here I combine two different input types.

Next, I fiddled with the given formula and tried to alter it.

Finally, I found some other possibilities out there (not on stackoverflow) and tried those by changing the names of individual factors but without success.

I would be grateful for your ideas. The simpler, the better.

>Solution :

first you should add all the elements in the [a1].forEach and you’re assiging the sum to the variable that is assigned from the DOM element, not the elements’s value, so you need to do regPrice.value

const a1 = document.getElementById("st");
const p1 = document.getElementById("planBtn1");
const p2 = document.getElementById("planBtn2");
const p3 = document.getElementById("planBtn3");

const regPrice = document.getElementById("regPrice");

[a1, p1, p2, p3].forEach(field=> field.addEventListener('change', getTotal));


function getTotal() {
if (document.getElementById('planBtn1').checked) {
    var e1 = parseInt(a1.options[a1.selectedIndex].value);
    var e2 = 0;
    try{
    regPrice.value = e1*e2;
    }
    catch(e){
      console.log(e.message);
    }
}

else if (document.getElementById('planBtn2').checked) {
  var e1 = parseInt(a1.options[a1.selectedIndex].value);
  var e2 = 90;
  try{
  regPrice.value = e1*e2;
  }
  catch(e){
    console.log(e.message);
  }
}

else if (document.getElementById('planBtn3').checked) {
  var e1 = parseInt(a1.options[a1.selectedIndex].value);
  var e2 = 120;
  try{
  regPrice.value = e1*e2;
  }
  catch(e){
    console.log(e.message);
  }
}
}

<form action="" method="post" id="regForm" >
<select id="st" name="st" form="regForm"  required >
      <option value="" disabled selected>Select period...</option>  
      <option value="1">1 DAY</option>
      <option value="2.9">3 DAYS</option>
      <option value="5" >7 DAYS</option>
      <option value="18" >30 DAYS</option>
</select>
<div class="buttonFrame">
    <h4>Select a version</h4>
<input type="radio" name="plan" class="planBtn" id="planBtn1" value="0" required />
    <label for="planBtn1"><h5><center>FREE</center></h5>
    </label>
<input type="radio" name="plan" class="planBtn" id="planBtn2" value="90" required />
    <label for="planBtn2"><h5><center>BASIC</center></h5>
    </label>
<input type="radio" name="plan" class="planBtn" id="planBtn3" value="120" required />
    <label for="planBtn3"><h5><center>STANDARD</center></h5>
    </label>
</div>
<label for="price"><text>YOUR PRICE: </text>
    <input type="number" id="regPrice" name="price" form="regForm" readonly value="getTotal()" />
    <text> EUR</text>
</label>
<input type="submit" name="submit" id="submit" value="SUBMIT" />
</form>