Выберите элемент из базы данных и заполните форму данными указанного c выбора с помощью PHP JavaScript и AJAX

Question

Пожалуйста, я застрял на некоторое время. Я пытался использовать PHP, Javascript и Ajax для создания выпадающего списка с существующими авторами из моей базы данных. В этом списке авторов onChange я хотел бы заполнить значения формы данными этого указанного c выбранного автора, но я не могу найти путь к этому. Надеюсь, вы, ребята, можете понять, чего я пытаюсь достичь. Спасибо !!

У меня есть раскрывающийся список выбора / параметров, заполненный именами авторов из базы данных:

<?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();    
}

Answer 1

Я нашел решение, спасибо! Я пишу здесь на тот случай, если кому-то еще будет очень тяжело с php / javascript / ajax, как и мне. Мне было очень трудно понять другие примеры, я постараюсь сделать это проще, и я надеюсь, что это поможет кому-то еще. Я sh Я нашел объяснение, как это хахаха !!! Не уверен, что это был лучший способ, но он работает.

Получить данные из базы данных и отобразить в виде списка выбора .

 <?php
        function getAuthor() {
        require ("../../model/db.php"); // need the connection with the database..

        $output = '';

        $sth = $conn->prepare('SELECT AuthorID, Name FROM author');

        $sth->execute();
        $result = $sth-> fetchAll();

        foreach( $result as $row ) { // output authorid as a value for the selection
        // echo authorid as the input value=" "    
        $output .= '<option value="'.$row['AuthorID'].'">'.$row['Name'].'</option>';

           }
         echo $output;
    }
?>

HTML FORM с php getAuthor () для отображения существующих авторов в БД. onchange = "myfunction (this.value)" для отправки идентификатора на JavaScript при каждом выборе изменений.

<h1>Add Author</h1>

    <fieldset> 
    <label>Existing author?</label>
        <select onchange="myFunction(this.value)"> // sending selected id to javascript.
            <option>Select Author</option>
            <?php getAuthor();?>
        </select>

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


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

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

    <label>Birth Year:</label>
    <input type="number" name='birthyear' id="abirthday"  value="" autocomplete="off" required>

    <label>Death Year:</label>
    <input type="number" name='deathyear' id="adeath" value="" autocomplete="off" >
    </fieldset>

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

JavaScript / Ajax, получение идентификатора из выбранной опции, размещение идентификатора на сервисе веб-сайта с AJAX и получение данных от веб-службы в соответствии с опубликованным идентификатором.

   function myFunction(authors) {

    var result = {};

    var data = new XMLHttpRequest();
    data.onreadystatechange = function () {
        if (data.readyState === 4 && data.status === 200) {
            result = JSON.parse(data.responseText); // receiving response from web service and populating from input values with data from the database.

            document.getElementById("aname").value = result.aname;
            document.getElementById("asurname").value = result.asurname;
            document.getElementById("anationality").value = result.anationality;
            document.getElementById("abirthday").value = result.abirthday;
            document.getElementById("adeath").value = result.adeath;
        }
    };
    data.open("POST", "../../controller/webservice.php", true);
    data.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    data.send("id="+authors);

}

Веб-служба получает отправленный идентификатор из AJAX, выбирает данные из БД в соответствии с опубликованным идентификатором и отправляет данные для отображения в форме html в виде массива с помощью функции json_encode ().

<?php
header("Content-Type: application/json");

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

if(isset($_POST['id'])){
  if(!empty($_POST['id'])) {
    $sth = $conn->prepare('SELECT AuthorID, Name, Surname, Nationality, BirthYear, DeathYear FROM author WHERE author.AuthorID  =' . $_POST['id']); // $_POST['id'] = ajax posted id.
    $sth->execute();
    $result =  $sth->fetchAll();    
    foreach($result as $row){

        $myArray = array("aname" => $row['Name'], "asurname" => $row['Surname'], "anationality" => $row['Nationality'], "abirthday" => $row['BirthYear'], "adeath" => $row['DeathYear']);

    }
        echo json_encode($myArray);

    }
}

?>

Answer 2

1)

Вам не нужна эта часть кода var authors = document.getElementById("sel").value;. Вы передаете значение при вызове функции onChange="myFunction(this.value)". Просто измените свою сигнатуру функции с function myFunction(), например, function myFunction(author). Теперь вы можете использовать только author.

2)

Это onchange не onChange.

3) * Для тега 1021 *

<option> необходимо значение. Вы просто даете ему что-то вроде ярлыка (имя автора). В конце концов, ваш выбор каждый раз не имеет значения.

4)

Домашнее задание: прочитайте о подготовленных заявлениях (https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php), потому что ваш текущий код SQL уязвим для инъекций.

Я думаю, что это будет работать после этих изменений. Если нет, не стесняйтесь задавать больше вопросов.