PHP没有出现在下一个模式答案

【问题标题】：PHP not showing up on next modalPHP没有出现在下一个模式
【发布时间】：2025-12-03 04:20:27
【问题描述】：

我正在尝试显示用户在新模式中输入的内容，但它没有显示出来。

这得到输入（第一个模态）

<div class="modal fade" id="shipping" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h1 id= "modalHeader" class="modal-title"></h1>
            </div>
            <div align="center" id="imageinfo" class="modal-body">
              <div>
                         <h3 id= "modalHeader"><strong>Shipping Information</strong></h3>
                            <br />

                            <form action="index.php" method="post">
                                <label><b>First Name</b></label>
                                <br />
                                <input type="text" placeholder="Enter First Name" name="fname" required>
                                <br /><br />
                                <label><b>Last Name</b></label>
                                <br />
                                <input type="text" placeholder="Enter Last Name" name="lname" required>
                                <br /><br />
                                <label><b>Address</b></label>
                                <input type="address" placeholder="Enter Address" name="address" required> 
                                <br />
                            <div class="modal-footer">
                            <input type="submit" class="btn btn-default" value="Confirm Address" data-dismiss="static">
                            <button type="submit" class="btn btn-default invoice" data-dismiss="modal">Final Invoice</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                            </form>
              </div>
            </div>
          </div>
        </div>
      </div>

这会输出信息

 <div class="modal fade" id="final" role="dialog">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h1 id= "modalHeader" class="modal-title"></h1>
            </div>
            <div align="center" id="imageinfo" class="modal-body">
              <div>
                  <h3 id= "modalHeader"><strong>Final Invoice</strong></h3>
                  <div class="item">

                                        <div class="invoice">
                                        First Name: <?php echo $_POST["fname"]; ?><br>
                                        Last Name: <?php echo $_POST["lname"]; ?><br>
                                        Address: <?php echo $_POST["address"]; ?><br>
                                        </div>
                  <br />
              </div>
            </div>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>

同样在输入模式中，您可以看到有两个按钮“确认地址”和“最终发票”，确认地址是为了验证信息，然后“最终发票”按钮将转到下一个模式和显示它。

我在我的 js 中使用了这个，所以在我点击确认地址后它不会关闭

$(document).ready(function() {
  $("form").submit(function() {
    return false;
  })
});

【问题讨论】：

标签： javascript php jquery twitter-bootstrap modal-dialog

【解决方案1】：

我假设这是一个单页，那么如果您只想在第二个模态中显示详细信息，为什么要在第一个模态中使用表单？您可以使用 jQuery 简单地访问这些详细信息吗？

在您的 jQuery 中，您需要创建两个函数。第一个用于验证地址第二个用于打开第二个模式。

$(document).ready(function(){
   function validateaddress(address){
     //code to validate address
      if(validate){
      return true; 
      }else{
      return false;
      }
   }

   $("#finalinvoice").click(function(e){
    e.preventDefault();
    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var address = $("#address").val();
    if(validateaddress(address)){
      //Assign value in second model
        $("#showfname").text(fname);
        $("#showlname").text(lname);
        $("#showaddress").text(address);
        $("#final").modal("show");
    }else{
       //Show error for incorrect address
     }
   });

    $("#validateaddress").click(function(e){
    e.preventDefault();
    if(validateaddress($("#address").val())){
     $("#finalinvoice").trigger("click");
     }else{
         //show error
      }

    });
});

使用以下代码更改您的代码

 <div class="modal fade" id="shipping" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h1 id= "modalHeader" class="modal-title"></h1>
        </div>
        <div align="center" id="imageinfo" class="modal-body">
          <div>
                     <h3 id= "modalHeader"><strong>Shipping Information</strong></h3>
                        <br />

                            <label><b>First Name</b></label>
                            <br />
                            <input type="text" id="fname" placeholder="Enter First Name" name="fname" required>
                            <br /><br />
                            <label><b>Last Name</b></label>
                            <br />
                            <input type="text" id="lname" placeholder="Enter Last Name" name="lname" required>
                            <br /><br />
                            <label><b>Address</b></label>
                            <input type="address" id="address" placeholder="Enter Address" name="address" required> 
                            <br />
                        <div class="modal-footer">
                        <input type="button" id="validateaddress" class="btn btn-default" value="Confirm Address" data-dismiss="static">
                        <button type="button" id="finalinvoice" class="btn btn-default invoice" data-dismiss="modal">Final Invoice</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      </div>

          </div>

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

第二模态

 <div class="modal fade" id="final" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h1 id= "modalHeader" class="modal-title"></h1>
        </div>
        <div align="center" id="imageinfo" class="modal-body">
          <div>
              <h3 id= "modalHeader"><strong>Final Invoice</strong></h3>
              <div class="item">

                                    <div class="invoice">
                                    First Name: <span id="showfname"></span>
                                    Last Name: <span id="showlname"></span>
                                    Address: <span id="showaddress"></span>
                                    </div>
              <br />
          </div>
        </div>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>

删除这个

$(document).ready(function() {
$("form").submit(function() {
return false;
 })
  });

【讨论】：

您遇到什么错误？ @Kevin您需要检查语法错误，因为我没有测试过。但在逻辑上它是正确的。

【解决方案2】：

按照这个步骤-

使用 Ajax 提交表单。
更改输入类型提交为按钮
成功后打开另一个模式。

【讨论】：

【解决方案3】：

要获得此工作的简单 POST 版本：尝试从您实际想要工作的提交按钮中删除 data-dismiss 属性，而不是：

<button type="submit" class="btn btn-default invoice" data-dismiss="modal">Final Invoice</button>

试试：

<button type="submit" class="btn btn-default invoice">Final Invoice</button>

看起来您正在使用 Bootstrap 的模态框架，如果按钮上有 data-dismiss，它将停止传播按钮的通常提交事件。这应该会像往常一样触发正常的浏览器重新加载。

但是，如果您希望网站的用户停留在模态等状态，那么您需要通过某种 AJAX 提交表单。

【讨论】：