No options in my table. How to call database in Javasript?

Discussion in 'JavaScript' started by dj_aoi, Dec 30, 2011.

  1. #1
    Hi all, I need a help.
    I'm going to the point about my problem here.

    I have two tables:
    -Table : tb_main
    tb_main.JPG

    -Table: tb_sub_main
    tb_main.JPG

    I've made a form table for inputing, which the code is:
    
    <script language="JavaScript" src="../js/form_validation.js"></script>
    <script language="JavaScript" src="../js/addRow.js"></script>
    
    <?php
    opendb();
    $query = "SELECT * FROM tb_main";
    $result = mysql_query($query);
    closedb();
    ?>
    
    <body>
    <table>
        <tr>
            <td></td>
            <td><p><b>Add</b></p></td>
        </tr>
    </table>
    
    <form name="add" method="POST" action="add.php">
    <input type="hidden" name="menu_id" value="<?= $menu_id ?>">
    <table align="center" class="table1" cellspacing="1">
        <tr>
            <td class="tablesubtitle">PC</td>
            <td class="tablesubtitle"><select name="category">
                    <option value="#">&nbsp;</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">PN</td>
            <td class="tablesubtitle"><select name="pn" onChange="PN(this);">
                    <option value="#">&nbsp;</option>
                    <?php
                        opendb();
                        $query = "SELECT * FROM tb_product
                                  GROUP BY PN";
                        $result = querydb($query);
                        while ($data = mysql_fetch_array($result)){
                            echo "<option value='".$data['PN']."'>".$data['PN']."</option>";
                        }
                    ?>
                </select>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle"> PCD</td>
            <td class="tablesubtitle"><div id='pcd'><select>
                                        <option value="#">&nbsp;</option>
                                    </select>
                                    </div>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">GR</td>
            <td class="tablesubtitle"><div id ='gr'><select>
                                        <option value="#">&nbsp;</option>
                                    </select>
                                    </div>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">CR</td>
            <td class="tablesubtitle"><div id ='cr'><select>
                                        <option value="#">&nbsp;</option>
                                    </select>
                                    </div>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">AR</td>
            <td class="tablesubtitle"><input type="text" name="ar" size="2"></td>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">CC</td>
            <td class="tablesubtitle"><input type="text" name="cc" size="2"></td>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">MGL</td>
            <td class="tablesubtitle"><input type="text" name="mgl" size="2"></td>
            </td>
        </tr>
        <tr>
            <td class="tablesubtitle">KFTP</td>
            <td class="tablesubtitle">
                <table border="1" bordercolor="#7695CC" id="table2">
                    <tr>
                        <td class="tablesubtitle" align="center">No urut</td>
                        <td class="tablesubtitle" align="center">Name</td>
                        <td class="tablesubtitle" align="center">Name Sub</td>
                        <td class="tablesubtitle" align="center">Point</td>
                        <td class="tablesubtitle" align="center">Action</td>
                    </tr>                    
                    <tr>
                        <td>1</td>
                        <td><select name="main" onChange="DynamicCName(this);">
                                        <option value="#">&nbsp;</option>
                                        <?php
                                            opendb();
                                            $query = "SELECT * FROM tb_main";
                                            $result = mysql_query($query);
                                            while($data = mysql_fetch_array($result)){
                                                $cID = $data['C_ID'];
                                                $cName = $data['C_Name'];
                                                echo "<option value='$componentID'>$cName</option>";
                                            }
                                        ?>
                                                </select>
                        </td>
                        <td><div id='submain'><select>
                                        <option value="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                                        
                                                </select>
                                                </div>
                        </td>
                        <td align="center"><input type="text" name="point" value="" readonly='point' size ="2"></td>
                        <td align="center"><input type="button" value=" + " onClick="addRowToTable();"> | <input type="button" value=" - " onClick="removeRowFromTable();"></td>
                    </tr>
                    
                </table>
            </td>
        </tr>
        <tr>
            <td></td>
            <td align="center"><input type="submit" value="Submit"></td>
        </tr>
    </table>
    </form>
    
    PHP:


    the result of form something like this:
    tb_main.JPG

    On the right KFTP field name, there are No, Name, Name Sub, Point, and Action.
    (see an arrow pointing to number two). If I click plus or add button at the action number one, row number two is show up BUT no options in the Name and Name Sub column like number one.

    I used this script for add row:
    tb_main.JPG

    and this is for remove:
    function removeRowFromTable()
    {
    var tbl = document.getElementById('table2');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }


    I am confused how to modify / call data from database in:
    var cellRightSel2 = row.insertCell(2);
    var sel = document.createElement('select');
    sel.id = 'subcomponent' + iteration;
    [here]
    sel.options[0] = new Option('','');
    sel.options[1] = new Option('#', 'coba');
    [here]
    cellRightSel2.appendChild(sel);


    Thanks.
     

    Attached Files:

    dj_aoi, Dec 30, 2011 IP