Display/hide custom fields based on selection

dcustomize1 · March 21, 2022, 5:31pm

Hello everyone

Below is a link to what I want to achieve. I want to display number of fields based on the number a user selects. I used JSfiffle to work and edit the code, the issue is how to move it to Shopify. I tried moving it to shopify but nothing happened. Below is the link to the code and how it the function works as well as the codes involved.

https://jsfiddle.net/iteire2/ym93bvwe/

HTML

[details=Show More]

[details=Show More]

JAVASCRIPT

@

$(“#seeAnotherField”).change(function() {
if ($(this).val() == “1”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).hide();
$(‘#otherFieldDiv3’).hide();
$(‘#otherFieldDiv4’).hide();
$(‘#otherFieldDiv5’).hide();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else if ($(this).val() == “2”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).show();
$(‘#otherFieldDiv3’).hide();
$(‘#otherFieldDiv4’).hide();
$(‘#otherFieldDiv5’).hide();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else if ($(this).val() == “3”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).show();
$(‘#otherFieldDiv3’).show();
$(‘#otherFieldDiv4’).hide();
$(‘#otherFieldDiv5’).hide();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else if ($(this).val() == “4”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).show();
$(‘#otherFieldDiv3’).show();
$(‘#otherFieldDiv4’).show();
$(‘#otherFieldDiv5’).hide();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else if ($(this).val() == “5”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).show();
$(‘#otherFieldDiv3’).show();
$(‘#otherFieldDiv4’).show();
$(‘#otherFieldDiv5’).show();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else if ($(this).val() == “6”) {
$(‘#otherFieldDiv’).show();
$(‘#otherFieldDiv2’).show();
$(‘#otherFieldDiv3’).show();
$(‘#otherFieldDiv4’).show();
$(‘#otherFieldDiv5’).show();
$(‘#otherFieldDiv6’).show();
$(‘#otherField’).attr(‘required’, ‘’);
$(‘#otherField’).attr(‘data-error’, ‘This field is required.’);
} else {
$(‘#otherFieldDiv’).hide();
$(‘#otherFieldDiv2’).hide();
$(‘#otherFieldDiv3’).hide();
$(‘#otherFieldDiv4’).hide();
$(‘#otherFieldDiv5’).hide();
$(‘#otherFieldDiv6’).hide();
$(‘#otherField’).removeAttr(‘required’);
$(‘#otherField’).removeAttr(‘data-error’);
}
});
$(“#seeAnotherField”).trigger(“change”);

$(“#seeAnotherFieldGroup”).change(function() {
if ($(this).val() == “yes”) {
$(‘#otherFieldGroupDiv’).show();
$(‘#otherField1’).attr(‘required’, ‘’);
$(‘#otherField1’).attr(‘data-error’, ‘This field is required.’);
$(‘#otherField2’).attr(‘required’, ‘’);
$(‘#otherField2’).attr(‘data-error’, ‘This field is required.’);
} else {
$(‘#otherFieldGroupDiv’).hide();
$(‘#otherField1’).removeAttr(‘required’);
$(‘#otherField1’).removeAttr(‘data-error’);
$(‘#otherField2’).removeAttr(‘required’);
$(‘#otherField2’).removeAttr(‘data-error’);
}
});
$(“#seeAnotherFieldGroup”).trigger(“change”);

CSS

form {

max-width: 900px;

display: block;

margin: 0 auto;

}

@diego_ezfy @Alex135

Laura-Hirtop · March 23, 2022, 7:08am

Hello Dcustomize1,

First of all, i think you should detect the template/section in which you would like the form to appear and add the html on that place. After that, you should add the javascript in order for it to work but, most of the themes in shopify have the main javascript in one big file (theme.js/main.js it depends), that is very well structured. I would not recommend to make any changes there. Also, they might as well not import and use that specific file, but a minified version of it (theme.min.js or main.min.js), for multiple reasons. What I would do, is to create a separate js file (maybe custom.js or form.js or whatever) in the assets folder, add there the functionality of the form, and import it on the theme.

This would help you add js for your theme for any functionality you want and it makes it easier for you to keep your custom functions grouped all together and organized. After creating the file in the assets folder, you should go to your theme.liquid, inside the tag, and try finding something similar to this:

{{ ‘theme.min.js’ | asset_url | script_tag }}
The name inside the ‘’ is not relevant, but there is the place where you should import your file as well, using the same code:

{{ ‘your-file-name.js’ | asset_url | script_tag }}
And then… that’s it. It should work now. But, your fiddle is using jquery as well, if on the page the form doesn’t work, check the dev tools and if you get an error similar to “$ is not defined”, it means you have to import jquery in your theme. Let me know if that is the case.

Topic		Replies	Views
Show and hide upload text field depending on selected variant Technical Q&A	0	97	August 30, 2020
Making product variants show different numbers of input fields based on the selection Store Design product-supplier , customizations , troubleshooting , product-page , Suppliers	2	132	August 30, 2025
Custom field not adding anything to cart Technical Q&A javascript , css , html	3	60	September 18, 2024
Implementing conditional logics in Shopify Forms Shopify-Diskussionen	4	570	August 15, 2026
Show and hide custom fields based on variants Store Design design , customizations , css , shopify-themes , troubleshooting , html , product-page	4	107	February 2, 2024

Display/hide custom fields based on selection

Related topics