How to make a dynamic drop-down menu with php in javascript?

Question

I was trying to make a dropdown menu with dynamic contents from php elements in javascript, but when I click on the button add item, nothing happened. the elements from php is stored in $item[]

<script>
function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = "<select name="i1[]">
            <?php 
                echo "<option selected disabled>Choose Item Code</option>";
                $i=0;
                while(!empty($item[$i]))
                {
                    echo "<option value=".$item[$i].">".$item[$i]."</option>";
                    $i++;
                }
             ?></select>";
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}
</script>

Just pointing out there is an error in your line cell1.innerHTML = "<select name="i1[]">, you are using double quotes around "i1[]" when I think you probably mean to use 'i1[]'. — Chris Tomich
– Chris Tomich, Commented Mar 16, 2016 at 6:08
@ChrisTomich he should do it the other way around: use single quotes for all JS strings thus allowing you to use double quotes (the standard) for your HTML. @weeo it should be '<select name="i1[]"> and then at the end: </select>'; — Matthew Herbst
– Matthew Herbst, Commented Mar 16, 2016 at 6:11

Jacky Chong · Accepted Answer · 2016-03-16 06:22:00Z

1

Your should add "+" symbol after every line that you generated by PHP

function addInput()
{
        var table = document.getElementById("item");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = ""+
            "<select name='i1[]'>"+
                <?php 
                        echo "'<option selected disabled>Choose Item Code</option>'+";
                        $i=0;
                        while(!empty($item[$i]))
                        {
                                echo "'<option value=".$item[$i].">".$item[$i]."</option>'+";
                                $i++;
                        }
                 ?>
        "</select>";
        cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
        cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}

answered Mar 16, 2016 at 6:22

Jacky Chong

1721 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

weeo Over a year ago

Thank you! what happened when I don't have the +?

KAD · Accepted Answer · 2016-03-16 06:14:37Z

1

You need to quote the code you are echoing with PHP since it will be considered and executed as javascript code not as string quotes that shall be assigned to the innerHTML property.

Besides, you shall concatenate the options.

It is better to build your select with PHP variables where you add all the options to it and then assign it one shot to the cell innerHTML

function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    <?php 
        $i=0;
        $select = "<select name='i1[]'";
        $options = "<option selected disabled>Choose Item Code</option>";
        while(!empty($item[$i]))
        {
           $options .= "<option value=".$item[$i].">".$item[$i]."</option>";
            $i++;
        }

        $select .= $options . "</select>";
     ?>

    cell1.innerHTML = "<?php echo $select;?>";
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}

answered Mar 16, 2016 at 6:14

KAD

11.2k4 gold badges34 silver badges75 bronze badges

1 Comment

weeo Over a year ago

thank you! it works. Why it doesn't work using the simple "->' fix?

Atif Tariq · Accepted Answer · 2016-03-16 06:31:54Z

Use it like this:

<script>
function addInput()
{
    var table = document.getElementById("item");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    cell1.innerHTML = '<select name="i1[]">
            <?php 
                echo "<option selected disabled>Choose Item Code</option>";
                $i=0;
                while(!empty($item[$i]))
                {
                    echo "<option value=".$item[$i].">".$item[$i]."</option>";
                    $i++;
                }
             ?></select>';
    cell2.innerHTML = "<input type='text' name='q1[]' size=10>";
    cell3.innerHTML = "<input type='text' name='p1[]' size=10>";
}
</script>

Collectives™ on Stack Overflow

How to make a dynamic drop-down menu with php in javascript?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related