Javascript Sum of two values in one Input Text

Question

I'm looking for a way to add another value into my input text. I have a read only input box, two radio buttons, and three checkboxes.

<div class="radios">
  <label>
  <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
  </label>
  <label>
  <input type="radio" name="extratreats" data-target="#extratreat"> Extra-Treats
  </label>
</div>

<div id="extratreat" class="extratreat tab-pane collapse">
  <label><h2>Extra Treats</h2></label>
   <br />
  <label><input id="treats" name="treats[]" value="Sweet Corner" type="checkbox" > Sweet Corner & Choco Fountain</label>
  <label><input id="treats" name="treats[]" value="Popcorn Maker" type="checkbox" > Popcorn Maker</label>
  <label><input id="treats" name="treats[]" value="Hotdog Roller" type="checkbox" > Hotdog Roller</label>
</div>

<div id="pricing">
  <label><h2>Price</h2></label>
   <br />
  <input type="text" name="price-total" value="" autocomplete="off" readonly>
</div>

I've added a javascript to my radio button where if I click on non-exlusive the value of pricing will change to 279. But I don't know how to add more value to if I add from treats. For example the price of Sweet Corner is 2,500 and they also clicked on Non-Exlusive which has 279 as it's default value, how do I add 2,500 to the already specified 279?

Here's the script I tried using:

<script>
 $(document).ready(function(){
 $('[name=packages]').click(function()  {
    var val = $(this).val();
     if (val == "non-exclusive") {
       $('[name=price-total]').val('PHP 279');
     } else if (val == "package1") {
       $('[name=price-total]').val('PHP 300');
     } else if (val == "package2") {
        $('[name=price-total]').val('PHP 400');
     }
    });
 $('[id=treats').click(function()  {
      var val1 = $(this).val();
      var val = $('[name=price-total]').val();
 if (val1 == "Sweet Corner") {
       $('[name=price-total]').val(val.val+' 2500');
       } else if (val1 == "package1") {
       $('[name=price-total]').val('PHP 300');
       } else if (val1 == "package2") {
        $('[name=price-total]').val('PHP 400');
      }
    });
 });
</script>

It gives me an "undefined value" if I click one of the checkboxes instead of adding it's value to the first value.

You have many errors with your code, may you please rectify this? — evolutionxbox
– evolutionxbox, Commented Jan 11, 2018 at 16:28
What specifically gives you an "undefined value"? In the JavaScript code you're showing, when you debug with your browser's debugging tools, where specifically is the first indication of a problem? — David
– David, Commented Jan 11, 2018 at 16:30
@David I get the "undefined value" from the $('[id=treats').click(function() . The $('[name=packages]').click(function() works well but if I press a checkbox it'll give me the "undefined value" error. — Ellis Cristoph
– Ellis Cristoph, Commented Jan 11, 2018 at 16:33
@EllisCristoph: Two things immediately become apparent... (1) The selector '[id=treats' is broken. (2) You are re-using the same id value on multiple elements, which is invalid. — David
– David, Commented Jan 11, 2018 at 16:34

Scott Marcus · Accepted Answer · 2018-01-11 18:55:28Z

2

The problem was that you made a variable called val and then tried to access it with val.val + ' 2500' when it should have just been val + ' 2500'. val.val implies that there is a val object with a val property. Since there isn't, you got undefined.

You also have a syntax error with this:

$('[id=treats').click(function()  {

As it should be:

$('[id=treats]').click(function()  {

Also, I think that because of what your are testing, switch statements are more appropriate.

Lastly, you have multiple items with the same id, which isn't valid. After making them all unique, you should change your second click handler so that it accesses all the checkboxes by using the name attribute instead of id.

$(document).ready(function(){
 
   $('[name=packages]').click(function()  {
     switch($(this).val()){
       case "non-exclusive":
         $('[name=price-total]').val('PHP 279');
         break;
       case "package1":
         $('[name=price-total]').val('PHP 300');
         break;  
       case "package2":
         $('[name=price-total]').val('PHP 400');
         break;        
     }
   });
   
 $('[name="treats[]"]').click(function()  {
   // Strip out non-numeric portion:
   var val = $('[name="price-total"]').val().replace("PHP ", "");
   
   switch($(this).val()){
    case "Sweet Corner":
      // Check to see if checkbox is checked...
      if(this.checked){
        // Must convert the value to a number and then you can do math
        $('[name=price-total]').val("PHP " + (+val + 2500));  // <-- The problem was here
      } else {
        $('[name=price-total]').val("PHP 279"); 
      }
      break;
    case "package1":
      $('[name=price-total]').val('PHP 300');
      break;  
    case "package2":
      $('[name=price-total]').val('PHP 400');
      break;        
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radios">
  <label>
  <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
  </label>
  <label>
  <input type="radio" name="extratreats" data-target="#extratreat"> Extra-Treats
  </label>
</div>

<div id="extratreat" class="extratreat tab-pane collapse">
  <label><h2>Extra Treats</h2></label>
   <br />
  <label><input id="treats1" name="treats[]" value="Sweet Corner" type="checkbox" > Sweet Corner & Choco Fountain</label>
  <label><input id="treats2" name="treats[]" value="Popcorn Maker" type="checkbox" > Popcorn Maker</label>
  <label><input id="treats3" name="treats[]" value="Hotdog Roller" type="checkbox" > Hotdog Roller</label>
</div>

<div id="pricing">
  <label><h2>Price</h2></label>
   <br />
  <input type="text" name="price-total" value="" autocomplete="off" readonly>
</div>

edited Jan 11, 2018 at 18:55

answered Jan 11, 2018 at 16:36

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ellis Cristoph Over a year ago

This is really good. is there a way for me to sum up the values? So instead of it showing PHP 279 2500, it'll show 2779?

Scott Marcus Over a year ago

@EllisCristoph I updated the answer to do just that.

NappingRabbit Over a year ago

but when you unclick, it adds again. I still +1 for the effort and it seems like it will get them started well. @ScottMarcus

Scott Marcus Over a year ago

@NappingRabbit Corrected that.

Ellis Cristoph Over a year ago

@ScottMarcus Hello, your code works but I have one question, when I try to import the values in the textbox into mysql database, it doesn't import the values of the price-total. It reads the value as "0".

|

Collectives™ on Stack Overflow

Javascript Sum of two values in one Input Text

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related