Using jQuery to update price based on menu drop down selections





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















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);
});









share|improve this question































    1















    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);
    });









    share|improve this question



























      1












      1








      1








      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);
      });









      share|improve this question
















      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);
      });






      jquery html






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited May 23 '18 at 22:25







      Patrick Hennessey

















      asked May 23 '18 at 22:13









      Patrick HennesseyPatrick Hennessey

      1219




      1219
























          1 Answer
          1






          active

          oldest

          votes


















          1














          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.






          share|improve this answer





















          • 1





            Holy crap -- you're right! Thanks!

            – Patrick Hennessey
            May 23 '18 at 22:38











          • @PatrickHennessey No problem!

            – Grant Miller
            May 23 '18 at 22:39











          • Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

            – Patrick Hennessey
            May 23 '18 at 22:43












          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50498234%2fusing-jquery-to-update-price-based-on-menu-drop-down-selections%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          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.






          share|improve this answer





















          • 1





            Holy crap -- you're right! Thanks!

            – Patrick Hennessey
            May 23 '18 at 22:38











          • @PatrickHennessey No problem!

            – Grant Miller
            May 23 '18 at 22:39











          • Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

            – Patrick Hennessey
            May 23 '18 at 22:43
















          1














          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.






          share|improve this answer





















          • 1





            Holy crap -- you're right! Thanks!

            – Patrick Hennessey
            May 23 '18 at 22:38











          • @PatrickHennessey No problem!

            – Grant Miller
            May 23 '18 at 22:39











          • Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

            – Patrick Hennessey
            May 23 '18 at 22:43














          1












          1








          1







          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.






          share|improve this answer















          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 22 '18 at 0:02

























          answered May 23 '18 at 22:33









          Grant MillerGrant Miller

          6,559133458




          6,559133458








          • 1





            Holy crap -- you're right! Thanks!

            – Patrick Hennessey
            May 23 '18 at 22:38











          • @PatrickHennessey No problem!

            – Grant Miller
            May 23 '18 at 22:39











          • Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

            – Patrick Hennessey
            May 23 '18 at 22:43














          • 1





            Holy crap -- you're right! Thanks!

            – Patrick Hennessey
            May 23 '18 at 22:38











          • @PatrickHennessey No problem!

            – Grant Miller
            May 23 '18 at 22:39











          • Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

            – Patrick Hennessey
            May 23 '18 at 22:43








          1




          1





          Holy crap -- you're right! Thanks!

          – Patrick Hennessey
          May 23 '18 at 22:38





          Holy crap -- you're right! Thanks!

          – Patrick Hennessey
          May 23 '18 at 22:38













          @PatrickHennessey No problem!

          – Grant Miller
          May 23 '18 at 22:39





          @PatrickHennessey No problem!

          – Grant Miller
          May 23 '18 at 22:39













          Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

          – Patrick Hennessey
          May 23 '18 at 22:43





          Also, as stated in the codepen, I cannot assign IDs to those elements. They're ultimately generated by a squarespace form and I have to work with what I have. Thanks again!

          – Patrick Hennessey
          May 23 '18 at 22:43




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50498234%2fusing-jquery-to-update-price-based-on-menu-drop-down-selections%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Guess what letter conforming each word

          Port of Spain

          Run scheduled task as local user group (not BUILTIN)