时间戳

首页 > 解决方案 > 从数据库中选择一个项目并使用 PHP JavaScript 和 AJAX 使用该特定选择的数据填充表单

javascript - 从数据库中选择一个项目并使用 PHP JavaScript 和 AJAX 使用该特定选择的数据填充表单

问题描述

拜托，我坚持了一段时间。我一直在尝试使用 PHP、Javascript 和 Ajax 从我的数据库中创建一个包含现有作者的下拉选择。在此列表“onChange”作者选择中，我想用该特定选定作者的数据填充表单的值，但我找不到解决方法。希望你们能理解我想要达到的目标。谢谢！！

我有一个选择/选项下拉列表，其中填充了数据库中的作者姓名：

<?php // foreach - authors from the database for the drop down select list.
  function getAuthor() {
       $sth = $conn->prepare('SELECT AuthorID, Name, Surname FROM author');
       $sth->execute();
       $result = $sth-> fetchAll();
          foreach( $result as $row ) {
          echo '<option>' . $row["Name"] . '</option>';
        }
 }
?>

<form>    
<fieldset>
<label>Existing author?</label> 
<select onChange="myFunction(this.value)" id="sel"> onChange calling js function.
          <option>Select Author</option>
          <?php getAuthor();?>
</select>

<label>Name:</label>
<input type="text" name='name' autocomplete="off" value="<?php   ?>" required>

<label>Surname:</label>
<input type="text" name='surname' autocomplete="off" value="<?php  ?>" required>

<label>Nationality:</label>
<input type="text" name='nationality' autocomplete="off" value="<?php  ?>" required>

 </fieldset>

<input type="hidden" name="action_type" value="add">
<input id="btnaddbook" value="ADD BOOK AND AUTHOR" type="submit">
</form>

Javascript // 从作者列表中选择值并使用 Ajax 发送。我正在尝试使用“onChange”为每个选择更改发送值。

function myFunction() {
   var authors = document.getElementById("sel").value;

var data = new XMLHttpRequest();
    data.onreadystatechange = function () {
        if (data.readyState == 4 && data.status == 200) {
            document.innerHTML = data.responseText;
        }
    };
    data.open("POST", "../pages/addbook.php", true);
    data.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data.send("mydata="+authors);

}

PHP 接收 Ajax。

<?php
require ("../../model/db.php");

if(isset($_POST['mydata'])){

    $sth = $conn->prepare('SELECT AuthorID, Name FROM author WHERE author.AuthorID  =' . $_POST['mydata']);
    $sth->execute();
    $row =  $sth->fetch();    
}

标签： javascriptphpajaxforms

解决方案

1)

您不需要这部分代码var authors = document.getElementById("sel").value;。您在调用函数时传递了一个值onChange="myFunction(this.value)"。只需将您的函数签名从更改function myFunction()为 eg function myFunction(author)。现在您可以只使用author.

2)

onchange不是onChange。_

3)

<option>标签需要一个值。您只需给它一个标签（作者姓名）之类的东西。最后，您每次的选择都没有价值。

4)

作业：阅读准备好的语句（https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php），因为您当前的代码存在 SQL 注入漏洞。

我认为在这些更改之后它将起作用。如果没有，请随时提出更多问题。

推荐阅读