Regarding custom variables in product_form.liquid

Highlighted
Tourist
6 0 0

Here is my question.

 

I am creating custom variables in product_form.liquid. I have a dropdown and a textbox. WHat I want to do is, show the textbox only when Option 4 is selected in dropdown. Otherwise, do not show any thing. I have written a script which will be triggered when I change the option, but i am unable to use the variable to make a if condition.

 Please help!

 

This is my code

{% if template contains 'EC-Custom-Options' %}

<p class="line-item-property__field">
<label class="ep_block">Select Option</label>
<select required id="choose-an-option" name="properties[Select Option]">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
<option value="Option 4">Option 4</option>

</select>
</p>

Based on the selection in the dropdown, i should be able to write an if condition below to show or not show the textbox.

<p class="line-item-property__field">
<label for="shoulder">Shoulder</label>
<input required id="shoulder" style="width:120px; max-width:100%;" type="number" name="properties[Shoulder]" min="1" max="20">
</p>

<style>
.ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
.ep_block {display:block;margin-top:10px;margin-bottom:2px;}
</style>
{% endif %}

 

 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('select').on('change', function() {
var selected_text = $( "#choose-an-option option:selected" ).text();
alert (selected_text);
});
</script>

0 Likes