开发者

Hiding showing radio options based on value of input field

开发者 https://www.devze.com 2023-02-21 13:35 出处:网络
I have a form where the user enters their country.If the value is not \"United States\", I want to hide domestic shipping options and only show an international shipping option.

I have a form where the user enters their country. If the value is not "United States", I want to hide domestic shipping options and only show an international shipping option.

So here's what I'm attempting to accomplish:

The value of the country is handled in this input field which defines the Billing Address. By default this input field shows up.

<input id="customer_country_name" name="customer_country_name" value="United States"/>

But if the user chooses to ship to a different address then the one used for billing, they have to select a checkbox:

<input id="use_different_addresses" name="use_different_addresses"/>

If they choose this option, an input field will show up with the following info where they'll enter their shipping address country:

<input id="shipping_country_name" name="shipping_country_name" value="United States"/>

Now, the shipping options are at the bottom of the form. They have this format:

<div id="fc_shipping_methods_inner">

    <label for="shipping_service_fedexOvernight" class="fc_radio">
    <input type="radio" class="fc_radio fc_required" value="fedexOvernight|37.95" id="shipping_service_fedexOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">开发者_Python百科FedEx </span>
    <span class="fc_shipping_service">Overnight U.S. Domestic</span>
    <span class="fc_shipping_cost">$37.95</span>
    </label>


    <label for="shipping_service_fedexIntlOvernight" class="fc_radio">
    <input type="radio" class="fc_radio fc_required" value="fedexIntlOvernight|75.00" id="shipping_service_fedexIntlOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">FedEx </span>
    <span class="fc_shipping_service">Overnight International (Outside U.S.)</span>
    <span class="fc_shipping_cost">$75.00</span>
    </label> 

</div><!-- end #fc_shipping_methods_inner -->

There will be many shipping options, but only one for International (the one that has the label for "shipping_service_fedexIntlOvernight"). Ideally I'd like to hide the other labels if the country is not the United States and only show the label with the value of "shipping_service_fedexIntlOvernight". If the user changes their country value back to the United States in either option above, I'd like the other shipping options to show again.

Thanks!


First of all I would simply add a class to the label which are for US only such as radio_us, for your example this would do :

<label for="shipping_service_fedexOvernight" class="fc_radio radio_us">
    <input type="radio" class="fc_radio fc_required" value="fedexOvernight|37.95" id="shipping_service_fedexOvernight" name="shipping_service" />
    <span class="fc_shipping_carrier">FedEx </span>
    <span class="fc_shipping_service">Overnight U.S. Domestic</span>
    <span class="fc_shipping_cost">$37.95</span>
</label>

and the in your javascript code :

$(document).ready(function() {
    $('#shipping_country_name').keyup(function() {
        if (this.value == 'United States') {
            $('.radio_us').show();
        }
        else {
            $('.radio_us').hide();
        }
    });
});


Thanks so much for pointing me in the right direction on this one. This is what I finally came up with based off your help:

<script type="text/javascript">
$(document).ready(function(){

$("label[for=shipping_service_uspsPriority], label[for=shipping_service_uspsIntlPriority], label[for=shipping_service_uspsExpress], label[for=shipping_service_fedexOvernight]").addClass('radio_us');

    $('#customer_country_name').change(function() {
        if ($('#customer_country_name').val() != 'United States') {
            $('.radio_us').hide();
        }
        else {
            $('.radio_us').show();
        }
    });
});   
</script>
0

精彩评论

暂无评论...
验证码 换一张
取 消