使用Dropdown创建动态行(从mysql DB),该行通过Ajax Jquery在行内填充文本框

时间:2018-06-21 19:44:56

标签: javascript php jquery mysql ajax

Dynamic Rows

在上图中,我正在创建动态行(工作正常)。但是,我然后包括了根据“ Desc:”左侧的下拉列表中选择的内容填充“ Desc:”文本框的功能。这对于第一行工作正常,但此后所有其他行均无效。 这是我用于添加和删除行的javascript代码(效果很好):

<script type="text/javascript">
$(function(){

function initTemplates() {
        $('.template').each(function () {
            var template = $(this).children(),
                key = template.attr('class') || 'template' + templates.length;
            templates[key] = template;
            $(this).remove();

        });
    }

    var templates = {};
    initTemplates();

//when the Add Field button is clicked

    $("#add").click(function () {
        $('#items').append(templates['emp_detail'].clone());
    });


//function on Delete button 

    $(document).on('click', '.delete', function () {
        $(this).parent().remove();
    });

});

</script>   

以下是用于从mySQL DB中提取数据并填充下拉列表的代码(php和HTML):

<div class="template">
    <div class="emp_detail">
    <script type="text/javascript">
            $(document).ready(function(){

                $("#sel_depart").change(function(){
                    var deptid = $(this).val();

                    $.ajax({
                        url: 'getUsers.php',
                        type: 'post',
                        data: {depart:deptid},
                        dataType: 'json',
                        success:function(response){

                            var len = response.length;

                            $("#sel_user").empty();
                            for( var i = 0; i<len; i++){
                                var PartNumber = response[i]['PartNumber'];

                                $("#sel_user").empty().append("<input type=text value='"+PartNumber+"' size=20 name=PartNumber[]>");

                            }
                        }
                    });
                });

            });
    </script>
    <span width=100%>
    <table border="0" cellpadding=0 cellspacing=0 width="100%">
    <tr>
    <td style='white-space:nowrap;'>
    <input type="button" class="delete" value="Delete">
    <label><font style="font-size:11px;"><b>Part: </b></label><input type="text" class="small" name="BX_ProductName[]" size="20">
    <label><font style="font-size:11px;color:#D41118;"><b>OR </font></label>

    <select name="Prod1[]" id="sel_depart">
    <option>Select Pre-Loaded Part...</option>

$sql = "SELECT DISTINCT ProductName, id FROM table_name GROUP BY ProductName ORDER BY ProductName ASC";
$sql_result = mysql_query($sql,$connection);

while ($row = mysql_fetch_array($sql_result))
{
$id = $row['id']; 
$ProductName = $row['ProductName'];    
echo"<option value=\"$id\">$ProductName</option>";   
}
mysql_close($connection);

?>          

    <label for="PartNumber"><font style="font-size:11px;"><b>Desc: </b></label><span id="sel_user"><input type="text" class="small" name="PartNumber[]" size="20"></span>
    <label for="AmountOrdered"><font style="font-size:11px;"><b>Qty: </b></label><input type="text" required="required" class="small"  name="AmountOrdered[]" size="5">
    <label for="build"><font style="font-size:11px;"><b>Build#: </b></label><input type="text" required="required" class="small"  name="build[]" size="10">
    <label for="unit_cost"><font style="font-size:11px;"><b>Unit$: </b></label><input type="text" class="small"  name="unit_cost[]" size="10">
    <label for="total_cost"><font style="font-size:11px;"><b>Total$: </b></label><input type="text" class="small"  name="total_cost[]" size="10">
    <label><font style="font-size:11px;"><b>Date: </b></label><input type="text" class="emp_from" name="ExpectedDate[]" size="10">

    </td>
    </tr>
    </table>
    </span>

    </div>
</div>

<div id="items">
</div>

这是getUsers.php文件:

$host = "localhost"; /* Host name */
$user = "username"; /* User */
$password = "password"; /* Password */
$dbname = "db_name"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

$departid = $_POST['depart']; 

$sql = "SELECT id, PartNumber FROM table_name WHERE id = ".$departid;

$result = mysqli_query($con,$sql);

$users_arr = array();

while( $row = mysqli_fetch_array($result) ) {

    $PartNumber = $row['PartNumber'];
    $userid = $row['id'];

    $users_arr[] = array("PartNumber" => $PartNumber);
}

// encoding array to json format
echo json_encode($users_arr);

0 个答案:

没有答案