Question

Trying to perform a simple form validation pre-submit for UX enhancement purposes only. Problem that I am having is that .val() is only returning the first form field value and ignoring the rest.

jQuery

        $('#pForm').submit(function(){
            var print = $(".option:checked").val();
            var design = $(".option:checked").val();
            var error = "Please select a design service...";

            if(print == 'p10','p20','p30','p40','p90','p00'
            && design == 'd10','d20','d30','d40','d00') {

               alert(print);
               alert(design);

               return true;

            } else {

               alert(error);
               return false;

            }

        });

HTML (example code)

Each radio is labeled as follows:

<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d40"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d30"/></label>
<label><input type="radio" name="design" class="option" data-number="<?php echo $var ?>" value="d20"/></label>

<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p40"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p30"/></label>
<label><input type="radio" name="print" class="option" data-number="<?php echo $var ?>" value="p20"/></label>

End result is that I do not want the form to submit unless a value is choose from the print radio fields && the design radio fields. If the check fails I want to display an error message to the user.

*Some of the code above may be semi-pseudo Thanks for the help! 🙂

Answer 1

OK, now that it’s more clear what you’re trying to do, then just do this to make sure that there is an item checked in each group:

if (!$(".design:checked").length || !$(".print:checked").length) {
   // something is not selected
}

Once you ensure that there is a selected value in both, then you can get the value of the first item that is checked with this code:

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