CODEWITHSUNDEEP
jqueryhtml
Patrick Hennessey
Patrick Hennessey

Reputation: 471

Using jQuery to update price based on menu drop down selections

I have a hard-coded form that cannot be altered, but I need to assign price values to the options selected, and add them to the base price. I've created a codepen with notes, and I would appreciate any help anyone can offer. I think I'm close, but it still isn't working.

https://codepen.io/ophello/pen/ZoNWrB

<form>
<select name="dropdown1">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
<option value="Option4">Option 4</option>
<option value="Option5">Option 5</option>
<option value="Option6">Option 6</option>
</select>
<br><br>
<select name="dropdown2">
<option value="OtherOption1">Other Option 1</option>
<option value="OtherOption2">Other Option 2</option>
<option value="OtherOption3">Other Option 3</option>
</select>

</form>

<br>Total Price<br>
$<span id="result">1350</span>

And here's the jquery:

$(document).ready(function() {

  var dropdown1 = [0,70,250,404,474,450];
  var dropdown2 = [0,80,160];

  function updatePrice() {

    var dd1 = dropdown1[($("#dropdown1")[0].selectedIndex)];
    var dd2 = dropdown2[($("#dropdown2")[0].selectedIndex)];

    $("#result").html(1350 + dd1 + dd2);
  }

  $("select").on("change", updatePrice); 
});

Upvotes: 1

Views: 176

Answers (1)

Grant Miller
Grant Miller

Reputation: 28999

You are using the wrong selector.

$('#dropdown1') // Change to $('[name="dropdown1"]')
$('#dropdown2') // Change to $('[name="dropdown2"]')

Alternatively, you can simply assign id="dropdown1" and id="dropdown2" to the respective elements.

Upvotes: 1

Related Questions