使用 PHP 从 from 到 bootstrap 模式传递数据

Posted 2023-05-08

【中文标题】使用 PHP 从 from 到 bootstrap 模式传递数据

【英文标题】：Passing data from a from to bootstrap modal using PHP

【发布时间】：2018-06-22 14:23:02

【问题描述】：

我想使用 php 将数据从这个 textbox 传递给一个模式

文本框代码：

 <input type="text" id="weights" class="form-control" placeholder="Weight (lbs)" name="weight">

这是按钮代码：

<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModalCenter" id="buttonx">Submit</button>

Jquery 代码：

 $(document).ready(function() 
  $('#exampleModalCenter').on('show.bs.modal', function(e) 
    var weight = document.getElementById("weights");
    $.ajax(
      type: 'post',
      url: 'showResult.php',
      data: 'weight=' + weight,
      success: function(data) 
        $('#fetched-data').html(data);
      
    );
  );
);

模式代码：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Results</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
      </div>
      <div class="modal-body" id="fetched-data">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

PHP：

<?php
$data=$_POST["weight"];
echo "The weight is $data";
?>

当我点击按钮时，什么都没有出现。即使是模态，也没有出现。

【问题讨论】：

控制台有错误吗？另请注意，document.getElementById("weights"); 得到 Object 而不是 value

这很正常，什么都没发生，你第一次使用 jquery - 第二次你的 div id = feteched data 在哪里？我什么地方都看不到？我们还需要 showresult.php

您的演出结果有问题！只需回显“$data”；开始并在您的 submit.php 中 var_dump 您的 $ 数据 ...

【参考方案1】：

代码中的问题

首先，您没有获得 weights 变量中的值。 由于 data-target 属性，您无法触发模态。 您无法将值传递给您的 ajax 调用。

以下解决方案可能会解决您的问题：

希望这支笔 -> https://codepen.io/afzal_coder/pen/rpKdgK 解决您的疑问。

并将此代码添加到您的 php 文件中。

<?php 
$data = $_POST['weight'];
echo $data;
?>

【讨论】：

除了数字1，其余都是错误的，是否可以用data-target触发模态，也可以将值传递给ajax。这不是这个问题的真正答案。

请看截图：-> prnt.sc/hzt6ge 我可以检索到用户在文本框中输入的值。

所以？我知道可以将文本框值传递给模态。但是数字2和3是错误的，都是可能的。

我试过钢笔@KhanAfzal，但即使我在文本框中输入了一些东西，它仍然没有显示任何东西。

我在控制台上有这个错误。 ncaught TypeError: $.ajax is not a function at HTMLDivElement. ((index):129) at HTMLDivElement.dispatch (jquery-3.2.1.slim.min.js:3) ......跨度>