Display or hide form fields based on dropdown selection

Highlighted
Tourist
18 0 0

Hi,

I've spent a few hours today trying to figure out how to create conditional form logic in liquid with javascript, to look similar to this form: 

https://juliewitmermaps.myshopify.com/pages/contact

It works with a third-party solution, but I would very much like to know how to do it with liquid. I use the Debut theme. This is about the 10th iteration, and I've been googling and trying everything I can think of. I've found solutions that should work, but they don't and I don't know why. 

Any help would be greatly appreciated. As mentioned, I have a third-party form for now, but I want to know how to do this myself. Even a link to something that does work with Shopify would be fantastic. Thanks!

---------------

HTML:

        <label for="ContactFormReason">What would you like to talk about? (required)</label>
  <select required id="ContactFormReason" name="contact[Reason]">
          <option value="">-- select one --</option>
            <option value="project" onchange="ShowHideDiv(this.value)">I have a map project</option>
            <option value="question" onchange="ShowHideDiv(this.value)">I have a question</option>
    <option value="feedback" onchange="ShowHideDiv(this.value)">I have website feedback</option>
            <option value="other" onchange="ShowHideDiv(this.value)">Other</option>            
  </select>
  
<div id="div1">
          <textarea required rows="10" id="{{ formId }}-description" placeholder="Describe your project (required)" name="contact[{{ 'contact.form.description' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </div>
<div id="div2">
          <textarea required rows="10" id="{{ formId }}-message" placeholder="Message (required)" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </div>

-------------

in Theme.JS:

$ContactFormReason.on('change', function(ShowHideDiv) {

var Reason = document.getElementById("ContactFormReason"); {
if (Reason == 'project')
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
else
document.getElementById("div2").style.display = "none";
document.getElementById("div1").style.display = "block";
}

--------------

0 Likes
Highlighted
Astronaut
1083 178 213

Hello,

You wouldn't be able to do this with liquid only since Liquid is rendered only on page load and can't watch changes, unlike Javascript.

I reckon that your current logic is the best bet.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
Tourist
18 0 0

Hi,

Thanks, I want to use javascript to watch changes, that's why I put it in the theme.js. Seems like there's javascript in there for some of the product pages. How can I make the code I included in my previous post work? It doesn't work now.

 

0 Likes
Highlighted
Tourist
18 0 0

I've tried a couple of other things, and pared down the form to just one field and two display blocks to make this as easy as possible to troubleshoot.

I created a new contact page template and put all the code in it (based on a suggestion elsewhere in the forum about adding javascript to forms). So this is the entire content of my test form. Can anyone see any reason why it won't work? Do I need to call javascript in the page? I thought that by putting it in the page I wouldn't need to call an external asset.

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}

<select required id="ContactFormReason" name="contact[Reason]" onchange="ShowHideDiv()">
<option value="other">Other</option>            
<option value="project">I have a map project</option>
 </select>

<div id="div1" style="none">
<textarea required rows="10" id="{{ formId }}-message" placeholder="Message (required)" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>

<div id="div2">
<textarea required rows="10" id="{{ formId }}-description" placeholder="Describe your project (required)" name="contact[{{ 'contact.form.description' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>
               
  <script>
function ShowHideDiv() {
  var x = document.getElementById("ContactForm")["contact[Reason]"].value;
    if (x === "project" | {
        document.getElementById("div1").style.display = "block";
        document.getElementById("div2").style.display = "none";
    }else {
        document.getElementById("div2").style.display = "block";
        document.getElementById("div1").style.display = "none";  
        }
}
</script>
        <input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

        {% endform %}
      </div>
    </div>
  </div>
</div>
 

 

0 Likes