Заполните поле ввода значением из php mysql выбранных данных, используя ajax - PullRequest
0 голосов
/ 29 апреля 2020

У меня есть выпадающий список из php mysql select (загрузить из таблицы с именем «userstable», в которой есть два поля «name» и «email»). Я хочу выбрать «имя» из выпадающего списка php mysql и с помощью Ajax (json) получить «электронное письмо» для пользователя, выбранного из таблицы mysql, и отобразить его в поле ввода. Раскрывающийся список работает, и я могу выбрать имя, но информация электронной почты не заполняется в поле ввода с именем «email».

Таблица базы данных mysql:

usertable содержит поля [ имя], [электронная почта].

Мой индекс. php код:

<?php
    require_once("conection.php");
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Contact Form Validation using jqBootstrapValidation with Ajax PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.6/jqBootstrapValidation.js"></script>

<!-- Ajax function for getting email --> 
 <script>
$(document).ready(function(){
    $('#name').on('change',function(){
        var name = $(this).val();
        $.ajax({
            url : "getemail.php",
            dataType: 'json',
            type: 'POST',
            async : false,
            data : { name:name,email : email},
            success : function(data) {
                userData = json.parse(data);
                $('#email').val(userData.email);
            }
        }); 
    });
});
</script>
 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Showing User Info</h3>
   <br />
   <form id="simple_form" novalidate="novalidate">
            <div class="row">
            <!--Dropdown list for selecting name --> 
              <div class="col-md-6">
                <div class="control-group">
                  <h3>User</h3>
                      <select required id="name" name="name"  class="form-control" onchange="showname(this.value)">
                      <option value="">Select User</option>
                        <?php include("userselect.php") ?> 
                      </select>
                </div>
              </div>
                <!-- input field for showing user email -->               
              <div class="col-md-6">
                <div class="control-group">
                   <h3>Email</h3>
                    <div class="form-group mb-0 pb-2">
                        <input type="text" name="email" id="email" class="form-control form-control-lg"  />
                        <p class="text-danger help-block"></p>
                    </div>
                </div>
              </div>           
          </div>
   </form>
  </div>
 </body>
</html>

Это пользовательский выбор php. php для выбора имени пользователя для отображения электронной почты:

<?php

    $selectdata = "SELECT * FROM userstable ORDER BY name";
    $DoQuery = $connect->query($selectdata);

    while($register = $DoQuery->fetch_assoc()){

        echo "<option value='".utf8_encode($register["name"])."'";
        if ($_POST["name"]==$register["name"])
        {
            echo "selected";
        }
        echo ">".utf8_encode($register["name"])."</option>";
    }
// $connect->close();
?>

Этот getmail. php код для получения электронной почты для отображения:

 <?php

     $connect = mysqli_connect("localhost", "root", "mysq1passw0rd", "users");

     $query = "SELECT * FROM userstable WHERE name = '".$_POST["name"]."'";
     $result = mysqli_query($connect, $query);
     while($row = mysqli_fetch_array($result))
     {
       $data["email"] = $row["email"];
     }

     echo json_encode($data);


    ?> 

Пожалуйста, есть идеи?

Ответы [ 3 ]

0 голосов
/ 29 апреля 2020

Я вижу пару основных c проблем, которые могут иметь или не иметь к этому никакого отношения.

  • в верхней части require_once возможно опечатка conection.php, 1 'n' вместо 'nn'.
  • , вероятно, лучше всего ставить пробел перед "selected", то есть "selected", в userselect.php
  • вашем коде в скрипте, вызывающем getemail.php но ваш пост ссылается на файл как getmail.php, то есть нет 'e'
  • не уверен, почему вы бы указали "asyn c = false", так как это определенно асинхронный запрос (пользователь -triggered, не при загрузке страницы - это 'a' в 'ajax').
  • ваш getemail.php сценарий предназначен для создания набора строк, но ваш синтаксический анализ ajax предполагает, что это только получить один ответ. Кодировка JSON может пытаться создать иерархию вокруг нее, чтобы подготовиться к получению более чем одной строки в качестве вывода.

Если ничего из этого не имеет значения, то я бы попытался взять непарсированный выведите из запроса AJAX запрос и поместите его в поле электронной почты (или просто в msgbox ()), чтобы увидеть, возвращаете ли вы данные, которые выглядят правильно. Это должно помочь изолировать проблему от того, находится ли она в запросе, обработке запроса или синтаксическом анализе ответа.

Наконец, никогда не помещайте свой пароль в такие фрагменты кода, как это - бог знает, где все остальное вы используйте этот пароль и этот дескриптор.

0 голосов
/ 01 мая 2020

Спасибо всем, я изменил Ajax fuction и getemail. php и теперь он работает, и я изменил getdata. php для возврата "email" и "age" пользователя.

Это мой индекс. php file:

<?php
    include 'connection.php';
?>
<!DOCTYPE html>
<html>
 <head>
  <title>Contact Form Validation using jqBootstrapValidation with Ajax PHP</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.6/jqBootstrapValidation.js"></script>
<style type="text/css">


select#select_ext {
  border-radius: 10px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 250px;
  height: 150px;
color: #333;
color: red;  
}

select#name{
    background: white;
    border: 0.15em solid #57ABB8;
    border-radius: 1.15em;
    color: gray;
    cursor: pointer;
    font-size: 0.80em;
    height: 39px;
    text-indent: 5px;
    width: 160px;
}

select#namex{
    background: white;
  border-radius: 5px;
  border: 2px solid #73AD21;
    color: blue;
    cursor: pointer;
    font-size: 1em;
    text-indent: 5px;
    width: 200px;
    height: 40px;
}
</style>



<!-- Ajax function --> 
<script>
$(document).ready(function(){
  $('#name').on('change',function(){
  var name= $('#name').val();
  if(name != '')
  {
   $.ajax({
    url:"getemail.php",
    method:"POST",
    data:{name:name},
    dataType:"JSON",
    success:function(data)
    {

     $('#age').val(data.age);
     $('#email').val(data.email);
     alert("email: " + data.email);
    }
   })
  }
  else
  {
   alert("Por favor seleccione nombre grupo");
   $('#employee_details').css("display", "none");
  }
 });
});
</script>


 </head>
 <body>
  <div class="container">
   <br />
   <h3 align="center">Showing User Info</h3>
   <br />
   <form id="simple_form" novalidate="novalidate">
            <div class="row">
            <!--Dropdown list for selecting name --> 
              <div class="col-md-4">
                <div class="control-group">
                  <h3>User</h3>
                      <select required id="name" name="name"  class="form-control" onchange="showname(this.value)">
                      <option value="">Select User</option>
                        <?php include("userselect.php") ?> 
                      </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="control-group">
                   <h3>Age</h3>
                    <div class="form-group mb-0 pb-2">
                        <input type="text" name="age" id="age" class="form-control form-control-lg"  />
                    </div>
                </div>
              </div> 
                <!-- input field "email" for showing user email -->               
              <div class="col-md-4">
                <div class="control-group">
                   <h3>Email</h3>
                    <div class="form-group mb-0 pb-2">
                        <input type="text" name="email" id="email" class="form-control form-control-lg"  />
                    </div>
                </div>
              </div>           
          </div>
   </form>
  </div>
 </body>
</html>

Этот мой пользователь выбирает. php file:

<?php

    $selectdata = "SELECT * FROM userstable ORDER BY name";
    $DoQuery = $connect->query($selectdata);

    while($register = $DoQuery->fetch_assoc()){

        echo "<option value='".utf8_encode($register["name"])."'";
        if ($_POST["name"]==$register["name"])
        {
            echo "selected";
        }
        echo ">".utf8_encode($register["name"])."</option>";
    }
// $connect->close();
?>

Это getemail. php:

<?php
require_once("connection.php");

if(isset($_POST["name"]))
{

$name=$_POST["name"];


 $query = "SELECT * FROM userstable WHERE name = '".$_POST["name"]."'";
 $result = mysqli_query($connect, $query);
 while($row = mysqli_fetch_array($result))
 {
   $data["age"] = $row["age"];
   $data["email"] = $row["email"];
 }

 echo json_encode($data);
}

?>

Пожалуйста, как мне сделать так, как предлагает "sal" для получения полей "name" и "email" в файле выбора. php файл и показать "email" в поле ввода id = "email", используя ajax

0 голосов
/ 29 апреля 2020

Пожалуйста, удалите строку из своего кода

строка: userData = json .parse (data);

success : function(data) {
    userData = json.parse(data);
    $('#email').val(userData.email);
}

To

success : function(data) {
    $('#email').val(data.email);
}

, потому что вы уже json_encode в вашем файле getmail. php.

 echo json_encode($data); //your getmail.php
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...