dc_jt Posted February 15, 2008 Share Posted February 15, 2008 Hi Ive got a form which contains questions such as "Choose your shape" with 2 images as the answers and other questions such as "choose your flavour" with 4 images as answers to this question. How should I go about coding this form? Im guessing each answer will sort of act like a radio button but I dont want to actually display the radio button just the image as selected or not. (Selected will have a selected class with it) How do I do this? Is it better to do this with ajax? Thanks Quote Link to comment Share on other sites More sharing options...
marcus Posted February 15, 2008 Share Posted February 15, 2008 You can have them act as image submit buttons. Quote Link to comment Share on other sites More sharing options...
dc_jt Posted February 15, 2008 Author Share Posted February 15, 2008 What do you mean? just submit the form every time someone clicks an image?? Quote Link to comment Share on other sites More sharing options...
marcus Posted February 15, 2008 Share Posted February 15, 2008 well that's the only option i thought of Quote Link to comment Share on other sites More sharing options...
dc_jt Posted February 18, 2008 Author Share Posted February 18, 2008 Anyone else got any ideas? Im not quite sure what the best way is, I cant see how submitting the form everytime will work. If I have a question saying "Please choose flavour?" with 3 answers and I click answer 2, this will then change this answer(image) to the selected class as well as storing the answer as answer 2. Any idea? Thanks Quote Link to comment Share on other sites More sharing options...
uniflare Posted February 18, 2008 Share Posted February 18, 2008 i believe this is in fact a javascript question, if you want to submit the form just once you will need to use javascript to change say, a "hidden" text field for each question, every time someone clicks an image a javascript function on the page changes the value of the hidden fields. Quote Link to comment Share on other sites More sharing options...
redarrow Posted February 18, 2008 Share Posted February 18, 2008 just use the shapes as normal links........... Quote Link to comment Share on other sites More sharing options...
uniflare Posted February 18, 2008 Share Posted February 18, 2008 this is javascript, i have just researched and made this, it works on its own as html file, im sure you can incorporate it into your script: <html> <head> <title>test</title> <script type="text/javascript"> function flavourclick(answer) { document.quiz.flavour.value = answer } function shapeclick(answer) { document.quiz.shape.value = answer } </script> </head> <body> <form action="test.html" method="get" name="quiz"> What Flavour?<br> <input type="hidden" name="flavour" value=""> <img src="image1.jpg" alt="chocolate" width="100" height="100" onclick="flavourclick('chocolate');"><br> <img src="image1.jpg" alt="vanilla" width="100" height="100" onclick="flavourclick('vanilla');"><br> <img src="image1.jpg" alt="blueberry" width="100" height="100" onclick="flavourclick('blueberry');"><hr> What Shape?<br> <input type="hidden" name="shape" value=""> <img src="image1.jpg" alt="square" width="100" height="100" onclick="shapeclick('square');"><br> <img src="image1.jpg" alt="circle" width="100" height="100" onclick="shapeclick('circle');"><br> <img src="image1.jpg" alt="rectangle" width="100" height="100" onclick="shapeclick('rectangle');"><hr> <input type="submit"> </form> </body> </html> notice the functions flavourclick() and shapeclick(), you will need a function for each question (i am unsure how to make a single function for all with my limited knowledge) hope this helps, good luck Quote Link to comment Share on other sites More sharing options...
dc_jt Posted February 18, 2008 Author Share Posted February 18, 2008 Thanks for your help. Ive ended up doing it using Ajax but I have one more question. Basically one of the questions can have 2 answers so a checkbox would be great here, however I am not allowed to use a checkbox, therefore I need to find a way of being able to have two answers. At the moment whatever answer I click gets updated to a "selected" class and the hidden input field is populated with what I click. How can I turn this into having two answers? I could have two hidden inputs, answer one and answer two but how do I keep both classes as selected? This sounds straight forward but it updates the answer using whatever answer is posted and only 1 answer can be posted, I need to keep both values. Any ideas? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.