Text Box Appear after Selecting drop down option

Highlighted
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
Highlighted
Shopify Partner
1145 230 298

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.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes