【问题标题】:Set input value upon select option in php在php中的选择选项上设置输入值
【发布时间】:2018-08-23 21:15:07
【问题描述】:

我有一个选择产品的表格。根据所选产品,我想更新表单中的其余字段。

The Form display with select option

在选择产品名称时,我希望使用 php 从数据库中填写表单的其余详细信息。

这是创建表的代码。

<table id="productTable" class="table-c">
                  <tr>
                    <th class="text-center" style="width: 5%;">SR No.</th>
                    <th class="text-center" style="width: 45%">DESCRIPTION</th>
                    <th class="text-center" style="width: 10%">HSN/SAC</th>
                    <th class="text-center" style="width: 10%">QTY IN-HAND</th>
                    <th class="text-center" style="width: 10%">ENTER OUTWARD QTY</th>
                    <th class="text-center" style="width: 5%">Delete</th>
                  </tr>
                  <tr style="text-align: center;" id="products">
                    <?php $j=0; $j++; ?>
                    <td><?php echo $j; ?></td>
                    <td><select class="form-control" name="code" id="productID" style="width: 429px;">
                      <?php

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

                      if ($result->num_rows > 0) {
                          // output data of each row
                          while($row = $result->fetch_assoc()) {
                            echo "<option id='".$row['code']."' value='".$row['pname']."'>".$row['pname']."</option>";
                          }
                      } else {
                          echo "0 results";
                      }
                      ?>
                      </select>
                    </td>
                    <td><input type="number" name="hsnNo" id="hsnNo" readonly></td>
                    <td><input type="number" name="qty" id="qty" readonly></td>
                    <td class="coljoin"><input type="number" format="2" name="amount"></td>
                    <td>
                      <span class="fa fa-trash"></span>
                    </td>
                  </tr>
                </table>

我应该怎么做?

【问题讨论】:

  • 使用一些ajax来更新其他字段
  • 你能分享一些代码吗?
  • 使用产品 ID 使用 ajax 并调用 get_product_details(id) 并在 json 中获取产品转换响应数组并在 ajax 中回显它,您必须在 json 中解析响应数据...然后设置您必填项
  • 如果有人能用一个工作示例回答这个问题,那就太好了
  • 分享你到目前为止所尝试的,以及你的数据库结构,我们将更正你的代码

标签: php html mysql ajax


【解决方案1】:

这是 PHP 代码:-

<form>
    <select name="customer" id="customer_id">
        <option value="">-- Select customer Name -- </option>
        <option value="1">John</option>
        <option value="2">Smith</option>                               
    </select>
   Address: <input name="add" type="text" value="">
   Mobile:  <input name="mobile" type="text" value="">
    EMail-Id:<input name="email" type="text" value="">
 </form>

这是 JS 代码:-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#customer_id").change(function() {
                var id = $(this).val();
                var dataString = 'cid='+id;
                //alert(dataString);
                $.ajax({
                    url: 'dataAjax.php',
                    type: 'post',
                    data: dataString,
                    success: function(response) {

                      // Parse the jSON that is returned
                        var Vals    =   JSON.stringify(response);
                        // These are the inputs that will populate
                        $("input[name='add']").val(Vals.add);
                        $("input[name='mobile']").val(Vals.mobile);
                        $("input[name='email']").val(Vals.email);
                         }
            });
        });
    });
</script>

这是其他 PHP 文件代码:-

<?php
// This is where you would do any database call
if(!empty($_POST)) {
    // Send back a jSON array via echo
    echo json_encode(array("add"=>'India',"mobile"=>'1234567890','email'=>'demo@demo.com'));

}
?>

【讨论】:

  • @Avinash ,这不是用于更新,而是用于从更改选择标签上的 id 获取数据并放入输入字段..) & 如果你完成更新然后通过更新查询完成。
  • 我能够获取数据。唯一的困难是获取的数据没有被设置为字段的值
  • @Avinash 您以什么格式获取数据? &你也使用Jquey文件..在var Vals中得到响应后,你设置了输入字段名称$("input[name='add']").val(Vals.add);.
  • 我已经完成了您在答案中提到的操作。不过,我无法显示
  • 这是获取数据的方式:"{\"hsnNo\":\"12345\",\"qty\":\"100\"}"
【解决方案2】:

使用产品 ID 使用 ajax 并调用 get_product_details(id) 并在 json 中获取产品转换响应数组并在 ajax 中回显它,您必须在 json 中解析响应数据...然后设置您的必填字段..(添加需要js)

**Ajax Call :**
    $(document).on('change','your_dropdown_filed_id',function()
    {
       var product_id = $(this).val();
       //Ajax call
       $.ajax({
        method: "POST",
        url: "/get_product_details", //your php file function path
        data: { product_id: product_id}
        }).done(function( response ) {
        alert( "Data Saved: " + response );
        var obj = JSON.parse(response);
        //obj hold all values
        alert(obj.qty);
        alert(obj.hsn);
        $('#hsn_id').val(obj.hsn);
        $('#qty_id').val(obj.qty);
       });
    });

**product.php**

    function get_product_details(product_id)
    {
    //Get product details in associative array format
    echo json_encode($product_details);
    }

【讨论】:

    【解决方案3】:

    选择产品后,执行 ajax 请求并根据所选产品从数据库中获取数据。

    JAVASCRIPT 代码:

    $('#products').change(function(){
       $.ajax({
         url: 'your php code page name which returns product details.php?product_id'+$('#products').val(),
         type: 'post',
         success: function(response) {
          var obj    =   JSON.parse(response);
          $("#hsn_sac").val(obj.hsn_sac); // hsn or sac values
          $("#qty_in_hand").val(obj.qty_in_hand); // qty_in_hand values
         }
    }});
    

    });

    PHP 代码:

    <?php 
      // first connect database and then fire the query to get product details  
       $connection = mysql_connect("your database host name","database username","database password","database name");
       $result = mysql_query("your query");  
       while ($row = mysql_fetch_array($result)) {  
         // get data and store in array 
       }  
       mysql_close($connection);  // close connection
       echo json_encode(database result);  // encode database result so that it will available to ajax request and assign back to view
       exit;
    ?>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-07-11
      • 2023-03-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-08-17
      • 1970-01-01
      相关资源
      最近更新 更多