CODEWITHSUNDEEP
javascriptphpjquery
John
John

Reputation: 952

Script not posting information from dropdown to textbox

I am trying to get data from a dropdown and post it to a textbox. But by some reason I dont get any response also the Error message that needs to be shown in the textbox.

First of all, this is my 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();
?>

After selecting a item in the dropdown the scripts needs to paste . $row["name"]. into the following textbox:

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

The jquery script that I am using to paste the name is the following script:

<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>

The script uses the following PHP script that connects with the database and retrieves the relevant information:

<?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";   
  }    
 } 
?>

When I run the script by selecting an option in the dropdown, nothing is happening. Does anyone know what is wrong with my script?

Upvotes: 1

Views: 42

Answers (1)

RST
RST

Reputation: 3925

I am not sure you should query the database again for a value you already retrieved. Something like this should work:

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

You don't need the javascript/jQuery command in the HTML

Upvotes: 1

Related Questions