How to undo a javascript command after unchecking the checkbox?

Question

I am trying to write a program that calculates the price of being at the garage, but I don't know how to cancel the function after I unchecking the checkbox. here's my code:

function Car() {
  var value = 0;
  var PrivateCar = document.getElementById("PrivateCar").value;
  var CommercialCar = document.getElementById("CommercialCar").value;
  var Truck = document.getElementById("Truck").value;
  var ScentTree = document.getElementById("ScentTree").value;
  var PrivateCarWax = document.getElementById("PrivateCarWax").value;
  var CommercialCarWax = document.getElementById("CommercialCarWax").value;
  if (document.form1.PrivateCar.checked == true) {
    document.getElementById("Car").innerHTML = "You have a private car." + "<br />";
    value += 30;
  }
  if (document.form1.CommercialCar.checked == true) {
    document.getElementById("Car").innerHTML = "You have a commercial car" + "<br />";
    value += 45;
  }
  if (document.form1.Truck.checked == true) {
    document.getElementById("Car").innerHTML = "You have a truck" + "<br />";
    value += 60;
  }
  if (document.form1.ScentTree.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of a scent tree" + "<br />";
    value += 5;
  }
  if (document.form1.PrivateCarWax.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
    value += 10;
  }
  if (document.form1.CommercialCarWax.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
    value += 20;
  }
  document.getElementById("price").innerHTML = "The price you have to pay is: " + value + " dollars";
}

<body dir="rtl">
  <form name="form1">
    <h1 style="color:red">Car Washing Price List</h1>
    <br />
    <b>Car Type:</b>
    <br />
    <input type="radio" id="PrivateCar" name="CarType" /> Private Car - 30 dollars
    <br />
    <input type="radio" id="CommercialCar" name="CarType" /> Commercial Car - 45 dollars
    <br />
    <input type="radio" id="Truck" name="CarType" /> Truck - 60 dollars
    <br />
    <br />
    <b>Extras:</b>
    <br />
    <input type="checkbox" id="ScentTree" /> Scent tree - 5 dollars
    <br />
    <input type="checkbox" id="PrivateCarWax" /> Wax for private car - 10 dollars
    <br />
    <input type="checkbox" id="CommercialCarWax" /> Wax for commercial car - 20 dollars
    <br />
    <input type="checkbox" id="TruckWax" disabled /> Wax for truck - You can't choose wax for a truck
    <br />
    <br />
    <input type="button" id="button" value="Click to get a price" onclick="Car()" />
    <p id="Car"></p>
    <p id="Extras"></p>
    <p id="price"></p>
  </form>

I am trying to:

Disable the "CommercialCarWax" checkbox after clicking "PrivateCar" radio button.
Disable the "PrivateCarWax" checkbox after clicking "CommercialCar" radio button.
Disable the "CommercialCarWax" checkbox and the "PrivateCarWax" checkbox after clicking "Truck" radio button.

Just run the `Car` method on change of the radio buttons.... Also `Car` would indicated a class/constructors, not a function. Casing has meaning. — epascarello, Mar 17 '21 at 13:48
You're looking for [event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventListener). Basically you set up a `change` event listener on the radio buttons, and then trigger a function to enable/disable checkboxes based on the new radio value. — WOUNDEDStevenJones, Mar 17 '21 at 13:48
Does this answer your question? [How to use radio on change event?](https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event) — WOUNDEDStevenJones, Mar 17 '21 at 13:49

Dhara · Accepted Answer · 2021-03-17T14:10:18.873

0

You need to check your condition while handling radio button changes event. Just play around your condition here.

    var radioBtn = document.form1.CarType
for (var i = 0; i < radioBtn.length; i++) {
    radioBtn[i].addEventListener('change', function() {
        if(this.id == "PrivateCar") { disabledBox(false,true) }
else if(this.id == "CommercialCar") { disabledBox(true,false) }
    else if(this.id == "Truck") { disabledBox(true,true) }    
    });
}
function disabledBox(val1, val2) { 
document.getElementById("PrivateCarWax").disabled = val1;
document.getElementById("CommercialCarWax").disabled = val2;
}

Here is the approach to do your requirement:

function Car() {
  var value = 0;
  var PrivateCar = document.getElementById("PrivateCar").value;
  var CommercialCar = document.getElementById("CommercialCar").value;
  var Truck = document.getElementById("Truck").value;
  var ScentTree = document.getElementById("ScentTree").value;
  var PrivateCarWax = document.getElementById("PrivateCarWax").value;
  var CommercialCarWax = document.getElementById("CommercialCarWax").value;



  if (document.form1.PrivateCar.checked == true) {
    document.getElementById("Car").innerHTML = "You have a private car." + "<br />";
    value += 30;
  }
  if (document.form1.CommercialCar.checked == true) {
    document.getElementById("Car").innerHTML = "You have a commercial car" + "<br />";
    value += 45;
  }
  if (document.form1.Truck.checked == true) {
    document.getElementById("Car").innerHTML = "You have a truck" + "<br />";
    value += 60;
  }
  if (document.form1.ScentTree.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of a scent tree" + "<br />";
    value += 5;
  }
  if (document.form1.PrivateCarWax.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
    value += 10;
  }
  if (document.form1.CommercialCarWax.checked == true) {
    document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
    value += 20;
  }
  document.getElementById("price").innerHTML = "The price you have to pay is: " + value + " dollars";
}
var radioBtn = document.form1.CarType
for (var i = 0; i < radioBtn.length; i++) {
    radioBtn[i].addEventListener('change', function() {
        if(this.id == "PrivateCar") { disabledBox(false,true) }
else if(this.id == "CommercialCar") { disabledBox(true,false) }
    else if(this.id == "Truck") { disabledBox(true,true) }    
    });
}
function disabledBox(val1, val2) { 
document.getElementById("PrivateCarWax").disabled = val1;
document.getElementById("CommercialCarWax").disabled = val2;
}

<body dir="rtl">
  <form name="form1">
    <h1 style="color:red">Car Washing Price List</h1>
    <br />
    <b>Car Type:</b>
    <br />
    <input type="radio" id="PrivateCar" name="CarType" /> Private Car - 30 dollars
    <br />
    <input type="radio" id="CommercialCar" name="CarType" /> Commercial Car - 45 dollars
    <br />
    <input type="radio" id="Truck" name="CarType" /> Truck - 60 dollars
    <br />
    <br />
    <b>Extras:</b>
    <br />
    <input type="checkbox" id="ScentTree" /> Scent tree - 5 dollars
    <br />
    <input type="checkbox" id="PrivateCarWax" /> Wax for private car - 10 dollars
    <br />
    <input type="checkbox" id="CommercialCarWax" /> Wax for commercial car - 20 dollars
    <br />
    <input type="checkbox" id="TruckWax" disabled /> Wax for truck - You can't choose wax for a truck
    <br />
    <br />
    <input type="button" id="button" value="Click to get a price" onclick="Car()" />
    <p id="Car"></p>
    <p id="Extras"></p>
    <p id="price"></p>
  </form>

edited Mar 17 '21 at 14:10

answered Mar 17 '21 at 14:04

Dhara

1,914
2
18
37

For some reason, I see that it's good when I run from Stack Overflow, but when I run it from Visual Studio the code does not work. I don't think it's related to Visual Studio but it's very strange... – Daniel Mar 17 '21 at 15:26
what issue do you get while running in VS? I tried this as a simple html form as well. its working. In your case, it might be your code that cause the problem? – Dhara Mar 17 '21 at 16:38
I don't get any issue, it's just doesn't working when I try to run it. – Daniel Mar 17 '21 at 17:22
Can you confirm if whole page has unique id? this might be the reason it doesn't work. In console, write query like `document.querySelectorAll('yourradiobutton/classname')`. – Dhara Mar 17 '21 at 17:24
It opens the site but if I choose "PrivateCar" for example it allows me to choose "CommercialCarwax" and vice versa. – Daniel Mar 17 '21 at 17:25
Yes then you might have issue of duplicate id in the page. can you check if you unique id of all those radio and checkbox? – Dhara Mar 17 '21 at 17:28
Yes, I have unique id for every single radio button and checkbox – Daniel Mar 17 '21 at 17:36
can you put a debugger in disbledBox and check wether it is picking up a right checkbox and add a disable attribute? – Dhara Mar 17 '21 at 17:37
Do you mean that I need just to give the same name for all the radio buttons and the checkboxes? – Daniel Mar 17 '21 at 17:42
Same name for all radio button is necessary. no needed name of checkboxes. only Unique id required for all radio and checkbox. what I am suggesting you to check is: put a `debugger;` in `disabledBox()` and check if it adds a disable attribute to checkbox or not – Dhara Mar 17 '21 at 17:45
instead of ```disabledBox(true, false)``` put a ```disabledBox(decugger;)``` ? – Daniel Mar 17 '21 at 17:59
or like this: ```debugger(disabledBox(true, false));```? – Daniel Mar 17 '21 at 18:02
function disabledBox(val1, val2) { document.getElementById("PrivateCarWax").disabled = val1; document.getElementById("CommercialCarWax").disabled = val2; debugger; } reload the page and check in console. you will see your broswer pause when you select the radio button. here you check if it is working on correct checkbox – Dhara Mar 17 '21 at 18:03
The browser didn't pause... It didn't do anything. – Daniel Mar 17 '21 at 18:09
I tried to do this: ```function DisableCommercialCarWax() { document.getElementById("CommercialCarWax").disabled == true; }``` and then this: `````` Maybe it's good? – Daniel Mar 17 '21 at 18:14
document.getElementById("CommercialCarWax").disabled == true; should be document.getElementById("CommercialCarWax").disabled = true;. the way I created was generic way, you can add and remove easily in it. The approach you are following is also ok. It will work – Dhara Mar 17 '21 at 18:15
It worked, thank you very much! But now if I choose for example CommercialCar and then PrivateCar I can't choose PrivateCarWax. How to change it? – Daniel Mar 17 '21 at 18:29
You need to set it disabled = false when you click on other radio button – Dhara Mar 17 '21 at 18:32
Also, just want to check : can you confirm your form name is `form1` and radiobutton name is 'CarType'? – Dhara Mar 17 '21 at 18:34
If above code is working, I believe you don't have form name / radio button name same as you mentioned in the question. so you can check that and the approach I provided will solve your all issues. – Dhara Mar 17 '21 at 19:00
Yes, my form name is ```form1```and the radio buttons is ```CarType``` – Daniel Mar 17 '21 at 19:06
then last thing which comes in my mind is, it doesn't bind change event on radio button. that means you need to write this code where it can be reachable on event change might be in document.ready function() ? – Dhara Mar 17 '21 at 19:08
Should it be like that: – Daniel Mar 17 '21 at 19:09
if (document.getElementById("CommercialCarWax").disabled = true && document.getElementById("PrivateCar").checked == true) { document.getElementById("CommercialCarWax").disabled = false; } – Daniel Mar 17 '21 at 19:09
if (document.getElementById("PrivateCarWax").disabled = true && document.getElementById("CommercialCar").checked == true) { document.getElementById("PrivateCarWax").disabled = false; } – Daniel Mar 17 '21 at 19:09
if (document.getElementById("PrivateCarWax").disabled = true && document.getElementById("CommercialCarWax").disabled == true && document.getElementById("PrivateCar").checked == true) { document.getElementById("CommercialCarWax").disabled = false; document.getElementById("PrivateCarWax").disabled = false; } – Daniel Mar 17 '21 at 19:10
honestly saying, this approach is not good. but to make it work you have wrong condition, if(document.getElementById("PrivateCarWax").disabled = true should be document.getElementById("PrivateCarWax").disabled == true in every scenario. many things to correct. hold on! – Dhara Mar 17 '21 at 19:11
doesn't matter, I already found a way to do it, thanks for all the support!!! – Daniel Mar 17 '21 at 19:19
I did it in a function and also put it in the ```onclick``` of every radio button, like this (for example): ```function EnablePrivateCar() { document.getElementById("PrivateCarWax").disabled = false; document.getElementById("CommercialCarWax").checked = false; }``` and then in the radio button: `````` – Daniel Mar 17 '21 at 19:21
There is a problem with your code: when I click on the Truck it doesn't turn off the other checkboxes. Anyway I already found another way, I wrote it in the last message ↑ – Daniel Mar 17 '21 at 19:29
I haven't written all the condition. you probably require to add that just like other condition I have mentioned. – Dhara Mar 17 '21 at 19:30

KooiInc · Answer 2 · 2021-03-17T14:58:03.627

Well, where to start?

It is generally not a good idea to use inline event handlers.

Furthermore, if you add data-attributes to your input elements for the price, it's easier to calculate the total price.

It's way easier to use css-selectors to query the DOM-elements

Finally, you can add one event listener to the document to handle different events. This is called event delegation.

With the previous in mind, I've rewritten your snippet (edited the html and shortened it a bit too). Bonus: it will calculate the price every time some choice is made.

You should be able to figure out how to conditionally disable radiobuttons or checkboxes (hint: setAttribute('disabled', 'disabled')).

document.addEventListener("click", handle);

function handle(evt) {
  if (evt.target.id === "button" || 
      evt.target.type === "radio" || 
      evt.target.type === "checkbox") {
  // Note: the calculation will also be triggered if 
  // one of the radio buttons or checkboxes is clicked
  // so you may consider ditching the button
    getPrice(evt.target);
  }
}

function getPrice(origin) {
  let checkedRadio;
  
  if (origin.type === "radio") {
    checkedRadio = origin;
  } else {
    checkedRadio = document.querySelector("input[type='radio']:checked");
  }
  
  const checkedCheckboxes = document.querySelectorAll("input[type='checkbox']:checked");

  if (!checkedRadio) {
    return alert("Please select a Car Type");
  }
  
  let total = +checkedRadio.dataset.price;
  checkedCheckboxes
    .forEach(cb => total += +cb.dataset.price);
  document.querySelector("#price").textContent = `Your price: $${total}`;
}

<form name="form1">
  <h1 style="color:red">Car Washing Price List</h1>
  <div>
    <h3>Car Type:</h3>
    <input type="radio" id="PrivateCar" name="CarType" data-price="30" /> Private Car - 30 dollars
    <div>
      <input type="radio" id="CommercialCar" name="CarType" data-price="45" /> Commercial Car - 45 dollars
    </div>
  </div>

  <div>
    <h3>Extras:</h3>
    <input type="checkbox" id="ScentTree" data-price="5" /> Scent tree - 5 dollars
    <div>
      <input type="checkbox" id="PrivateCarWax" data-price="10" /> Wax for private car - 10 dollars
    </div>
    <div>
      <input type="checkbox" id="CommercialCarWax" data-price="20" /> Wax for commercial car - 20 dollars
    </div>
    <p>
      <input type="button" id="button" value="Click to get a price" /> <span id="price"></span>
    </p>  
</form>

How to undo a javascript command after unchecking the checkbox?

2 Answers2