Skript, das keine Informationen aus der Dropdownliste in das Textfeld schreibt

Question

Ich versuche, Daten aus einem Dropdown zu erhalten und in ein Textfeld zu stellen. Aber aus irgendeinem Grund bekomme ich keine Antwort auch die Error Nachricht, die in der Textbox angezeigt werden muss.

Zunächst einmal, das ist mein Dropdown-:

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "db"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
    } 

$sql = "SELECT * FROM products"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    echo "<select class='form-control' id='product1' name='product1' onChange='getProduct1(this.value)' style='width: 100%;'>"; 
    echo "<option selected disabled hidden value=''></option>"; 
    // output data of each row 
    while($row = $result->fetch_assoc()) { 
    echo "<option value='" . $row["id"]. "'>" . $row["article_id"]. " | " . $row["name"]. "</option>"; 
    }     
    echo "</select>"; 
    } else { 
    echo "0 results"; 
    } 
$conn->close(); 
?> 

Nach einem Artikel in dem Drop-Down-Auswahl der Skripte . $row["name"]. in das folgende Textfeld einfügen muss:

<input type="text" class="form-control" id="product11" name="product11"> 

Das jquery Skript, das ich bin mit dem Namen einzufügen ist das folgende Skript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
function getProduct1(selectedItem) { // Do an Ajax request to retrieve the information 

console.log("getProduct1 before ajax", jQuery('#product1').val()); 
jQuery.ajax({ 
    url: 'get.php', 
    method: 'POST', 
    data: {'product1' : jQuery('#product1').val()}, 
    success: function(response){ 
    // and put the price in text field 
    console.log("getProduct1 after ajax", jQuery('#product1').val()); 
    jQuery('#product11').val(response); 

    }, 
    error: function (request, status, error) { 
    alert(request.responseText); 
    }, 
    }); 
} 
</script> 

Das Skript verwendet den folgenden PHP-Skript, das mit der Datenbank verbindet und ruft die relevanten Informationen:

<?php  
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "db"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname) ; 
// Check connection 
if ($conn->connect_error) { 
    die('Connection failed: ' . $conn->connect_error) ; 
    }else { 
    $product1 = isset($_POST['produc1t'])?$_POST['product1']:''; 
    $product11 = isset($_POST['product11'])?$_POST['product11']:''; 

    $query = 'SELECT * FROM products WHERE id="' . mysqli_real_escape_string($conn, $product1) . '"';  
    $res = mysqli_query($conn, $query) ; 
    if (mysqli_num_rows($res) > 0) { 
    $result = mysqli_fetch_assoc($res) ; 
    echo $result['product11']; 
    }else{ 
    $result = mysqli_fetch_assoc($res) ; 
    echo "Error"; 
    }  
} 
?> 

Als ich das Skript ausführen, indem Sie eine Option in der Dropdown-Auswahl, nichts geschieht. Weiß jemand, was mit meinem Skript nicht stimmt?

Answer 1

Ich bin nicht sicher, dass Sie die Datenbank erneut nach einem Wert abfragen sollten, den Sie bereits abgerufen haben. So etwas sollte funktionieren:

jQuery(document).ready(function() { 
    jQuery("#product1").change(function(){ 
     var name = jQuery("#product1 option:selected").text().split('|')[1]; 
     jQuery("#product11").val(name); 
    }); 
}); 

Sie brauchen nicht die JavaScript/jQuery-Befehl in der HTML