Solved

Populate a select drop down OR show input box based on selection in previous dynamically populated drop down

Posted on 2016-10-27
10
65 Views
Last Modified: 2016-11-25
Greetings!  I have a form where wedding guests choose the wedding party from a drop down,  then based on their choice, another drop down will display OR an input box will display.  And the first drop down with the wedding parties is dynamically populated from an Access table.

There is only one wedding party with 4 choices of deposit amounts.  The guests of the other wedding parties will fill in what they need to pay that's why I only need an input box for them.

 Is this possible?  Thanks in advance.
0
Comment
Question by:meldraper
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
10 Comments
 
LVL 9

Expert Comment

by:James Bilous
ID: 41862559
Yes, in your dropdown list of wedding parties, annotate the special one that requires the dropdown of amounts with a data parameter so that you can handle it differently in jquery. Something like:

<select id="amountSelect">
  <option value="party1">party1</option>
  <option value="party2" enumerated="true">party2</option>
  <option value="party3">party3</option>
  <option value="party4">party4</option>
</select>

Open in new window


$("#amountSelect").change(function() {
   if ($("#amountSelect option:selected).attr("enumerated") !== undefined
   {
      //Create your dropdown
   } 
   else
   {
      //Create your input
   }
});

Open in new window

0
 

Author Comment

by:meldraper
ID: 41862587
I love this.  I'll try it right now...
0
 

Author Comment

by:meldraper
ID: 41862616
James, I'm getting an error on this line and I don't know enough about JQuery to figure it out.

 if ($("#amountSelect option:selected).attr("enumerated") !== undefined
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 9

Accepted Solution

by:
James Bilous earned 500 total points
ID: 41862624
Oops, sorry, forgot a quote and a paren.

$("#amountSelect").change(function() {
   if ($("#amountSelect option:selected").attr("enumerated") !== undefined)
   {
      alert('enumerated');
   } 
   else
   {
      alert('input');
   }
});

Open in new window

0
 

Author Comment

by:meldraper
ID: 41862637
This is just great!  how do i add my select and input box?
0
 
LVL 9

Assisted Solution

by:James Bilous
James Bilous earned 500 total points
ID: 41862660
Check out this JS Fiddle, essentially you have the elements on the page already and show / hide them depending on the selection

https://jsfiddle.net/9jfg3mbu/
0
 

Author Comment

by:meldraper
ID: 41862680
Brilliant, thank you so much!!
1
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41862713
Just want to note here that data attributes should be prefaced with the keyword "data".  An attribute called "enumerated" is not valid HTML.

The correct structure is:

<option value="party2" data-enumerated="true">party2</option>

Open in new window


And the correct way to access the attribute is:

if ($("#amountSelect option:selected").data("enumerated") !== undefined)

Open in new window

0
 

Author Comment

by:meldraper
ID: 41862730
Thank you!
0
 

Author Closing Comment

by:meldraper
ID: 41901935
Thank you.
0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question