checkbox select runs a javascript call, but doesn't get all the values

Question

Having some issues with a form that calculates the cost of an item as the user selects different options. So select the first option it will display the option select, then moving down to the next option step and selecting an option it will display the option that you have just select but it will then set the first option to undefined.

I have created a jsfiddle which is here https://jsfiddle.net/2k5u3tc0/

<div>
<h2>Step One</h2>
<input type="radio" name="size" id="sm" value="Small" class="size" /><label for="">Small</label>
<input type="radio" name="size" id="md" value="Medium" class="size" /><label for="">Medium</label>
<input type="radio" name="size" id="cu" value="Custom" class="size" /><label for="">Custom</label>
</div>
<div>
<h2>Step Two</h2>
<input type="radio" name="print" id="ss" value="Single Sided" class="size" /><label for="">Single Sided</label>
<input type="radio" name="print" id="ds" value="Double Sided" class="size" /><label for="">Doubled Sided</label>
</div>
<div>
<h2>Step Three</h2>
<input type="radio" name="finish" id="sc" value="Straight cut" class="size" /><label for="">Straight cut</label>
<input type="radio" name="finish" id="he" value="Hemmed edges" class="size" /><label for="">Hemmed edges</label>
<input type="radio" name="finish" id="ey" value="Eyelets" class="size" /><label for="">Eyelets</label>
<input type="radio" name="print" id="re" value="Reinforced edges" class="size" /><label for="">Reinforced edges</label>
</div>
<div id="totalPrice"></div>

JQuery

$(function() {
$(".size, .print").click(function() {
//$(document).on("change","#frmProduct", function() {

    var size = $(".size:checked").val();
    var print = $(".print:checked").val();

    var dataString = 'size='+ size +'&print='+ print;

    $.ajax({
        type: "POST",
        url: "../../../inc/calculate.php",
        data: dataString,
        cache: false,
        success: function(html){
            $("#totalPrice").html(html);
        }
    });

    return false;
});
});

In the javascript it loads a php page called calculate.php, the code in here is very simple

$size=$_POST['size']; 
$print=$_POST['print'];
$finish= $_POST['finish'];
$ipadress = $_SERVER['REMOTE_ADDR'];
$datenow = strtotime(date('d-m-Y H:i:s'));
$today = strtotime(date('d-m-Y'));

echo $size.' '.$print.' '.$finish.' '.$today;

but this returns something like

Small undefined 1491519600

then if you go to step two and select one it will be

undefined Single Sided 1491519600

Answer 1

The problem occurs because when you select a radio button the buttons in the other input are not selected (undefined in js) and that value gets sent on click to your php.

The return false; prevents the radio from actually being selected on click.

You need to remove the return false; and depending on how you want this to work make sure both input groups have been selected before sending the AJAX.