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>
精彩评论