Forum

Thread tagged as: Question, Shop

Tax Workaround

Hi!

I'm trying to create a dynamic form where a COUNTY select field is displayed in the address form if a certain STATE is first selected.

I know that there are ways to do this with JS looking at the value of the select option...

<select>
    <option value="1">State 1</option>
    <option value="2">State 2</option>
</select>

But I'm not sure how to accomplish this and get the info to Perch, because with Perch I've been doing this:

<perch:input type="select" options="State 1, State 2" id="state" label="State" allowempty="false" required="true" placeholder="select state"/>

Thank you!

p.s. later in this workaround I plan to use the COUNTY selection as the "tax location" Hopefully that works out :D
Olympia Kyriakides

Olympia Kyriakides 1 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

I'm not sure I follow - if that's what you've been doing, what's stopping you continuing with that method?
Olympia Kyriakides

Olympia Kyriakides 1 points

5 years ago

For example, with the Perch template, I'm not sure how to assign a value to a particular STATE in the options list.

...so that I can then use JS to display another form field if "New York" was selected.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

You can use a pipe to split the label and value:

options="House|house, Apartment|apartment, Room-share|roomshare"

https://docs.grabaperch.com/docs/templates/attributes/type/select/
Olympia Kyriakides

Olympia Kyriakides 1 points

5 years ago

Test #1 works---the 'id="countySelect"` div appears:

<select id="state" onchange="stateSelectCheck(this);">
<option>CT</option>
<option>NY</option>
</select>

<div id="countySelect" style="display:none;">
please select your county
</div>

<script>
 function stateSelectCheck(stateSelect)
{
    if(stateSelect){
        stateValue = document.getElementById("state").value;

        if(stateValue == 'NY'){
            document.getElementById("countySelect").style.display = "";
        }
        else{
            document.getElementById("countySelect").style.display = "none";
        }
    }
    else{
        document.getElementById("countySelect").style.display = "none";
    }
}
</script>

Test #2 Does not---the 'id="countySelect"` div does not appear:


<perch:input type="select" options="CT|CT, NY|NY" id="state" label="State" allowempty="false" required="true" placeholder="select state" onchange="stateSelectCheck(this);" /> 

<div id="countySelect" style="display:none;">
please select your county
</div>

<script>
 function stateSelectCheck(stateSelect)
{
    if(stateSelect){
        stateValue = document.getElementById("state").value;

        if(stateValue == 'NY'){
            document.getElementById("countySelect").style.display = "";
        }
        else{
            document.getElementById("countySelect").style.display = "none";
        }
    }
    else{
        document.getElementById("countySelect").style.display = "none";
    }
}
</script>

I'm not sure how to get #1 results within #2's perch template..?
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Is this one form or two?
Olympia Kyriakides

Olympia Kyriakides 1 points

5 years ago

Just one form, I'm trying to add it to addresses edit.html so that when a customer adds an address and they are from New York, they are prompted to also select a county. I don't want people from other states to make this county selection.
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

Ok - so doesn't that come down to your JavaScript? I'm utterly unclear as to what I'm being asked here.
Olympia Kyriakides

Olympia Kyriakides 1 points

5 years ago

Sorry Drew, this was the issue I was having: https://forum.grabaperch.com/forum/03-30-2016-javascript-submit-form-on-change

I'm using a better jQuery solution and it's working fine.