javascript - Ajax-为 php 填充多个文本框-6ren

javascript - Ajax-为 php 填充多个文本框

转载作者：行者123 更新时间：2023-11-28 01:45:48

26

4

我有一个带有下拉菜单的 html 页面，该菜单可以工作，并且 onchange 调用的函数 popBox() 也可以工作。在该函数中，我使用 ajax 将下拉菜单的值发布到 php 中，并在其中从数据库中选择。我希望使用所选信息填写“DetailsForm”表单中的文本框。我目前没有填写任何文本框，警报(消息)在警报框中显示页面的整个 html 部分。有人可以帮我解决我的问题吗？我已经尝试了 ajax 和 jquery 的多种不同变体来执行此操作，在同一功能上运行 15 小时后，至少可以说我开始感到有点沮丧。预先感谢您的任何帮助，我非常感激。

这是我的代码:HTML

    <head>
    <link href="../UserTemplate.css" rel="stylesheet" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Tours</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">  </script>

    <script type="text/javascript">
    function popBox(str)
    {
        $.ajax({
      type: "PopulateBoxes.php",
      data: { dat: str}
      }).done(function( msg ) { //you can also use success
       alert( "Data Saved: " + msg );
      });
     //document.getElementById("txt_Duration").value = <?php Print($Duration); ?>;
     //document.getElementById("txt_Vessel_Name").value = <?php Print($Vessel); ?>;
     //document.getElementById("txt_Location").value = <?php Print($Location); ?>;
     //document.getElementById("txt_Available").value = <?php Print($Available); ?>;
     //document.getElementById("txt_Price").value = <?php Print($Price); ?>;
    }
    </script>
    </head> 
    <body>
    <div id="MainDiv">
        <div id="Header">
            <div id="Logo"><img src="../Scotia Sea Life Logo.png" width="150px"  height="110px" alt="Company Logo"/></div>
             <div id="NavBar"><ul>
                        <a href="homepage.php">Home</a> <a href="SelectStudentScore.php">Tours</a> <a href="AdditionPageMain.php">About</a> <a href="SubtractionPageMain.php">Donate</a> <a href="Devisionmain.php">Account</a>
               </ul>
         </div>     
           <div id="Title">Tours</div>
      </div>
            <div id="Content">
              <div id="Search">
                <div id="SearchDiv">
               <form id="SelectTourForm" style="margin:5px;">
                           <table border="0" align="center" width="100%">
                                        <tr>
                                        <td>
                                        <label style="color:#FFF; font:Georgia, 'Times New  Roman', Times, serif; font-size:20px; margin-left:10px; margin-top:25px">Select Tours  Details</label></td>
                                        </tr>
                                        <tr>
                                          <td><select name="lst_MonthDrop"  style="background-color:#FF9933; color:#FFF; border:none; margin-top:10px; margin- left:10px;" onchange="popBox(this.value);">
                                                <option>Please Select</option>
                                                 <?php 
                                                 include 'populatedrodown.php';
                                                 foreach ( $results as $option ) : ?>
                                                      <option value="<?php echo $option- >Date; ?>"><?php echo $option->Date; ?></option>
                                                 <?php endforeach; ?>
                                            </select>
                                            <input type="submit" name="btn_TourSearch" id="btn_TourSearch" value="Search" style="background:#009300; border-radius:5px; border-color:#009300; color:#FFF;margin-left:5px;" /></td>
                                        </tr>
                                        <tr> 
                                          <td></td>
                                        </tr>      
                        </table>

                        <p>&nbsp;</p>
              </form>

            </div>
          </div>
          <div id="DetailsDiv">
            <div id="DetailsContent">
                <form id="DetailsForm" >
                    <table border="0" align="center" width="100%">
                    <tr><td><label style="color:#FFF; font-size:14px;">Tour ID</label>    <input type="text" id="Tour_ID" />    </td></tr>
                    <tr><td><label>Duration</label> <input type="text" id="txt_Duration" />     </td></tr>
                    <tr><td><label>Vessel Name</label> <input type="text"    id="txt_Vessel_Name"/> </td></tr>
                    <tr><td><label>Location</label> <input type="text" id="txt_Location" />   </td></tr>
                    <tr><td><label>Date</label> <input type="text" id="txt_Date" />        </td></tr>
                    <tr><td><label>Available</label> <input type="text" id="txt_Available" />  </td></tr> 
                    <tr><td><label>Price</label>  <input type="text" id="txt_Price" />     </td></tr>         
                    </table>
                </form>
            </div>
          </div>













        </div>
        <div id="Footer">
        <div id="FooterLinks"></div>
    </div>
</div>
</body>
</html>

PHP

    <?php
    $q = $_POST['dat'];

    $mysql_db_hostname = "localhost"; 
    $mysql_db_user = "root"; 
    $mysql_db_password = "pwd"; 
    $mysql_db_database = "db";

    $con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or   die("Could not connect database");
    mysql_select_db($mysql_db_database, $con) or die("Could not select database"); 

    $sql="SELECT * FROM Tour WHERE Date = '".$q."'";

    $result = mysqli_query($con,$sql);


    while($row = mysqli_fetch_array($result))
      {

     $Duration = $row['Duration'] ;
     $Vessel = $row['Vessel_Name'] ;
     $Location = $row['Location'] ;
     $Available = $row['Available'];
     $Price = $row['Price'];
      }

    mysqli_close($con);
    ?>

最佳答案

尝试修改类似这样的 JS 代码:

 function popBox(selectValue) {
   $.ajax({
     type: 'POST',    
     url: "PopulateBoxes.php",
     data: { dat: selectedValue },
     success: function(serverResponse) {
       // after success request server should return response with data 
       // that will be passed to this callback function as parameter
       // and you can use it to fill text boxes:
       $('#txt_Duration').val(serverResponse.duration);
     }
   });
 }

您还应该修改 PHP 代码以返回 JSON 格式的数据:

// At the end you should return selected array. For example:    
echo json_encode($dataArray); exit;

关于javascript - Ajax-为 php 填充多个文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20341119/

26

4

0

文章推荐： javascript - 仅选中一个复选框

文章推荐： html - 在全出血背景上创建一段白色背景

html - 填充 :initial vs. 填充:0
padding:initial 比 padding:0 有什么优势吗？示例: textarea { padding: 0; } Hello, world! 最佳答案它们的意思是一
java - 使用 JButton 填充 JList 并使用 Jlist 上的 DoubleClick 填充 JTextField
我尝试通过按钮填充 JList，然后在先前填充的 Jlist 上使用 DoubleClick 填充 JTextField。代码: private void extractUsedVariables
jquery添加宽度+填充；
我正在尝试做 var width = ($(this).width() + $(this).css('padding-left') + $(this).css('padding-right' ))；
CSS悬停没有文本边距/填充
我在导航中添加了悬停效果，遗憾的是悬停也影响了上面的文字。如何在不影响文本位置的情况下向导航添加悬停？可悲的是，我找不到解决这个问题的方法。 HTML 模板:http://projects.help
F# printf 填充
我是 F# 初学者，下面代码中的 %-5s 和 %5s 有什么作用？我认为它提供了空间填充，但我不确定它是如何填充的？ printfn "%-5s %5s" "a" "b" 当我尝试 prin
Sails.js 填充 where
我需要选择带狗的用户(带 type 等于“狗”的宠物) var User = Waterline.Collection.extend({ identity: 'user', attribute
excel - 如何使用具有一系列值的自动填充/填充
我一直在尝试让 Excel 在一组列上应用公式，然后将模式扩展到整个行集。这导致了以下代码: For i = 0 To avgsheetNames.Count - 1 If Contains(CSt
Flutter TextButton 填充
随着 Flutter 2.0 的发布，FlatButton已被替换为 TextButton . 因此，填充属性不再直接可用，而是作为 ButtonStyle属性(property)。我的问题是，我该
wpf - WPF中的对接/填充
这似乎是一个简单的问题，但我已经尝试了一个小时，似乎无法弄清楚。我要做的就是用 Canvas 填充 MainWindow。我找不到任何允许这样做的属性，我能想到的唯一方法是设置 Canvas.Wid
iPhone 添加了奇怪的左边距/填充
这是a website具有移动 View 。网站宽度为 640 像素，但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。我添加了视口(viewport)元: 主体 C
java - GridBagLayout 填充
我正在使用 GridBagLayout到(当前)显示两行。我知道这种布局对于这项任务来说太过分了，但我正在努力学习如何使用它。问题是我已将两个面板添加到两个单独的行中，并且内容周围存在巨大差距(请参见
javascript - 单击更改谷歌地图多边形颜色/填充
我有以下代码已传递给我并创建多边形: var map; function initialize() { var myLatlng = new google.maps.LatLng(-36.4
java - 填充 JPanel
我在 Jpanel 中有一些项目，然后将其推到顶部并用作基本搜索引擎的工具栏。我遇到一个问题，因为没有足够的空间，所以我的最后一个组合框没有显示。但是，左侧有很多空白空间，我需要移动所有内容来填充 J
c++ - 如何为二进制图像中的形状重新着色以进行索引(填充)？
我创建了带有阈值的二进制图像。如下图所示如何改变白色形状的颜色以使其可索引？到目前为止，这是我的代码: void threshold() { cv::Mat src_8uc3_img = c
java - 填充 JTable
我有一个 JTable，我想知道是否有更好的方法来填充它，这是我的代码: //Metodo para llenar un jtable con datos de la base public stat
python - 从卷中裁剪空数组(填充)
我想要做的是裁剪一个卷以删除所有不相关的数据。例如，假设我有一个 100x100x100 的体积，其中填充了 0，但其中的 50x50x50 体积则填充了 1。如何从原始体积中获得裁剪后的 50x50
Java ArrayList 填充
因此，我正在创建一种对一组数字进行洗牌的方法，其想法是创建这些数字的总体。因此，我创建了一个循环，对数字进行洗牌，然后将其添加到数组列表中，但是经过一些调试语句后，我发现它确实对数字进行洗牌，但只将最
c# - 静态集合是否保证在另一个类使用它之前被初始化/填充？
假设我有这两个类: public class A where T : IEntityWithID, new() { private static EntityInfo entityInfo =
C 中大整型加法中的进位数字/填充
我正在尝试添加用户输入的两个大整数作为字符串。当两个输入字符串的长度不同时，我尝试用零填充较短的数字，但它不起作用。因此，如果我输入 456 和 7，它会给出 3，前面有一些随机字符。感谢您的任何建议
arrays - 填充 UITableViewController
这是我将内容打印到表格 View 的代码 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: Index

首页

博学

6Ren·AI

商城

javascript - Ajax-为 php 填充多个文本框