[SOLVED] Hide fields with jquery when carrier is selected

[Detelin Markov]

Hi,

 

I try to hide some fields in checkout page. I want when carrier 1 is selected field address1, postcode, city to be hidden and field state to be show. Else (when other carrier - in my case i have only 2, when other carrier is selected  address1, postcode, city to be show and state to be hide

 

I read in stackoverflow about hiding with pure CSS like:

:checked + #address1{ display: block; }
#address1 { display: none; } 

Try but not working.

 

I try to write jquery that to do this but again not working. May be i use wrong selectors or may be whole code is junk, what is your opinion?

<script>
$('input[name="delivery_option_0_0"]').live('change', function(){
 if ( $("#delivery_option_0_0").is(":checked")) {
	$('#address1').show();
	$('#postcode').show();
	$('#city').show();
	 $('#id_state').hide();
	} else {
	$('#address1').hide();
	$('#postcode').hide();
	$('#city').hide();
	$('#id_state').show();
	}
 });}
</script> 

Why i want to hide fields? Because i change places of almost everything on checkout page and use only one carrier (in real) but with two options(2 carriers in the shop): Delivery to carrier office or delivery to address. And i want to use set carrier offices instead state, but when client check delivery to carrier office will be confused from other fields in this page, and again when choice delivery to address(home) will be confused why see field carrier office.

 

Note: I will remove required from this field after find way how to hide it.

 

What is your suggestions?

 

Regards

Detelin

Edited March 10, 2014 by Detelin Markov (see edit history)

[math_php]

Hi Detelin,

 

 

- Live method is deprecated then it is better not to use it :

 

$('#delivery_option_0_0').on('change', function(){

 

 

 

Regards

[Detelin Markov]

Thank you for your comment math_php!

 

Yesterday i find working solution with "on change". Strange working fine first one-two switches but after that stop working. May be it`s because in checkout page have several other js...

 

Here is the code that already find (and working for one-two switches)

				<script>
					$(document).ready(function(){
					    toggleFields();
					    
					    $('.delivery_option_radio').on('change', function() {
					        toggleFields();
					    });
					});

					function toggleFields() {
					    if ($('#delivery_option_0_0').is(':checked')) {
					        $('#address1').show();
					        $('#postcode').show();
					        $('#city').show();
					        $('#id_state').hide();
					    } else {
					        $('#address1').hide();
					        $('#postcode').hide();
					        $('#city').hide();
					        $('#id_state').show();
					    }
					}
				</script>

Do you have any idea math_php why working only first 1-2 times only?

 

Thanks,

Detelin

[math_php]

Yes by using html class 'delivery_option_radio' you might be in conflict with an 'updateExtraCarrier('. function

 

 

<input id="delivery_option_2_1" class="delivery_option_radio" type="radio" value="2," onchange="updateExtraCarrier('2,', 2);" name="delivery_option[2]">

 

In tpl you could change it  to

 

<input id="delivery_option_2_1" class="delivery_option_radio" type="radio" value="2," onchange="mydisplayudpate();updateExtraCarrier('2,', 2);" name="delivery_option[2]">

[Detelin Markov]

Thank you math_php! With your solution working fine!

And my problem is solved with these change:

<div class="delivery_option {if ($option@index % 2)}alternate_{/if}item">
<input class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" onchange="mydisplayudpate();{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}_{$option@index}" value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}checked="checked"{/if} />

Edited March 10, 2014 by Detelin Markov (see edit history)