PHP没有出现在下一个模式中

Question

I'm trying to show what the user inputted on a new modal but it's not showing up.

This gets the input (first modal)

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

This outputs the info

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

Also in the input modal you can see that there two buttons "confirm address" and "Final invoice" the confirm address is so that it will validate the info and then the "Final invoice" button will go to the next modal and display it.

I use this in my js so that after I click the confirm address it doesn't close

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

Answer 1

Follow this steps-

1. Use Ajax to submit the form.
2. Change the input type submit to button
3. On success open another modal.

Answer 2

To get a simple POST version of this working: try removing the data-dismiss attribute from your submit button that you actually want to work, so instead of:

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

Try:

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

Looks like you're using Bootstrap's modal framework, which stops the usual submit event for the button propagating if it has data-dismiss on it. This should then trigger a normal browser reload as usual.

However, if you want the users of the site to stay in the modal etc, then you'll need to submit the form via some kind of AJAX.

Answer 3

I assume this is a single page then Why you are using form in first modal if you just want to display the detail in 2nd modal? You can simply access this details using jQuery?

In your jQuery you need to create two functions. 1st for validate the address 2nd for opening the second modal.

$(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
      }

    });
});

Change your code with below code

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

2nd modal

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

remove this

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