javascript - How to hide fields when radio button is selected with jquery in Prestashop checkout -
what have: 2 radio buttons , several fields.
what want: - when radio button "delivery address" show: addres1, postcode , city - , hide id_state field. - when other button selected "delivery carrier office" selected hide fields: address1, postcode , city - show id_state (i use select carrier offices)
i use several .tpl files in checkout page showing radio buttons. radio buttons order-carrier.tpl file:
<div class="delivery_options"> {foreach $option_list $key => $option} <div class="delivery_option {if ($option@index % 2)}alternate_{/if}item"> <input class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" onchange="{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} /> <label for="delivery_option_{$id_address}_{$option@index}"> <table class="resume"> <tr> <td class="delivery_option_logo"> {foreach $option.carrier_list $carrier} {if $carrier.logo} <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/> {else if !$option.unique_carrier} {$carrier.instance->name} {if !$carrier@last} - {/if} {/if} {/foreach} </td> <td> {if $option.unique_carrier} {foreach $option.carrier_list $carrier} <div class="delivery_option_title">{$carrier.instance->name}</div> {/foreach} {if isset($carrier.instance->delay[$cookie->id_lang])} <div class="delivery_option_delay">{$carrier.instance->delay[$cookie->id_lang]}</div> {/if} {/if} {if count($option_list) > 1} {if $option.is_best_grade} {if $option.is_best_price} <div class="delivery_option_best delivery_option_icon">{l s='the best price , speed'}</div> {else} <div class="delivery_option_fast delivery_option_icon">{l s='the fastest'}</div> {/if} {else} {if $option.is_best_price} <div class="delivery_option_best_price delivery_option_icon">{l s='the best price'}</div> {/if} {/if} {/if} </td> <td> <div class="delivery_option_price"> {if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))} {if $use_taxes == 1} {if $pricedisplay == 1} {convertprice price=$option.total_price_without_tax} {l s='(tax excl.)'} {else} {convertprice price=$option.total_price_with_tax} {l s='(tax incl.)'} {/if} {/if} {else} {l s='free'} {/if} </div> </td> </tr> </table> <table class="delivery_option_carrier {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}selected{/if} {if $option.unique_carrier}not-displayable{/if}"> {foreach $option.carrier_list $carrier} <tr> {if !$option.unique_carrier} <td class="first_item"> <input type="hidden" value="{$carrier.instance->id}" name="id_carrier" /> {if $carrier.logo} <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/> {/if} </td> <td> {$carrier.instance->name} </td> {/if} <td {if $option.unique_carrier}class="first_item" colspan="2"{/if}> <input type="hidden" value="{$carrier.instance->id}" name="id_carrier" /> {if isset($carrier.instance->delay[$cookie->id_lang])} {$carrier.instance->delay[$cookie->id_lang]}<br /> {if count($carrier.product_list) <= 1} ({l s='product concerned:'} {else} ({l s='products concerned:'} {/if} {* foreach on 1 line, avoid tabulation in title attribute of acronym *} {foreach $carrier.product_list $product} {if $product@index == 4}<acronym title="{/if}{if $product@index >= 4}{$product.name}{if isset($product.attributes) && $product.attributes} {$product.attributes|escape:'htmlall':'utf-8'}{/if}{if !$product@last}, {else}">...</acronym>){/if}{else}{$product.name}{if isset($product.attributes) && $product.attributes} {$product.attributes|escape:'htmlall':'utf-8'}{/if}{if !$product@last}, {else}){/if}{/if}{/foreach} {/if} </td> </tr> {/foreach} </table> </label> </div> and fields order-opc-new-account.tpl:
<p class="text"> <label for="company">{l s='company'}</label> <input type="text" class="text" id="company" name="company" value="{if isset($guestinformations) && $guestinformations.company}{$guestinformations.company}{/if}" /> </p> {elseif $field_name eq "vat_number"} <div id="vat_number_block" style="display:none;"> <p class="text"> <label for="vat_number">{l s='vat number'}</label> <input type="text" class="text" name="vat_number" id="vat_number" value="{if isset($guestinformations) && $guestinformations.vat_number}{$guestinformations.vat_number}{/if}" /> </p> </div> {elseif $field_name eq "dni"} {assign var='dniexist' value=true} <p class="text"> <label for="dni">{l s='identification number'}</label> <input type="text" class="text" name="dni" id="dni" value="{if isset($guestinformations) && $guestinformations.dni}{$guestinformations.dni}{/if}" /> <span class="form_info">{l s='dni / nif / nie'}</span> </p> {elseif $field_name eq "firstname"} <p class="required text"> <label for="firstname">{l s=''}</label> <input type="text" class="text" id="firstname" name="firstname" value="{if isset($guestinformations) && $guestinformations.firstname}{$guestinformations.firstname}{/if}" placeholder="Име" required /> </p> {elseif $field_name eq "lastname"} <p class="required text"> <label for="lastname">{l s=''}</label> <input type="text" class="text" id="lastname" name="lastname" value="{if isset($guestinformations) && $guestinformations.lastname}{$guestinformations.lastname}{/if}" placeholder="Фамилия" required /> </p> <p class="{if isset($one_phone_at_least) && $one_phone_at_least}required {/if}text"> <label for="phone_mobile">{l s=''}{if isset($one_phone_at_least) && $one_phone_at_least}{/if}</label> <input type="text" class="text" name="phone_mobile" id="phone_mobile" value="{if isset($guestinformations) && $guestinformations.phone_mobile}{$guestinformations.phone_mobile}{/if}" placeholder="Телефон" required /> <span class="form_hint">Въведи коректен телефон номер, на който може да те потърсим относно поръчката!</span> </p> {elseif $field_name eq "postcode"} {$postcodeexist = true} <p class="required postcode text" style="display:none"> <label for="postcode">{l s=''}</label> <input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestinformations) && $guestinformations.postcode}{$guestinformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().touppercase());" placeholder="Пощенски код" required /> <span class="form_hint">Въведи четири цифрения пощенски код на твоето населено място.</span> </p> {elseif $field_name eq "city"} <p class="required text"> <label for="city">{l s=''} </label> <input type="text" class="text" name="city" id="city" value="{if isset($guestinformations) && $guestinformations.city}{$guestinformations.city}{/if}" placeholder="Град/Село" required /> </p> {elseif $field_name eq "address1"} <p class="required text"> <label for="address1">{l s=''} </label> <input type="text" class="text" name="address1" id="address1" value="{if isset($guestinformations) && $guestinformations.address1}{$guestinformations.address1}{/if}" placeholder="кв./ бул./ ул./ №/ ет./ ап." required /> <span class="form_hint">Ако желаеш доставка до адрес, упъти ни къде точно да доставим пратката ти. Ако желаеш да получиш поръчката си по-бързо и евтино, напиши тук офиса на Еконт в твоя град и вземи пратката си от там - виж помощната информация в дясно и научи дали има офис на Еконт в твоя град.</span> </p> {elseif $field_name eq "country" || $field_name eq "country:name"} <p class="required select"> <label for="id_country">{l s=''}</label> <select name="id_country" id="id_country" placeholder="Изберете офис"> {foreach from=$countries item=v} <option value="{$v.id_country}"{if (isset($guestinformations) , $guestinformations.id_country == $v.id_country) or (!isset($guestinformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'utf-8'}</option> {/foreach} </select> </p> {elseif $field_name eq "state" || $field_name eq 'state:name'} {$stateexist = true} <p class="required id_state select" style="display:none;"> <label for="id_state">{l s=''}</label> <select name="id_state" id="id_state"> <option value="">-</option> </select> </p> {/if} {/foreach} {if !$postcodeexist} <p class="required postcode text hidden"> <label for="postcode">{l s='zip / postal code'} <sup>*</sup></label> <input type="text" class="text" name="postcode" id="postcode" value="{if isset($guestinformations) && $guestinformations.postcode}{$guestinformations.postcode}{/if}" onkeyup="$('#postcode').val($('#postcode').val().touppercase());" /> </p> {/if} {if !$stateexist} <p class="required id_state select hidden"> <label for="id_state">{l s=''}</label> <select name="id_state" id="id_state"> <option value="">-</option> </select> </p> {/if} {if !$dniexist} <p class="required text dni"> <label for="dni">{l s='identification number'} <sup>*</sup></label> <input type="text" class="text" name="dni" id="dni" value="{if isset($guestinformations) && $guestinformations.dni}{$guestinformations.dni}{/if}" /> <span class="form_info">{l s='dni / nif / nie'}</span> </p> {/if} <input type="hidden" name="alias" id="alias" value="{l s='my address'}"/> <div id="opc_invoice_address" class="is_customer_param"> {assign var=stateexist value=false} {assign var=postcodeexist value=false} {assign var=dniexist value=false} <h3>{l s='invoice address'}</h3> {foreach from=$inv_all_fields item=field_name} {if $field_name eq "company" && $b2b_enable} <p class="text"> <label for="company_invoice">{l s='company'}</label> <input type="text" class="text" id="company_invoice" name="company_invoice" value="" /> </p> {elseif $field_name eq "vat_number"} <div id="vat_number_block_invoice" class="is_customer_param" style="display:none;"> <p class="text"> <label for="vat_number_invoice">{l s='vat number'}</label> <input type="text" class="text" id="vat_number_invoice" name="vat_number_invoice" value="" /> </p> </div> {elseif $field_name eq "dni"} {assign var='dniexist' value=true} <p class="text"> <label for="dni_invoice">{l s='identification number'}</label> <input type="text" class="text" name="dni_invoice" id="dni_invoice" value="{if isset($guestinformations) && $guestinformations.dni_invoice}{$guestinformations.dni_invoice}{/if}" /> <span class="form_info">{l s='dni / nif / nie'}</span> </p> {elseif $field_name eq "firstname"} <p class="required text"> <label for="firstname_invoice">{l s='first name'} <sup>*</sup></label> <input type="text" class="text" id="firstname_invoice" name="firstname_invoice" value="{if isset($guestinformations) && $guestinformations.firstname_invoice}{$guestinformations.firstname_invoice}{/if}" /> </p> {elseif $field_name eq "lastname"} <p class="required text"> <label for="lastname_invoice">{l s='last name'} <sup>*</sup></label> <input type="text" class="text" id="lastname_invoice" name="lastname_invoice" value="{if isset($guestinformations) && $guestinformations.lastname_invoice}{$guestinformations.lastname_invoice}{/if}" /> </p> {elseif $field_name eq "address1"} <p class="required text"> <label for="address1_invoice">{l s='address'} <sup>*</sup></label> <input type="text" class="text" name="address1_invoice" id="address1_invoice" value="{if isset($guestinformations) && $guestinformations.address1_invoice}{$guestinformations.address1_invoice}{/if}" /> </p> {elseif $field_name eq "address2"} <p class="text is_customer_param"> <label for="address2_invoice">{l s='address (line 2)'}</label> <input type="text" class="text" name="address2_invoice" id="address2_invoice" value="{if isset($guestinformations) && $guestinformations.address2_invoice}{$guestinformations.address2_invoice}{/if}" /> </p> {elseif $field_name eq "postcode"} {$postcodeexist = true} <p class="required postcode_invoice text"> <label for="postcode_invoice">{l s='zip / postal code'} <sup>*</sup></label> <input type="text" class="text" name="postcode_invoice" id="postcode_invoice" value="{if isset($guestinformations) && $guestinformations.postcode_invoice}{$guestinformations.postcode_invoice}{/if}" onkeyup="$('#postcode_invoice').val($('#postcode_invoice').val().touppercase());" /> </p> {elseif $field_name eq "city"} <p class="required text"> <label for="city_invoice">{l s='city'} <sup>*</sup></label> <input type="text" class="text" name="city_invoice" id="city_invoice" value="{if isset($guestinformations) && $guestinformations.city_invoice}{$guestinformations.city_invoice}{/if}" /> </p> @brian correct code , working after several changes of radio button stop working - or working @ first change why?
<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> you can test live page at: test.detelinmarkov.com/quick-order (first need add in cart)
p.s: try hide pure css not working.
i know problem, delivery radios generated ajax, need attache script refresh every ajax call.
sorry english : )
Comments
Post a Comment