Question

这是我创建的动态列表，我想将其传递给输入值。这是我的代码。

 <?php
    $conn = mysqli_connect("localhost", "root", "","dbStudent");
    $query = mysqli_query($conn, "select * from tblaccounts");
    while ($row = mysqli_fetch_array($query)) 
    {
    ?>
    <ul>
    <li onclick="GettingSurname" id="Surname"><?php echo $row["Lastname"]; ?></li>
    </ul>
    <?php 
    }
    ?>

如果我点击了姓氏，它将以输入值显示。

<input type="text" name="username" id="username">

如果我选择了姓氏，它会将其传递给输入值。

<script type="text/javascript">
    function GettingSurname()
    {
       document.getElementById("username").value = Surname;
    }
</script>

Answer 1

假设您要将li的文本内容作为用户名文本传递，您需要将当前元素（即this）传递给内联事件处理程序。使用textContent属性设置值。

<li onclick="GettingSurname(this)"><?php echo $row["Lastname"]; ?></li>

脚本

function GettingSurname(elem)
{
   document.getElementById("username").value = elem.textContent;
}

注意：您正在创建具有相同ID id="Surname"的元素，在HTML标识符中必须唯一

Answer 2

您似乎在while循环中创建了行，因此最终可能会创建具有相同ID（姓氏）的多个行。相反，您可以将名称作为参数传递给函数，如下所示：

<li onclick="GettingSurname('<?php echo json_encode($row["Lastname"]); ?>')"><?php echo $row["Lastname"]; ?></li>

（确保你在函数参数中对姓氏进行编码，以防有人被称为o'connor或有人将xss hack作为他们的姓氏）

然后在javascript中执行此操作：

function GettingSurname(surname){ 
 document.getElementById("username").value = surname;
}

Answer 3

实现同一目标的另一种更好的方法是：

<强> PHP：

<?php
$conn = mysqli_connect("localhost", "root", "","dbStudent");
$query = mysqli_query($conn, "select * from tblaccounts");

//Take a counter variable to assign dynamic IDs to the HTML element iterated in the while loop
$counter = 0;
while ($row = mysqli_fetch_array($query)) 
{
    ?>
    <ul>
        <li onclick="GettingSurname('<?php echo $row["Lastname"]; ?>')" id="Surname_<?php echo $counter; ?>">
            <?php echo $row["Lastname"]; ?>
        </li>
    </ul>
<?php 
    $counter++;
}
?>

<强>使用Javascript：

<script type="text/javascript">
function GettingSurname(surname_value)
{
    document.getElementById("username").value = surname_value;
}
</script>

获取动态文本的值会将其传递给输入值

3 个答案: