ravi_k Posted October 24, 2018 Share Posted October 24, 2018 Hi I am new to HTMLprogramming I got some code online which has multiple dropdowns but when "show selections " is pressed.it alerts the selected items. My need is, it should submit all the selected items from dropdown <html> <head> <title> 1- to 4-level Drop Down</title> <style type="text/css"> .DDlist { display:none; } </style> <script type="text/javascript"> // From: http://www.codingforums.com/showthread.php?t=202456 // and: http://www.codingforums.com/showthread.php?t=169465 // Modified for 1 to 4 (+) level drop down selections var categories = []; categories["startList"] = ["Apparel","Books",'Radio','True','False']; // Level 1 (True|False is 1 level only) categories["Apparel"] = ["Men","Women"]; // Level 2 categories["Men"] = ["Shirts","Ties","Belts"]; // Level 3 categories['Shirts'] = ['Tux','Button-down','Polo',"T's"] // Level 4 categories['Ties'] = ['Silk','String','Bow'] // Level 4 categories['Belts'] = ['Leather','Cloth'] // Level 4 categories["Women"] = ["Blouses","Skirts","Scarves"]; // Level 3 categories["Blouses"] = ["Silk","Cotton","Polyester"]; // Level 4 only categories["Skirts"] = ["Full","Pleated"]; // Level 4 only categories["Scarves"] = ["Head","Neck","Waist"]; // Level 4 only categories["Books"] = ["Biography","Fiction","Nonfiction"]; // Level 2 categories["Biography"] = ["Contemporary","Historical","Other"]; // Level 3 only categories["Fiction"] = ["Science","Romance"]; // Level 3 only categories["Nonfiction"] = ["How-To","Travel","Cookbooks"]; // Level 3 only categories['Radio'] = ['AM','FM','HD']; // Level 2 only var nLists = 4; // number of lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms[0]['List'+i].length = 1; document.forms[0]['List'+i].selectedIndex = 0; document.getElementById('List'+i).style.display = 'none'; } var nCat = categories[currCat]; if (nCat != undefined) { document.getElementById('List'+step).style.display = 'inline'; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } } function getValues() { var str = ''; str += document.getElementById('List1').value+'\n'; for (var i=2; i<=nLists; i++) { if (document.getElementById('List'+i).selectedIndex != 0) { str += document.getElementById('List'+i).value+'\n'; } } alert(str); } function init() { fillSelect('startList',document.forms[0]['List1']); } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); </script> </head> <body> <form action="" onsubmit="return false"> <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Make a selection</option> </select> <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist"> <option selected>Make a selection</option> </select> <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist"> <option selected >Make a selection</option> </select> <select name='List4' id="List4" class="DDlist"> <option selected >Make a selection</option> </select> <!-- can add more levels if desired as "List5"+ --> <button onclick="getValues()">Show selections</button> </form> </body> </html> How to modify it .Please suggest Thanks with regards Ravi K Link to comment Share on other sites More sharing options...
Funce Posted October 24, 2018 Share Posted October 24, 2018 This doesn't require anything particularly special. If you want AJAX, you can change the `getValues()` function to send an AJAX request with the FormData object as the payload. Look here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects If you don't need AJAX, then a standard form submission would take care of this easily. Remove the onClick method and change the button type to "submit". That would submit as per a normal form. (Sending through the action URL) Link to comment Share on other sites More sharing options...
ravi_k Posted October 25, 2018 Author Share Posted October 25, 2018 Hi Now am able to submit it. But while submitting it shows output as List1=Apparel&List2=Men&List3=Shirts&List4=Tux instead how to link above code with values. I mean as List1=0&List2=1&List3=2&List4=3 Is there a way to link....but in array same names can be used as apparel men etc but while submit i need it as values..How to link it Please suggest Thanks with Regards Ravi K Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 Normally you would use server side language such as PHP, to read the submitted index names ('List1', List2 etc) and there values. Because there is no 'action' attribute with url with no 'method', it will submit to itself using default 'method' of GET. This means the page must use the server side language extension *.php to read the submitted form data. Link to comment Share on other sites More sharing options...
ravi_k Posted October 25, 2018 Author Share Posted October 25, 2018 Hi Thanks for the reply. Actually form action i have changed and method to post. here my problem is , when it sends to server as "List1=Apparel&List2=Men&List3=Shirts&List4=Tux " i am parsing the string using c code for alphabets..i remove all the alpahbets and =&.. so that only values are available and i can use it. for this multiple dropdown also, i need values so that i can parse alphabets. How to do it.Please help Thanks with Regards Ravi K Link to comment Share on other sites More sharing options...
Funce Posted October 25, 2018 Share Posted October 25, 2018 If you can figure out a method to string manipulate it, you could turn it into some array monstrosity, but you should be able to create a dictionary type thing from it. If you split the `List1 etc` by `&` and then split by `=`, you'll have an array that hopefully looks similar in structure to something like this. [ ["List1", "Apparel"], ["List2", "Men"], ["List3", "Shirts"], ["List4", "Tux"] ] I'm not too familiar with C, personally, but you could look into this for splitting and using a dictionary type structure:https://prdeving.wordpress.com/2017/04/24/how-to-parse-key-value-strings-into-associative-arrays-in-ansi-c89/ Link to comment Share on other sites More sharing options...
dsonesuk Posted October 25, 2018 Share Posted October 25, 2018 I don't understand? it seems you retrieving all submitted post data using Request.Form on its own, when you can target specific key of posted data using Request.Form("List1"); //shows value Apparel Request.Form("List2"); /// shows Men etc without the need of splitting or removing? If you are sending as a complete string of "List1=Apparel&List2=Men&List3=Shirts&List4=Tux", that seems pointless, as that's what Request.Form will contain? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now