如何在动态选择框上显示动态值

u3r8eeie  于 2021-06-15  发布在  Mysql
关注(0)|答案(1)|浏览(304)

我在找人帮忙
我在bootstrap中使用了一个添加多行的代码，在这个代码中，我试图从选择框中获取值，在javascript中使用php，使用ajax，它从数据库中获取值，对于第一行来说效果很好，但是当涉及到多行时，它只获取值，然后再次添加到第一行，我需要的是在同一行上获取值，从这里选取的是代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <!-- Required meta tags-->
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <meta name="description" content="au theme template">
  9.     <meta name="author" content="Hau Nguyen">
  10.     <meta name="keywords" content="au theme template">
  12.     <!-- Title Page-->
  13.     <title>Dashboard 3</title>
  15.     <!-- Fontfaces CSS-->
  16.     <link href="css/font-face.css" rel="stylesheet" media="all">
  17.     <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
  18.     <link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
  19.     <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
  21. <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  23.     <!-- Bootstrap CSS-->
  24.     <link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
  26.     <!-- Vendor CSS-->
  27.     <link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all">
  28.     <link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
  29.     <link href="vendor/wow/animate.css" rel="stylesheet" media="all">
  30.     <link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
  31.     <link href="vendor/slick/slick.css" rel="stylesheet" media="all">
  32.     <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">
  33.     <link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
  35.     <!-- Main CSS-->
  36.     <link href="css/theme.css" rel="stylesheet" media="all">
  38. </head>
  40. <?php
  42.     $connection = mysqli_connect('localhost','root','','quotation');
  44.  ?>
  46. <?php
  48.         if(isset($_POST['submit']))
  49.         {
  50.             $name = $_POST['name'];
  51.             $mail = $_POST['mail'];
  52.             $phone = $_POST['phone'];
  54.             $name1 = count($_POST['name']);
  56.             $mail1 = count($_POST['mail']);
  58.             $phone1 = count($_POST['phone']);
  60.             print_r($name);
  62.             echo "<br>";
  64.             print_r($mail);
  66.             echo "<br>";
  68.             print_r($phone);
  70.             echo "<br>";
  72.             echo $name1;
  73.             echo $mail1;
  74.             echo $phone1;
  75.         }
  77.  ?>
  79.     <br>
  80.     <div class="container">
  81.         <div class="row">
  82.             <div class="col col-sm6">
  84.                         <a href="#">
  85.                             <img src="images/icon/Omni_logo_for_web2.png" alt="CoolAdmin" />
  86.                             <p style="color:gray;"><i>Transforming People and Business</i></p>
  87.                         </a>
  88.                     <p>
  89.                         A-242, Sardar Ali Sabri Rd.     <br>
  90. Block-2, Gulshan-e-Iqbal <br>   
  91. Karachi.    <br>
  92. Phone: 021-3498OMNI(6664)  Mobile: 0312-2169325, 0337-7222191   
  93. <br> SNTN   : S0529023-6
  95. <br>
  96. TaxpayerName    : OMNI ACADEMY
  98.                     </p>
  100.             </div>
  102.         <div class="col col-sm6">
  104.                         <h2 style="color:gray">Quotations</h2>
  105.                     <p>
  106.                         DATE    2018-12-17
  107.     <br>
  108. RFQ#    0308-2018
  109. <br>    
  110. Karachi.    <br>
  111. Phone: 021-3498OMNI(6664)  Mobile: 0312-2169325, 0337-7222191   
  112. <br> SNTN   : S0529023-6
  113. Customer ID 408
  114. <br>
  115. Customer NTN/SNTN   NA
  117. <br>
  118. <br>
  119.         Customer    Lakson Group
  120. <br>
  122. Valid until:            28-Nov-2018
  124. <br>
  125.         Prepared by:    FIN-03
  127.                     </p>
  129.             </div>
  130.         </div>
  132.     </div>
  134.     <br>
  136.     <form method="post">
  138.         <div class="container">
  139.     <table id="myTable" class=" table order-list">
  140.     <thead>
  141.         <tr>
  142.             <td>Name</td>
  143.             <td>Gmail</td>
  144.             <td>Phone</td>
  145.         </tr>
  146.     </thead>
  147.     <tbody>
  148.     </tbody>
  149.     <tfoot>
  150.         <tr>
  151.             <td colspan="5" style="text-align: left;">
  152.                 <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
  153.             </td>
  154.         </tr>
  155.         <tr>
  156.         </tr>
  157.     </tfoot>
  158. </table>
  159. </div>
  161.     <input type="submit" name = 'submit' value="Subm">
  163.     </form>
  165. <script>
  166.     $(document).ready(function () {
  167.     var counter = 0;
  169.     $("#addrow").on("click", function () {
  170.         var newRow = $("<tr>");
  171.         var cols = "";
  173.         cols += '<td><select onchange = "myfunc(this.value)" name="name[]" class="form-control" ' + counter + '" ><?php $select_courses = "select * from courses"; 
  174.             $run_select = mysqli_query($connection,$select_courses);
  176.             while($row = mysqli_fetch_assoc($run_select)){
  178.             $name = $row["name"];
  179.             $course_id = $row["course_id"];
  181.         ?><option value="<?php echo $course_id ?>"><?php echo $name; ?></option> <?php } ?></select></td>';
  182.         cols += '<td id="getdata" ' + counter + '"></td>';
  183.         cols += '<td><input type="text" class="form-control" name="phone[]' + counter + '"/></td>';
  185.         cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
  186.         newRow.append(cols);
  187.         $("table.order-list").append(newRow);
  188.         counter++;
  189.     });
  191.     $("table.order-list").on("click", ".ibtnDel", function (event) {
  192.         $(this).closest("tr").remove();       
  193.         counter -= 1
  194.     });
  196. });
  198. function calculateRow(row) {
  199.     var price = +row.find('input[name^="price"]').val();
  201. }
  203. function calculateGrandTotal() {
  204.     var grandTotal = 0;
  205.     $("table.order-list").find('input[name^="price"]').each(function () {
  206.         grandTotal += +$(this).val();
  207.     });
  208.     $("#grandtotal").text(grandTotal.toFixed(2));
  209. }
  211. function myfunc(datavalue)
  213.             {
  214.                 $.ajax({
  216.                     url:'getdata.php',
  217.                     type:'post',
  218.                     data:{
  220.                         datapost:datavalue
  221.                     },
  222.                     success:function(result){
  224.                         $('#getdata').html(result);
  225.                     }
  226.                 });
  227.             }
  229. </script>
  231.             <?php include('include/footer.php'); ?>
  232. <!-- end document-->
  234. getdata.php
  236. <?php
  238.     $connection = mysqli_connect('localhost','root','','quotation');
  240.  ?>
  241. <?php
  243.     $name_id = $_POST['datapost'];
  245.     $q = "select * from courses where course_id = '$name_id'";
  247.     $result = mysqli_query($connection,$q);
  249.     $rows = mysqli_fetch_assoc($result);
  250. ?>
  252.     <input type="text" name = "phone[]" value="<?php echo $rows['name']; ?>">
mysqlphpajax

1条答案

按热度按时间
5cnsuln7

5cnsuln71#

您可以执行以下操作：
将唯一id设置为 select 以及 getdata .

  1. <select id="select'+counter+'">
  2. <td id="getdata'+counter+'"></td>

您可以调用 select 单独或将id传递给 myfunc 从那里分析。

  1. $(document).on('change', 'select[name="name[]"]', function(){
  2.         idName = $(this).attr('id');        //finding id of the element
  3.         id = idName.substring(6, idName.length);      //finding id number
  4.         var datavalue = $(this).val();
  5.         myfunc(datavalue, id);
  6.     });

改变你的想法 myfunc 如下所示。

  1. function myfunc(datavalue, id) {
  2.     $.ajax({
  4.         url:'getdata.php',
  5.         type:'post',
  6.         data:{
  8.             datapost:datavalue
  9.         },
  10.         success:function(result){
  12.             $('#getdata'+id).html(result);
  13.         }
  14.     });
  15.  }

此外，在删除行时，还需要小心维护唯一的id。您可以在这里查看如何动态添加和删除行。

展开查看全部
赞(0）分享  回复(0）举报  2021-06-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com