If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Add a page toggle() function to my javascript product selector

Hi guys,

I was hoping that someone could help me as I am very confused! I am still a beginner at Javascript and am desperately trying to learn!

I have written a quick form (with help!) which has 3 questions at the top - in 3 separate drop down menus. Once the 3 selections have been picked and submit is pressed - a javascript function checks the answers against a product list and then offers an image of a recommended product - as well as delivering the code for this product to a field in a web form so I can see what the user is seeing. THIS ALL HAPPENS ON ONE PAGE.

(Firstly - I realise this looks like a silly project! My website is not about 'foods' - I have swapped out the original values with foods! Also .... there will be a great many more items for the system to choose from - I just did 8 for this example.)

This all works exactly as I need but I am not finished and need to add the next function .....

In my original form - I had a page toggle() function which gave me the functionality I require. The function used radio buttons instead of drop down menus and had 4 hidden <div>'s.

Question 1 was in <div> 1 and onClick the page toggled to hide the original <div> and reveal Question 2 in <div> 2 and so on for the 3 questions. When all 3 had been answered - the answer was delivered in the final <div>.

The problem with this code was that it ONLY DISPLAYED THE VALUE OF THE RADIO BUTTON SELECTED AT THE END. This solution did not take the 3 values - join them together and offer my image of the product (food) like the first code above.

Instead of 3 questions at the top - I need the questions to toggle() one after the other (a new question appears after last is answered) and deliver the answer in the end <div> like script 2!

I hear you ask "If you have got this far - why do you not just do it yourself?!" ..... I have tried - for days!

I figured the first step would be to change the drop downs from script 1 to radio buttons. I gave each button an ID etc but when I ran the script it gave me crazy search results and often did not work at all! My next step was going to be to separate the questions into the hidden <div> as in Script 2.

I feel like I'm pretty close to getting what I need - If I can just get the toggle() working on script 1- I am finally there after weeks of slamming my head off a wall!

Is there any kindly expert who could explain how I can make the changes to script 1 to add the toggle() feature? You have no idea how much you will be helping me out!

Thanks very much for responding - I am a million miles away from having the answer - even though you are right - I did post in a few places to try and find the solution. This is mainly because no one seemed to be answering and I was / am really up against it time wise! I realise it's not technically cool to do so but when needs must and all that!

If you are willing to help then that would be great and I will certainly concentrate my efforts here in the future!

Ok .... Let me try to explain myself a bit better ......

I have a main script I am working on - lets call that "Script #1".

Script #1
----------

This script works by offering the user 3 questions on 1 page. The first 2 have 4 possible answers and the last 2 possible answers.

The Javascript takes the values attached to the given answers and then looks down the variable list until it finds a product which matches the 3 answer values.

This product name is then displayed in a field in a web form at the bottom of the page.

Further more - each product has a unique image which replaces a blank image in a different innerHTML <div> higher up the page.

The user will ultimately get an image representation of their result and the code in the form ready to email ......

--------------

When I say "This works" .... I mean - up to this point it works how I need it to. If I wanted all of the questions on 1 page - delivering the answers below - I would be set!

I need:

Only Question 1 to be visible when the user starts the process

Question 2 to REPLACE question 1 when it has been answered

So on ..... until question 3 is answered - at which point there will be the same form and innerHTML <div> to display my answers as is now.

The second script does have the toggle() function I require - it also uses radio buttons etc. The problem with this script is that, whatever I try, I can't seem to add the function which sorts through the variables and produce the product. All I can do is get it to display the value of the button selected.

The script does work but the layout etc will probably be throwing you! If you run the first one again and choose "Sour - Cold - Good" and then scroll down - you will see that it says "Your search criteria:
Food Suggestion 1 (product code in here)". I have only set a few options up for testing! In the space in between the selections and the form - is where the image displays. This only works when the site is hosted and throws up errors for me testing locally. . . . .

Thanks ever so much mate! Your code has majorly helped me to resolve the issue I was having - I have spent some time today tweaking - adding images and moving bits about and I am happy to say I am there now!

You are a star!

PS ... not sure how to say this is "resolved" ..... I assume there is a button I am missing somewhere?!

Thanks ever so much mate! Your code has majorly helped me to resolve the issue I was having - I have spent some time today tweaking - adding images and moving bits about and I am happy to say I am there now!

You are a star!

PS ... not sure how to say this is "resolved" ..... I assume there is a button I am missing somewhere?!

You're most welcome.
Happy to help.
Good Luck!

Note: To 'resolve', look at "Thread Tools" near the top of this thread. It is one of the pull-down actions.