Jump to content

[SOLVED] Hide fields with jquery when carrier is selected


Detelin Markov

Recommended Posts

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 by Detelin Markov (see edit history)
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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]">
  • Like 1
Link to comment
Share on other sites

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 by Detelin Markov (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...