[ANSWERED] html – How do I sum the values of data-price from different input types?

Question 1

There are several errors in your code, which stops you from calculating the sum correctly:

#go is not an input element, and therefore will never fire the change event. To observe change events on all your inputs, use $('#go input, #place') instead.
You are accessing the value of checked radio buttons and selected option incorrectly:
```
$('#go','#place').children(":selected")
```
This is incorrect, as (1) you are joining the selectors incorrectly, and (2) checkbox/radio buttons don’t have the :selected pseudo class. In order to retrieve the selected radio buttons and select option, you can perform this instead:
- To access the checked radio button, use $('#go input:checked')
- To access the selected option, use $('#place option:selected')

See updated example based on your code:

$(document).ready(function() {
  function validate() {
    var sum = 0;
    sum += +$('#go input:checked').data('price') || 0;
    sum += +$('#place option:selected').data('price') || 0;

    $('#result').html(sum === 0 ? '' : sum + '$');
  }
  validate();

  $('#go input, #place').on('change', function() {
    validate();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <div id=go>
    <label><input type="radio" name="colorRadio" value="one" class="abc" data-price="1600">Live Band</label>
    <label><input type="radio" name="colorRadio" value="two" class="abc" data-price="400">DJ</label>
    <label><input type="radio" name="colorRadio" value="three" class="abc" data-price="500">Acoustic</label>
  </div>
  <div id="example" class="container">
    <select id="place">
      <option value="">pick</option>
      <option value="a" data-price="100">a</option>
      <option value="b" data-price="200">b</option>
      <option value="c" data-price="300">c</option>
    </select>
  </div>
</form>

<div id="result" class="container"></div>

Question 2

I am designing a form that will hopefully be able to take user input and sum a total for the client to see as they go. Ive tried to use the data-price attribute to collect the values but i just cant seem to get it to work!
Any pointers as to where I’m going wrong would be greatly greatly appreciated.

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8" />
        <title>My test page</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <link href="form-style.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1">
            <div id="go">
                <label>
                    <input type="radio" name="colorRadio" value="one" class="abc" data-price="1600"/>Live Band
                </label>
                <label>
                    <input type="radio" name="colorRadio" value="two" class="abc" data-price="400"/>DJ
                </label>
                <label>
                    <input type="radio" name="colorRadio" value="three" class="abc" data-price="500"/>Acoustic
                </label>
            </div>

            <div id="example" class="container">
                <select id="place">
                    <option value="">pick</option>
                    <option value="a" data-price="100">a</option>
                    <option value="b" data-price="200">b</option>
                    <option value="c" data-price="300">c</option>
                </select>
            </div>
        </form>

        <div id="result" class="container"></div>


    <script>
    $(document).ready(function(){
        function validate(){
            var $selected = $('#go','#place').children(":selected");
            var sum =0;
            
            $selected.each(function(){
                sum += $(this).data('price') || 0;
            });

            $('#result').html(sum === 0 ? '' : sum +'$');
        }
        validate();         
        
        $('#go, #place').on('change',function(){
            validate();
        });
    });
    </script>
</body>

Bollate

[ANSWERED] html – How do I sum the values of data-price from different input types?

By

Solution 1 :

Problem :

Comments

Comment posted by InanisAtheos

Comment posted by Daniel Gracie Cheng

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate