ScrewLooseSalad Posted March 12, 2013 Share Posted March 12, 2013 (edited) I want to make a form that will display different options on the second item, depending on the users input on the item before... I understand this is usually accomplished in javascript/jquery, however with my limited knowledge of javascript and jquery I was considering using a selection of iframes loading in php content, this is clearly a really inefficient method of achieving my goal, however, is it even possible to put Form elements into an iFrame? Or should I seek out the jquery? Edited March 12, 2013 by ScrewLooseSalad Quote Link to comment Share on other sites More sharing options...
yomanny Posted March 12, 2013 Share Posted March 12, 2013 You should totally learn a bit of jQuery, using iFrames for basic form manipulation would be madness! This is because you would need the iframes (the pages within the iframes) to communicate with each other, and for that you would probably need an API, and to call the API you would need to learn Javascript anyway. Trust me, it's worth the time it takes to learn jQuery, it's fantastic and you'll be surprised by how much you can do with just a few lines of code. Good luck! - W Quote Link to comment Share on other sites More sharing options...
ScrewLooseSalad Posted March 12, 2013 Author Share Posted March 12, 2013 I'm beginning to see that, trying to get this to work... are you able to point me in the right direction? an example of what I am trying to achieve can be found on the Autotrader website: http://www4.autotrader.co.uk/ the "Buy a car" form features a 'make' field that determines the contents of the 'model' field. I'd need the second part of the form to retrieve its contents from a MySQL database depending on what the user selects on the first option... Quote Link to comment Share on other sites More sharing options...
yomanny Posted March 12, 2013 Share Posted March 12, 2013 I put together a simple example, much like the car form you were talking about: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>form manipulation</title> <!-- Load jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var white_wines = new Array("Auxerrois", "Malvasia"); var red_wines = new Array("Chianti", "Barbaresco", "Rioja"); var type; $('document').ready(function() { //Once the document is ready (loaded), let's populate the wine-list with red wines listWhiteWines(); // When the changes option in the dropdown with ID 'type' $('#type').change(function() { type = $(this).children(":selected").attr("id"); // Check if white or red was selected if(type == "red") { listRedWines(); } else { listWhiteWines(); } }); }); // Function to populate the list with red wines function listRedWines() { $('#wine-list').html(''); for(var i=0; i<red_wines.length; i++) { $('#wine-list').append('<option>'+red_wines[i]+'</option>'); } } // Function to populate the list with white wines function listWhiteWines() { $('#wine-list').html(''); for(var i=0; i<white_wines.length; i++) { $('#wine-list').append('<option>'+white_wines[i]+'</option>'); } } </script> </head> <body> <form> <select id="type"> <option id="white">White wine</option> <option id="red">Red wine</option> </select> <br /><br /> <select id="wine-list"> </select> </form> </body> </html> - W Quote Link to comment Share on other sites More sharing options...
ScrewLooseSalad Posted March 12, 2013 Author Share Posted March 12, 2013 I put together a simple example, much like the car form you were talking about: - W Oh wow thanks! I'll have a thorough read through it right away 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.