CODEWITHSUNDEEP
javascriptphp
user3740260
user3740260

Reputation: 67

How to obtain values of dynamically created select dropdowns in php

I am trying to obtain the values of dynamically created select dropdowns from my php page. The dropdowns were added via javascript to the page.

The error that I get is Notice: Undefined index: daySelect in C:\wamp\www\responsive2\select.php on line 7

I would like to know how to access posted select dropdowns values with php. Thanks in advance.

Code follows

    <?php
    if ($_SERVER['REQUEST_METHOD'] == "POST"){

        echo "We have something";


        echo ($_POST['daySelect']); // error here


    }
    else
    {

 ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dynamic Select</title>
</head>
<body>

    <form id="theform" style="display: none" method="POST" name="theform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
     <div id="placeHere"></div>
     <button type="submit">Submit</button>
    </form>

    <button onclick="createSelect()">Create</button>
    <script>
    var elem = document.getElementById('placeHere');
    var daySelect = new Array();
    var theForm = document.getElementById('theform');
    var numSelects = 0;

    var days = ['01','02','03','04','05','06','07','08','09','10',
                            '11','12','13','14','15','16','17','18','19','20',
                            '21','22','23','24','25','26','27','28','29','30',
                            '31'];

    function createSelect()
    {
        numSelects++;
        daySelect.push(document.createElement('select'));
        daySelect[daySelect.length -1].setAttribute('id', 
        daySelect[daySelect.length -1]);
        daySelect[daySelect.length -1].name = daySelect[daySelect.length -1];
        var opt = document.createElement('option');
        opt.text = "Select";
        opt.value = "";
        //myArray[myArray.length - 1];
        daySelect[daySelect.length -1].appendChild(opt);


        for (var i = 0; i < 31; i++)
        {
            var opt = document.createElement("option");
            opt.text = days[i];
            opt.value = days[i];
            //opt.className = i;
            //optarr.push(opt[i]);
            daySelect[daySelect.length -1].appendChild(opt);
        }
        elem.appendChild(daySelect[daySelect.length -1]);
        theForm.style.display = "block";
        //alert("HI");
     }
    </script>
</body>
</html>
<?php
}
?>

Upvotes: 0

Views: 86

Answers (1)

Joel Mann
Joel Mann

Reputation: 46

You need to set your select "name" and "id" to a string name. Right now you are setting those 2 attributes to the daySelect object value, which is getting interpreted as a string, so you have:

<select id="[object HTMLSelectElement]" name="[object HTMLSelectElement]">

Update the the .setAttribute and .name lines to:

daySelect[daySelect.length - 1].setAttribute('id', 
    'daySelect' + (daySelect.length - 1));
daySelect[daySelect.length - 1].name = 'daySelect[]';

The name is set to an array because of the [], so you could just loop through $_POST['daySelect'], with PHP, using a foreach.

Change the echo to print_r to view array values in the browser.

Hope that helps.

Upvotes: 1

Related Questions