dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to capture / store userís selection

  1. #1
    Join Date
    Sep 2017
    Posts
    1

    How to capture / store userís selection

    I am working on a car maintenance app and the first item in the app is a dropdown list that defines the car make and model so first drop down offers choices like Ford, Chevy, Dodge, etc. Then the next dropdown offers choices dependent on the selected option in the first dropdown.

    I found a working example that does this very nicelyÖ

    Code:
    <script>
    
    function populate(s1,s2){
    	var s1 = document.getElementById(s1);
    	var s2 = document.getElementById(s2);
    	s2.innerHTML = "";
    	if(s1.value == "Chevy"){
    	    var make = "Chevy";
    		var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    	} else if(s1.value == "Dodge"){
    	    var make = "Dodge";
    		var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    	} else if(s1.value == "Ford"){
    	    var make = "Ford";
    		var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    	}
    	for(var option in optionArray){
    		var pair = optionArray[option].split("|");
    		var newOption = document.createElement("option");
    		newOption.value = pair[0];
    		newOption.innerHTML = pair[1];
    		s2.options.add(newOption);
    	}
    }
    
    
    
    </script>

    Then here is the HTMLÖ

    HTML Code:
    	<body>
    
    	<h2>Choose Your Car</h2>
    <hr />
    Choose Car Make:
    <select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
      <option value=""></option>
      <option value="Chevy">Chevy</option>
      <option value="Dodge">Dodge</option>
      <option value="Ford">Ford</option>
    </select>
    <hr />
    Choose Car Model:
    <select id="slct2" name="slct2"></select>
    <hr />
    
    		
    	</body>
    My dilemma is that I need to capture and store both selections and I havenít been able to figure out how to accomplish that. Also I want to feed both selections back to the page with AJAX.
    So first objective is to assign both selections to variables where they will be available to use later. This isnít such a big trick for ďslct1í the problem comes in with ďslct2Ē because the elements of the list donít exist until ďslct1Ē is selected. However once ďslct2Ē is populated the user can make a selection and that selection is what I need to capture and assign to a variable. At this point I can use these variables to send the selected values to MySQL.

    Final objective is to print these selections back to the screen using AJAX.

    Can anyone help me with what Iím trying to do?

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,867

    Lightbulb

    Here's a solution for a portion of you project ...
    HTML Code:
    Choose Car Model:
    <select id="slct2" name="slct2" onchange="alert(collectInfo())"></select>
    PHP Code:
    function collectInfo() {
      var 
    rslt = [];
          
    rslt.push(document.getElementById('slct1').value);
          
    rslt.push(document.getElementById('slct2').value);
      return 
    rslt.join(',');


  3. #3
    Join Date
    Dec 2012
    Posts
    1,450
    Entering the models into an array is a fine approach. I recommend to complete this, enter all parameters inclucing those for the first select into array/objects and create the option based on these:
    Code:
        Choose Car Make:
        <select id="slct1" name="slct1" onchange="populate(this);">
        </select>
        <hr />
        Choose Car Model:
        <select id="slct2" name="slct2"></select>
        <script>
            var makes = [
                {val: "", text: "Choose a make"},
                {val: "chevy", text: "Chevy"},
                {val: "dodge", text: "Dodge"},
                {val: "ford", text: "Ford"}
            ];
            var models = {
                "chevy": [
                    {val: "", text: "Choose a model"},
                    {val: "camaro", text: "Camaro"},
                    {val: "corvette", text: "Corvette"},
                    {val: "impala", text: "Impala"},
                ],
                "dodge": [
                    {val: "", text: "Choose a model"},
                    {val: "avenger", text: "Avenger"},
                    {val: "challenger", text: "Challenger"},
                    {val: "charger", text: "Charger"}
                ],
                "ford": [
                    {val: "", text: "Choose a model"},
                    {val: "mustang", text: "Mustang"},
                    {val: "shelby", text: "Shelby"}
                ]
            };
            makes.forEach(function(item, idx) {
                var opt = document.createElement("option")
                opt.value = item.val;
                opt.innerHTML = item.text;
                slct1.appendChild(opt);
            });
            function populate(sel1) {
                var makeval = sel1.options[sel1.selectedIndex].value;
                var mdls = models[makeval];
                slct2.innerHTML = "";
                mdls.forEach(function(item, idx) {
                    var opt = document.createElement("option")
                    opt.value = item.val;
                    opt.innerHTML = item.text;
                    slct2.appendChild(opt);
                });
            }
            slct2.addEventListener("change", function() {
                var make = slct1.options[slct1.selectedIndex].innerHTML;
                var model = slct2.options[slct2.selectedIndex].innerHTML;
                var makeval = slct1.options[slct1.selectedIndex].value;
                var modelval = slct2.options[slct2.selectedIndex].value;
                // make and model are now available for further processing
                console.log(make, model);
                // Send params to script in order to enter into database
                $.ajax({
                    url: "script.php",
                    type: "POST",
                    data: {make: makeval, model: modelval},
                    success: function(output) {
                        // Callback for success
                        // parameter is output from PHP script
                        console.log(output);
                    }
                });
            });
        </script>

  4. #4
    Join Date
    Mar 2012
    Posts
    3,867
    If you need to accurately identify individual car models, you probably need a car file of literally 1,000's of different cars. This will need maintaining, as new models are added every month!

  5. #5
    Join Date
    Dec 2012
    Posts
    1,450
    I agree, that's the reason why I recommend a list based procedure as it's easier to maintain and extend. A next step might be keeping the data in a database instead of a javascript structure and getting the data for populating the second select by Ajax.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles