CODEWITHSUNDEEP
javascriptphpjqueryhtml
weeo
weeo

Reputation: 2829

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

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>

Upvotes: 0

Views: 347

Answers (3)

Atif Tariq
Atif Tariq

Reputation: 2772

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>

Upvotes: 0

Jacky Chong
Jacky Chong

Reputation: 172

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>";
}

Upvotes: 1

KAD
KAD

Reputation: 11122

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>";
}

Upvotes: 1

Related Questions