Значение радио кнопки jQuery и значение ввода текста?

Question

, как вы можете видеть в фрагменте кода, если я выбираю радиокнопку «стандарт» и отправлю. «Общее» значение - «стандарт + стандарт», то есть «400». Я просто хочу добиться простого вывода , скажем, например, если я выберу «стандарт» и отправлю, выходное значение должно быть всего 200. Если я выберем «custom», тогда мое общее значение должно быть «200 + значение, которое я даю в текстовом поле» .. как для достижения этой цели?

$(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

Во-первых, ваша наценка не является правильным. Все радиокнопки должны иметь общее имя, радиокнопки с тем же именем принадлежат к одной группе.

Для достижения функциональности вам объяснили вы можете сделать что-то вроде следующего фрагмента кода

$(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>

Надеется, что это помогает