tobbsie Posted September 29, 2009 Share Posted September 29, 2009 Hello! Im sitting here and trying to make a simple thing (i thought...) but i cant get it to work. Im trying to simplify a kind of orderform. Istead of using a excel file as i use today, i thought i would be easier to do a PHP page. To show you what im having troubles with i made a little picture (see attachment). I someone want to help i would be really happy, but i understand if u don't want Is this even possible without writing a bible of code, is there an easier solution? All help/tips is welcome! Coffee is on me! Cheers! [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/175931-help-with-a-multi-level-form/ Share on other sites More sharing options...
jon23d Posted September 29, 2009 Share Posted September 29, 2009 You'll need to understand javascript fairly well to handle this, if the results are dynamic, ajax is necessary too (unless of course you don't mind hitting submit every time you change a dropdown). The onupdate() function attached to your dropdowns will need to be wired up to handle changing subsequent form elements. Link to comment https://forums.phpfreaks.com/topic/175931-help-with-a-multi-level-form/#findComment-927186 Share on other sites More sharing options...
redarrow Posted September 29, 2009 Share Posted September 29, 2009 looks good try this mate... Not the same as yours but surly works well....... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="content-language" content="en"> <title>Dynamic select elements</title> <style type="text/css"> html, body, form { padding: 0px; margin: 0px; } body { margin: 1em; font-family: Verdana, Arial, Helvetica, sans-serif; } </style> <script type="text/javascript"> <!-- function loadSelectElement(selObjId, options) { var selObj = document.getElementById(selObjId); // clear the target select element apart from the "select your..." option selObj.options.length = 1; // copy options from array of [value, pair] arrays to select box // IE doesn't work if you use the DOM-standard method, however... if (typeof(window.clientInformation) != 'undefined') { // IE doesn't take the second "before" parameter... for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0])); } else { for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null); } } function madeSelection(selObj) { var selectedValue = selObj.options[selObj.selectedIndex].value; var selectedText = selObj.options[selObj.selectedIndex].text; if (selectedValue == '--') return; if (selObj.name == 'select01') { document.getElementById('select02Container').style.display = 'block'; document.getElementById('select02').options[0].text = 'Select the breed of your ' + selectedText.toLowerCase(); switch(selectedValue) { case 'type_cat': loadSelectElement('select02', [ ['breed_persian', 'Persian'], ['breed_tabby', 'Tabby'], ['breed_siamese', 'Siamese'] ]); return; case 'type_dog': loadSelectElement('select02', [ ['breed_alsatian', 'Alsatian'], ['breed_springer_spaniel', 'Springer Spaniel'], ['breed_king_charles_spaniel', 'King Charles Spaniel'], ['breed_chihuahua', 'Chihuahua'], ['breed_shih_tzu', 'Shih Tzu'] ]); return; case 'type_bird': loadSelectElement('select02', [ ['breed_parrot', 'Parrot'], ['breed_cock', 'Cock'] ]); return; case 'type_fish': loadSelectElement('select02', [ ['breed_goldfish', 'Goldfish'] ]); return; } } // select01 if (selObj.name == 'select02') { document.getElementById('select03Container').style.display = 'block'; document.getElementById('select03').options[0].text = 'Select the colour of your ' + selectedText; switch(selectedValue) { case 'breed_persian': case 'breed_siamese': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_grey', 'Grey'], ['colour_blue', 'Blue'] ]); return; case 'breed_tabby': loadSelectElement('select03', [ ['colour_tabby', 'Tabby'] ]); return; case 'breed_alsatian': case 'breed_springer_spaniel': case 'breed_king_charles_spaniel': case 'breed_chihuahua': case 'breed_shih_tzu': loadSelectElement('select03', [ ['colour_brown', 'Brown'], ['colour_white', 'White'], ['colour_golden', 'Golden'] ]); return; case 'breed_parrot': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_yellow', 'Yellow'], ['colour_red_yellow', 'Red & Yellow'] ]); return; case 'breed_cock': loadSelectElement('select03', [ ['colour_white', 'White'], ['colour_brown', 'Brown'] ]); return; case 'breed_goldfish': loadSelectElement('select03', [ ['colour_orange', 'Orange'] ]); return; } } // select02 } //--> </script> </head> <body> <form name="myForm"> <select name="select01" id="select01" onchange="madeSelection(this);"> <option value="--">Select your pet type</option> <option value="type_cat">Cat</option> <option value="type_dog">Dog</option> <option value="type_bird">Bird</option> <option value="type_fish">Fish</option> </select> <div id="select02Container" style="margin-top:1em; display:none;"> <select name="select02" id="select02" onchange="madeSelection(this);"> <option value="--">Select your pet breed</option> </select> </div> <div id="select03Container" style="margin-top:1em; display:none;"> <select name="select03" id="select03" onchange="madeSelection(this);"> <option value="--">Select your pet colour</option> </select> </div> </form> </body> </html> Link to comment https://forums.phpfreaks.com/topic/175931-help-with-a-multi-level-form/#findComment-927200 Share on other sites More sharing options...
tobbsie Posted October 1, 2009 Author Share Posted October 1, 2009 looks good try this mate... Not the same as yours but surly works well....... Thats exactly what i wanted, thanks redarrow! Is it possible to output the selection to an textarea in an easy way? Link to comment https://forums.phpfreaks.com/topic/175931-help-with-a-multi-level-form/#findComment-928249 Share on other sites More sharing options...
redarrow Posted October 1, 2009 Share Posted October 1, 2009 so sorry all i can help with. have to ask here on the JavaScript part of the forum bro so sorry. not very good with jscript / ajax... Link to comment https://forums.phpfreaks.com/topic/175931-help-with-a-multi-level-form/#findComment-928252 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.