Text Box Appear after Selecting drop down option

LFDFlorist
New Member
1 0 0

Hi, 

I would like to add an option for a text box to appear if someone selects "Specific Time Delivery" from the drop down selection. Currently, I have code below in my product template liquid, I believe i have to call out some if else code to trigger the appearing of text box. I am not sure on the code as well as where to put it at, really appreciate any help. I am using Debut theme.

Code for drop down selection:

<p class="line-item-property__field">
<label>Time of Delivery</label>
<select required class="required" id="time-of-delivery" name="properties[Time of Delivery]">
<option value="9AM - 1PM">9AM - 1PM</option>
<option value="1PM - 5PM">1PM - 5PM</option>
<option value="5PM - 9PM">5PM - 9PM</option>
<option value="Specific time delivery">Specific time delivery, +$5 surcharge</option>
</select>

 

Code for input of specific time:

</p>
<p class="line-item-property__field">
<label for="input-specific-time-eg-530pm">Input specific time (e.g. 5.30PM)</label>
<input required class="required" id="input-specific-time-eg-530pm" type="text" name="properties[Input specific time (e.g. 5.30PM)]">
</p>

 

0 Likes
Guleria
Shopify Partner
1279 266 355

Hello,

Use this one

<script>
$(document).ready(function(){
  $("#time-of-delivery").change(function(){
    $(".hide_int").show();
  });
});
</script>
<style>
.hide_int{
display: none;
}
</style>
<p class="line-item-property__field">
<label>Time of Delivery</label>
<select required class="required" id="time-of-delivery" name="properties[Time of Delivery]">
<option value="9AM - 1PM">9AM - 1PM</option>
<option value="1PM - 5PM">1PM - 5PM</option>
<option value="5PM - 9PM">5PM - 9PM</option>
<option value="Specific time delivery">Specific time delivery, +$5 surcharge</option>
</select>

</p>
<p class="line-item-property__field hide_int">
<label for="input-specific-time-eg-530pm">Input specific time (e.g. 5.30PM)</label>
<input required class="required" id="input-specific-time-eg-530pm" type="text" name="properties[Input specific time (e.g. 5.30PM)]">
</p>

 

Add script JS code in js file, add style css code in css file and html where you want to use it.
Note: I post this code after testing so please don't say it's not working.

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
0 Likes
bstown2
New Member
2 0 0

Hi @Guleria 

I assume the conditional text field only  appears if the "specific time delivery" option is selected?  

When i add this code the conditional text field appear for all the options, and I think this is because i didn't put the script vs style in the correct locations? 

I'm using the minimal theme. 

 

Any way you could clarify which sections the bits of code go in?

0 Likes