AJAX - Изменение внутреннего HTML элемента при событии изменения в вводе выбора не работает - PullRequest
0 голосов
/ 18 марта 2020

Я пытаюсь получить значение продукта из базы данных, когда пользователь делает выбор в элементе <select> и отображает указанное значение, полученное с помощью AJAX в элементе, но оно не работает, если я go на precio.php?q=PRODUCTO%201 он дает мне желаемый результат 10, что заставляет меня думать, что код в файле php правильный, проблема должна находиться в разделе <script> или в элементе <select>.

Это моя AJAX функция в <head>

<script>
    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
      }
    }
</script>

Это моя <select> элемент в <body>

<div class="form-group row">
    <label class="col-sm-4 col-form-label font-weight-bold">Elige un Producto</label><br>
    <div class="col-sm-8">
        <select class="custom-select my-1 mr-sm-2" id="producto" name="producto" onchange="precioProd(this.value)" required>
            <option selected>Elegir...</option>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/php/fetch_lista_productos_compra.php'; ?>
        </select>
    </div>
</div>
<h3 id="precio" name="precio"></h3>

Это содержимое precio.php

<?php 
require $_SERVER['DOCUMENT_ROOT'].'/php/db_key.php';

$con = mysqli_connect($servername, $username, $password, $dbname);

$q = $_GET["q"];

$sql = "SELECT precio FROM productos WHERE titulo = '".$q."'";

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

while($row = mysqli_fetch_array($result)) {
    echo $row['precio'];
}
?>

Как всегда, любая помощь будет принята с благодарностью и благодарю вас за потраченное время.

1 Ответ

1 голос
/ 18 марта 2020

Вы добавили дополнительные } в конце вашего скрипта. Следующее в порядке.

<script>
    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
    }
</script>
...