jQuery sum radio button value and text input value?

Question

as you can see in the code snippit, if i select the radio button 'standard' and submit.. the 'total' value is 'standard + standard' which is '400'.. i just want to achieve a simple output, say for example, if i select 'standard' and submit, the output value should be only 200.. if i select 'custom', then my total value should be '200 + the value i give in text field'.. how to achieve this?

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {

  var sum = 0;
  $(".price").each(function() {

    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    </fieldset>
<fieldset>
  <div>
    <input type="radio" value="200" id="default" class="price" required></input>
  <label for="default">Standard</label>
  </div>
  <input type="radio" value="200" id="custom" class="price" required></input>
<label for="custom">Custom</label>
<div class="radio-checked">
  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

Geeky · Accepted Answer · 2016-10-11 18:40:19Z

2

Firstly, your mark up is not right. All radio buttons should have a common name,radio buttons with the same name belong to the same group.

To achieve the functionality to you have explained you can do something like the following code snippet

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {
    var sum = 0;
 var selectedVal=$('input:radio[name=pricing]:checked').val();
  alert(selectedVal)
 if(selectedVal==="Standard"){
   sum=200;
 }
 
  else if(selectedVal==="Custom"){
    
  var $prdCost=$("#product-cost");
  var prdPrice=$prdCost.val();
    sum=200+parseFloat(prdPrice);
  }
  alert(sum);
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    
   </fieldset>

  <fieldset>
  <div>
    <input type="radio" value="Standard" id="default" name="pricing"   class="price" required>Standard</input>
  </div>
  <div>    
  <input type="radio" value="Custom" id="custom" name="pricing" value="custom" class="price" required>Custom</input>
  </div>


<div class="radio-checked">

  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

Hope this helps

answered Oct 11, 2016 at 18:40

Geeky

7,5142 gold badges28 silver badges52 bronze badges

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

7 Comments

Em Ji Madhu Over a year ago

thank you so much for your answer.. it works good in your answer.. but when i try to include it in my full blown html.. it doesnt work.. say, the standard value is working fine.. but custom value doesnt.. can you help me? here is the link

Geeky Over a year ago

I am sorry, i could not understand. It works fine for me , I made few changes in the markup and js . Please let me know what is expected and what is not working

Em Ji Madhu Over a year ago

thank you so much for the reply.. when i select 'standard' and click submit, it correctly shows output as '200' but when i select 'custom' and choose a value, say for example '100'.. it should outputs '300' but instead it refreshes the page..! you can try that codepen..! here is how it looks agter custom value with input field values.. image

Geeky Over a year ago

It is reloading for both the clicks, thats because you are submitting the form .Form's default behaviour is to reload it. Let me know what exactly you want to do

Geeky Over a year ago

Because you are submitting the form and serialising its value and using it to display in a tabular format

|

Collectives™ on Stack Overflow

jQuery sum radio button value and text input value?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related