Recent Topics

1 Dec 16, 2012 22:04    

I am working on a custom search/menu navigation for a skin. Basically, I want three select lists that give you options for browsing. If you select any from list 1, the second list gets populated with options based on what they selected, and the third list is greyed out (preventing people from using it). If they choose any from the second list, the first is populated, and the third is greyed out. If they choose from the 3rd list, the first and second are greyed out. Once they submit the form, they are taken to the correct category page for that selection.

This makes more sense if you view the skin I'm working on:
http://www.schoolofpuppetry.com.au/index.php/videos/
(Note that it currently only looks good for Firefox)

I have the basic form created, and can get the URL redirects working, but have no idea how to do the population using ajax. From the few tutorials I've seen, it's probably best to call the Mysql database for populating the lists - and so I thought maybe someone here would know of a good way to integrate the form into a plugin.

If not, I'll keep reading and see if I can figure out how to do this myself.

Thank you!

2 Dec 18, 2012 05:00

What kind of data do you want to show in the fields? It looks like you already have it filled up.

3 Dec 18, 2012 07:40

I have merely added the terms for my own reasoning out of what goes where. They do not currently lead anywhere.

1st list: four basic options, on selecting one of them populates 2nd list
2nd list: category options, on selecting one and pressing submit, sends you to the category page
3rd list: category options (but different ones to the 2nd list), on selecting one and pressing submit, sends to category page
Choosing the 2nd list cancels out the ability to use 3rd list, and vice versa.

Ie. A selection could be "I'm a puppet maker" (1st list) and "I want printable patterns" (2nd list), which sends you to the category for puppet patterns. Or, "I'm a performer" (1st list) and "I want to find other puppeteers" (2nd list).

I'm probably asking for a bit much, huh? ;)

4 Dec 18, 2012 18:11

Well, you dont have to dig too deep, if your end game is to show posts in certain category(ies), you can simply use search params such as:

blog.php?catsel[]=649&catsel[]=444&cat=

You can just add your dropdown options manually i think.You dont have to populate them with ajax as they wont get constantly updated right ?

Use category ID#s as option value's, and append them in your form action.

You can use jquery.chosen plugin to make it more stylish and functional.(You can see an example at : https://www.allhotelbook.com/advanced-search/ , Click on a country.)

5 Dec 18, 2012 19:23

Thanks tilqicom, but you misunderstand. I need the values populated because the 2nd list options are dependent on what you choose based on the 1st.

To put it into something most people can understand without necessarily knowing anything about puppetry:

Say someone comes to the site looking for info about a particular sport. Say the 1st list shows a list of sports (baseball, football, etc). The second list has info relevant to each sport. It makes no sense for people who select "baseball" from the 1st list to see options in the 2nd relevant to "rules of cricket, cricket fields, history of cricket", etc. Likewise, someone interested in learning about local baseball play times won't necessarily want to know about baseball in some other country - so this navigation is kind of like breadcrumbs, where you have #1 list which is the main categories; #2 list are subcategories of the main; #3 list is entirely separate to itself. However, I still want to show options for all and simply remove irrelevant ones based on what the person selects. Because a person might be interested in looking at baseball stuff AND learning about cricket.

Does that make sense?

I also do know how to add the URLs to the select fields, and the options are currently manually hard coded. What I'm talking about isn't help with making the form pull URLs from the database, so much as needing help getting the options to be populated on selection. -- And yes, I've run into many "country" form tutorials, and will be trying to learn that stuff too. I haven't gotten my head around it yet, hence my request here.

Anyway, from the sounds of it, I'll just try figuring this out on my own...

6 Dec 18, 2012 21:43

isnt this: http://eodepo.com/pup/

what you are trying to do ?

Just add category id's as option values 34, 45, 56 whatever, and append them to blog.php?catsel like i said.

7 Dec 18, 2012 22:39

Yes - but how do I prevent it from selecting from more than one list?

The way that is set up currently, it would have you being sent to 3 different categories...?

If I select "performer", I shouldn't be able to also select "animatronics".

Sorry, I'm just struggling to understand how to put all of it together.

8 Dec 18, 2012 23:20

"animatronics" is in list#3 right ? And you said list#3 is seperate from #1 and #2, so i assumed it will be independant of the first choise.

You can hide list#3 ( "the things you want to learn") also depending on list#1 choice.
All you have to do is group your options with an <optgroup label="performer">.If you could specify what should be available to which , i could edit it for you.

In a nutshell, i <label>ed the first "I am a" <option>s as builder,teacher,performer,buyseller.When the first <select> changes, jquery goes over the list of <option>s looking for <optgroup> labeled with "builder" etc. depending on the choice, and hides the rest, displaying the selected

9 Dec 26, 2012 06:11

Sorry for the delay, I received no email letting me know you'd replied.

I've been trying to figure out how to do this based on your info, but am struggling. I'm pretty new to coding forms and am a bit lost. I understand what you're talking about, I just can't seem to combine what you've made with the form I've designed on my site. That is, I want it to look like how I've done it on my site, but to use your functionality. What's annoying is I'd like to figure it out myself as that's how I will learn stuff like this - apologies if I seem thick.

Here are the groupings, with the correct category IDs for the values. As you can see, some categories are used more than once in list 2.

LIST 1

<option value="34" label="builder">a builder</option>
<option value="35" label="performer">a performer/director</option>
<option value="36" label="teacher">a teacher</option>
<option value="37" label="buyseller">looking to buy/sell/hire/see</option>

LIST 2

<optgroup id="builder" label="builder">
<option value="32">get print-and-use patterns</option>
<option value="71">learn the basics & theory</option>
<option value="35">learn about materials &amp; tools</option>
<option value="70">learn about puppet history</option>
<option value="59">build a set or prop</option>
<option value="57">take a workshop</option>
<option value="51">find other puppeteers</option>
<option value="62">find a book</option>
</optgroup>

<optgroup id="performer" label="performer">
<option value="71">learn the basics & theory</option>
<option value="70">learn about puppet history</option>
<option value="60">learn about performance techniques</option>
<option value="58">find a script</option>
<option value="72">do sound design</option>
<option value="61">light my show</option>
<option value="57">take a workshop</option>
<option value="51">find other puppeteers</option>
<option value="62">find a book</option>
</optgroup>

<optgroup id="buyseller" label="buyseller">
<option value="26">buy a puppet</option>
<option value="26">sell a puppet</option>
<option value="51">hire a performer</option>
<option value="51>see a show</option>
<option value="57">take a workshop</option>
<option value="51">find other puppeteers</option>
<option value="62">find a book</option>
<option value="71">learn the basics & theory</option>
<option value="70">learn about puppet history</option>
<option value="58">find a script</option>
</optgroup>

LIST 3

<option value="16">animatronics</option>
<option value="17">blacklight</option>
<option value="49">bunraku</option>
<option value="18">costume puppets</option>
<option value="19">finger puppets</option>
<option value="20">glove puppets</option>
<option value="21">marionettes</option>
<option value="13">muppet-type puppets</option>
<option value="25">object manipulation</option>
<option value="52">parade puppets</option>
<option value="48">rod puppets</option>
<option value="50">shadow puppets</option>
<option value="23">sock puppets</option>
<option value="53">table-top puppets</option>
<option value="54">toy theatre</option>
<option value="24">ventriloquism</option>
<option value="22">water puppets</option>


Form is loading...