Conditional Drop-down Menu for Form

  • 30 September 2016
  • 10 replies
  • 38 views
edang

Is there a way to have my “State” drop-down menu only show when the US is selected? Same goes for Canada?

10 replies

Stefano
Userlevel 7
Badge +4

Hey @edang, is this for a form?

edang

Yes, whoops, should’ve clarified that.

Stefano
Userlevel 7
Badge +4

@edang you should be able to do this with some conditional CSS. Let me see if I can dig up some old code for you!

edang

@Stefano were you able to find anything?

Stefano
Userlevel 7
Badge +4

Sorry for the late reply. Looks like this was used on a page that is no longer active. I’m going to attempt to locate the files and (hopefully) get you the script by end of day.

Sorry for the delay!

edang

Any luck? So sorry for bugging. We are waiting to launch a campaign.

Stefano
Userlevel 7
Badge +4

No luck - sorry about that 😦

Maybe @Hristian or @digibomb can chime in?

digibomb
Userlevel 6
Badge +1

I unfortunately do not have an answer here either - sorry.

edang

Anyway of getting the content from this old forum? Conditional Forms (aka Form Logic)

Johnny_Opao
Userlevel 3

Hey edang

This is possible but it may require a bit of conditional code depending on how many fields you are showing/hiding. There also may be some visual side effects.

One being that the other elements/fields on the page do not re-adjust or re-align when an element is hidden. This is because elements on your pages are not relatively positioned, but are positioned with exact coordinates.

I don’t have a plug and play script for you, but if you want to try whipping something up yourself, here’s a script to guide you in the right direction.

<script>
  $("#country").live('change', function() {

  switch ($(this).val()) {

    case 'United States':
      	// Add code here to show and hide fields
        break;
    case 'Canada':
     	// Add code here to show and hide fields
        break;
    default:
        // Add code here to hide all fields
  }

});

</script>

I’d suggest looking into jQuerys .hide and .show methods for actually hiding/showing the fields

http://api.jquery.com/hide/
http://api.jquery.com/show/

Hope that helps!

Reply


Terms & ConditionsCookie settings