Navigate to new section when value in dropdown changes

My situation isn’t all that complicated other than the fact that I am clueless on how to even get started. I have an “Employment Status” dropdown with several selections, such as “Full-time Student” and “Working Full-time”. Depending on what they select in the dropdown I want them to go to that specific section to answer questions based on their selection. Pretty sure that’s possible but just need some guidance in getting it to work. Much appreciate any help.

Hi,

Welcome to the forums :slight_smile:

So you want the browser to navigate to another page(?) when the value of the dropdown changes. Did I get that right?

I could not find your response using the link in the email. I searched your profile for your posts to find it.

What I would like is to send the user to a specific section, not page, of my form based on their selection in the drop down. For example selecting “full-time student” would bypass the employment section and fo to the Education section. Appreciate your help.

I split your post into a separate thread, as (as far as I could tell), the issues aren’t related.

Could you post a link to your form?

http://prismcareernetworks.com/prism_wordpress/wp-content/forms/registration_candidate/registration_form_candidate.html

If you just want to jump to another section on the page, use anchor tags:

<div id="section_1">Section 1</div>
<div id="section_2">Section 2</div>
<div id="section_3">Section 3</div>
<div id="section_4">Section 4</div>
<div id="section_5">Section 5</div>

<select>
    <option value="#section_1">Section 1</option>
    <option value="#section_2">Section 2</option>
    <option value="#section_3">Section 3</option>
    <option value="#section_4">Section 4</option>
    <option value="#section_5">Section 5</option>
</select>

var sel = document.querySelector("select");

sel.onchange = function(){
   window.location = this.options[this.selectedIndex].value;
}

Here’s a demo

Thanks! Okay, I don’t want to sound completely clueless, but I want to get it right. I would enclose the various sections which refer to each dropdown in <div> section IDs, but I’m a little unclear on where the <select> and javascript function goes.

You don’t need to work with divs necessarily - any element with an unique identifier will do.

The select goes where it would normally go (its your “Employment Status” dropdown) and the JS goes in <script> tags at the end of the document (just before the closing body tag).
You could also put your JS in a separate file, which is a good idea if you have more than a few lines.