Question

I have this html

<div>
    <input type="radio" name="erp_report_type" value="customerinvoice" required>
    <label for="">Customer Invoice</label>
    <input type="radio" name="erp_report_type" value="packinglist">
    <label for="">Packing List</label>
    <input type="radio" name="erp_report_type" value="performainvoice">
    <label for="">Performa Invoice</label>
    <input type="radio" name="erp_report_type" value="commercialinvoice">
    <label for="">Commercial Invoice</label>    
</div>
<div>
    <input type="radio" name="erp_productformat" value="description">
    <label for="">Description</label>
    <input type="radio" name="erp_productformat" value="picture">
    <label for="">Picture</label>
    <input type="radio" name="erp_productformat" value="descriptionpicture">
    <label for="">Description &amp; Picture</label>
</div>

i want to fetch the value from erp_productformat based on erp_report_type change event. this is the jQuery i am using for it.

$("input[name='erp_report_type']").change(function() {
    var type = $(this).val();
    var productFormat = $("input[name='erp_productformat']").val(); 
    if( type == 'customerinvoice') {

    } else if(type == 'packinglist') {

    } else if(type == 'performainvoice') {

    } else if(type == 'commercialinvoice') {

    }
});

the problem is variable productFormat will hold only the first value i.e description it does not fetch the other value if i check the other two field.

i am still a noob to jQuery or JS. where am i going wrong?

Answer 1

Try changing to this:

var productFormat = $("input[name='erp_productformat']").filter(':checked').val();

This will return the checked value from ‘erp_productformat’ group of inputs and then it’s value.