Value change on drop down or check box

JavaScript
27

In my code example I placed a submit button so that the form can work even when JavaScript is not available, then used scripting to hide the submit button and replace it with a prettier button instead.

Everyone has JavaScript, right?

1 Like
28 
var totalPrice = dropdownPrice + checkboxTotal;
    total.innerHTML = "$" + totalprice;

(“P” was not in capital)

changed to:

var totalPrice = dropdownPrice + checkboxTotal;
    total.innerHTML = "$" + totalPrice;

Now working, but those buttons diappears now.

29

It will help if you can supply a link to the appropriate page when you want further assistance on something.

1 Like
30

This one sir.

31

Thanks. The browser console still shows a problem in regard to add. Let’s get that issue dealt with.

1 Like
32

Please help me in fixing this part I tried today also, but could not get away.

33

So what is the browser console telling you now?

1 Like
34

This is the Live link, and the browser console is telling me this →

Uncaught TypeError: Cannot read property 'add' of undefined
    at iife (custom.js:84)
    at custom.js:86
35

Here are the relevant sections of code in relation to that undefined error.

  var submit = form.elements.submit;
  ...
  submit.classList.add("hide");

add cannot be read as a property of classList, because classList is undefined.
classList is undefined because submit is also undefined
submit is undefined because there is no element in your form with a name of submit

1 Like
36

Please check this sir or I am still not getting the point?

37

The submit element is obtained from the form element.

var submit = form.elements.submit;

If the form element is undefined, then no submit button can be found from that either.

1 Like
38

My apologies - I have memories of another form and it’s after midnight for me. I’ll take another run at this.

1 Like
39

Because there are more than one element named submit, they are retrieved as an array-like nodeList, and so must be looped through instead.

There isn’t any need to hide them though, so that code relating to the submit buttons can be removed without affecting things.

1 Like
40

Should I delete this entire code →

  function addBuyNow(submit) {
    var buyNow = document.createElement("p");
    var a = document.createElement("a");
    buyNow.classList.add("buynow");
    a.appendChild(document.createTextNode("Buy Now"));
    a.href = "#";
    buyNow.appendChild(a);
    submit.parentNode.appendChild(buyNow, submit);
  }

and

var submit = form.elements.submit;
  select.addEventListener("change", updatePriceHandler);
  checkboxes.forEach(function addCheckboxHandler(checkbox) {
    checkbox.addEventListener("click", updateTotalHandler);
  });
  submit.classList.add("hide");
  addBuyNow(submit);

or I am still not completely correct.

41

Some of that second lot of code isn’t related to the submit, so needs to remain. Only remove from that second lot of code, lines that have submit on them.

1 Like
42

I have retained the first lot of code completely.

and commented some lines in 2nd lot

 var prices = [59, 236, 1475];
  var form = document.querySelector("#order");
  var select = form.elements.license_type;
  var checkboxes = getCheckboxes(form);
  // var submit = form.elements.submit;
  select.addEventListener("change", updatePriceHandler);
  checkboxes.forEach(function addCheckboxHandler(checkbox) {
    checkbox.addEventListener("click", updateTotalHandler);
  });
  // submit.classList.add("hide");
  // addBuyNow(submit);
43

That first lot of code, the addBuyNow() function isn’t used by your code now, and can be removed too.

The other commented-out lines that you most recently did are all good to be removed too.

1 Like
44

Thanks.

 var prices = [59, 236, 1475];
  var form = document.querySelector("#order");
  var select = form.elements.license_type;
  var checkboxes = getCheckboxes(form);
  // var submit = form.elements.submit;
  select.addEventListener("change", updatePriceHandler);
  checkboxes.forEach(function addCheckboxHandler(checkbox) {
    checkbox.addEventListener("click", updateTotalHandler);
  });
  // submit.classList.add("hide");
  // addBuyNow(submit);

still the buttons disappears. No console warnings.

45

The total_price element is being updated with the price, and must not contain the submit buttons.

1 Like
46

I have changed the location of that class now 99% things seems to work.

except this one issue:

when the checkboxes are not selected the HTML looks like this:

	<p class="totalprice total_price">Total Price: <span class="total themecolor bold">$59</span></p>

but on checkbox ticked it becomes:

<p class="totalprice total_price">$158</p>

this distorts the anticipated design. which section to correct to fix the issue at hand.