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> 

Answer 1

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