如何根据在PHP中相同表单的另一个字段中输入的值用户自动填充其他表单字段?

时间:2018-02-07 23:13:27

标签: php jquery

我正在实施类似于预订者的应用程序。有一种表格可以预约。如果我们输入电子邮件地址,一旦我写了电子邮件地址,其他信息,如姓名,电话号码和地址,应该从以前的约会中自动填写数据库。以下是我的文件中的代码块:

book.php

   <div class="form-group">
       <label>Customer Email*</label>
       <div class="input-group">
           <input type="text" name="email" required/>
       </div>
   </div>
   <div class="form-group">
       <label>Booking Time*</label>
       <div class="input-group">
           <input type="text" name="name" required/>
       </div>
   </div>
   <div class="form-group">
       <label>Service Name*</label>
       <div class="input-group">
           <input type="text" name="phone" required/>
       </div>
   </div>
   <? $cust = array($model->booking_history->cust_first_name, $model->booking_history->cust_last_name, $model->booking_history->cust_address,                $model->booking_history->cust_country, $model->booking_history->ship_city, $model->booking_history->cust_state, $model->booking_history->cust_zip);

   <div class="form-group">
       <label>First Name</label>
       <?php echo $model->form->textBoxFor('cust_first_name',['required'=>'required']); ?>
   </div>
   <div class="form-group">
       <label>Last Name</label>
       <?php echo $model->form->textBoxFor('cust_last_name',['required'=>'required']); ?>
   </div>
   <div class="form-group">
       <label>Address</label>
       <?php echo $model->form->textBoxFor('cust_address',['required'=>'required']); ?>
   </div>

我的模型 Book.php 与上面的类似字段。还有 bookController.php 。任何人都可以告诉我如何通过使用Controller或jQuery或AJAX来实现此功能。

修改 我在jQuery部分编写了以下代码:

$("input[name=email]" ).on( "focusout", function(){

 var emailValue = $(this).val();
 console.log(emailValue);
 $.post( "/abc/getBookingDetails", { email: email}, function( data ) {
    $("input[cust_first_name]").val( data['cust_first_name'] );

 } );
} );`

并在控制器文件中:

 public function getBookingDetails(){
 $email = $_POST['email'];

 $res = [];
 $bookingDetails = \Model\Book::getList(['where'=>"email = '{$email}'"]);

 if($bookingDetails){
    $res = ['first_name' => $bookingDetails->first_name, 'last_name' => $bookingDetails->last_name];
 } else {

 }
}

但我得到名字和姓氏为null。哪里错了?我没有使用JSON来存储和解析。

1 个答案:

答案 0 :(得分:0)

我被要求编辑我的答案,所以这是一个有效的例子。我有两个文件。一个我命名为index.php,另一个命名为api.php。这两个文件都在名为test。

的目录中

第一个文件包含表格和公告代码:

<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>
<body>
   <div class="form-group">
       <label>Customer Email*</label>
       <div class="input-group">
           <input type="text" name="email" required/>
       </div>
   </div>
   <div class="form-group">
       <label>Booking Time*</label>
       <div class="input-group">
           <input type="text" name="name" required/>
       </div>
   </div>
   <div class="form-group">
       <label>Service Name*</label>
       <div class="input-group">
           <input type="text" name="service_name" required/>
       </div>
   </div>
   <div class="form-group">
       <label>Phone</label>
       <div class="input-group">
           <input type="text" name="phone" required/>
       </div>
   </div>
   <div class="form-group">
       <label>First Name</label>
       <input type="text" name="fname" required/>
   </div>
   <div class="form-group">
       <label>Last Name</label>
       <input type="text" name="lname" required/>
   </div>
   <div class="form-group">
       <label>Address</label>
      <input type="text" name="address" required/>
   </div>
    <script>
    $("input[name=email]" ).on( "focusout", function(){
     var emailValue = $(this).val();

     // This is the sample request
     $.get( "/test/api.php", { email: emailValue }, function( data ) {
        $("input[name=phone]").val( data.phone );
        $("input[name=fname]").val( data.fname );
        $("input[name=lname]").val( data.lname );
        $("input[name=address]").val( data.address );
     } );
    } );
    </script>
</body>
</html>

第二个文件名为api.php接收AJAX请求

<?php

// Just a sample array. You will want to query for the data you need.
$resp = [
    'phone' => '###-###-####',
    'fname' => 'First Name',
    'lname' => 'Last Name',
    'address' => 'Address Street',
    'email_value' => $_GET['email']
];
// Set the json response header.
header('Content-Type: application/json');
// json encode the data
print json_encode($resp);