自动填充 (jQuery) 不适用于 HTML 表单中动态添加的行

autofill (jQuery) not working with dynamic added rows in HTML Form

提问人:Umar Nazir 提问时间:5/19/2023 最后编辑:marc_sUmar Nazir 更新时间:5/19/2023 访问量:47

问:

我正在尝试通过从 mysql 表中检索数据来自动填充我的 PHP 表单。它在一行上工作正常。我面临的问题是,当我使用 Javascript 动态添加新行时,自动填充在动态创建的行中不起作用。我想知道如何使用动态创建的行进行自动填充

这是 html 标记:

<td>
    <input type="text" class="form-control text-end" name="scode[]" id="aaa"                    
           onkeyup="GetDetail(this.value)" value="">
</td>
<td>
    <input type="text" class="form-control text-end" 
           name="servproname[]" id="bbb">
</td>
<td>
    <input type="text" class="form-control text-end" name="qty[]"  
           id="ccc" >
</td>

这是用于动态添加新行的 Javascript

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody");
    $(v).find("input").val('');
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

这是jQuery:

<script>
    // onkeyup event will occur when the user
    // release the key and calls the function
    // assigned to this event
    function GetDetail(str) {
        if (str.length == 0) {
            document.getElementById("bbb").value = "";
            document.getElementById("ccc").value = "";

            return;
        }
        else {
            // Creates a new XMLHttpRequest object
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {

            // Defines a function to be called when
            // the readyState property changes
            if (this.readyState == 4 &&
                this.status == 200) {
                    
                // Typical action to be performed
                // when the document is ready
                var myObj = JSON.parse(this.responseText);

                // Returns the response data as a
                // string and store this array in
                // a variable assign the value
                // received to first name input field
                
                document.getElementById("bbb").value = myObj[0];
                document.getElementById("ccc").value = myObj[1];
            }
       };

        // xhttp.open("GET", "filename", true);
        xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
            
        // Sends the request to the server
        xmlhttp.send();
    }
}
</script>

这是php脚本

<?php

       // Get the user id
          $user_id = $_REQUEST['user_id'];

           // Database connection
            $con = mysqli_connect("localhost", "root", "", "hmis");

            if ($user_id !== "") {

               // Get corresponding first name and
                 // last name for that user id  
                 $query = mysqli_query($con, "SELECT name, qty1 FROM machine1 WHERE user_id ='$user_id'");

                     $row = mysqli_fetch_array($query);

            // Get the first name
                  $bbb = $row["name"];
              $ccc = $row["qty1"];
            }
               // Store it in a array
                  $result = array("$bbb", "$ccc");

                // Send in JSON encoded form
               $myJSON = json_encode($result);
            echo $myJSON;
          ?>
javascript php jquery mysql

评论

0赞 Dharman 5/19/2023
警告:你对 SQL 注入持开放态度,应该使用参数化的预准备语句,而不是手动构建查询。它们由 PDOMySQLi 提供。永远不要相信任何形式的输入!即使您的查询仅由受信任的用户执行,您仍然有损坏数据的风险逃跑是不够的!
0赞 NLxDoDge 5/19/2023
您有两个简单的选项,一个是在提交表单时使用 JavaScript 手动添加条目。另一个更费力的是,在发送请求进行添加时,等待 200,然后再次重新请求搜索栏。这将用新数据(或应该)重新加载它。但我会推荐第一种选择。正如@Dharman所说,请使用参数化查询来不启用 SQL 注入!

答: 暂无答案