Question

我试图显示用户在新模态上输入的内容但它没有显示。

这获得输入（第一模态）

<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>

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

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

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

Answer 1

按照以下步骤 -

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

Answer 2

要获得此工作的简单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提交表单。

Answer 3

我认为这是一个单页然后如果你只是想在第二个模态中显示细节，为什么你在第一个模态中使用表单？您可以使用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;
 })
  });

PHP没有出现在下一个模态上

3 个答案: