php - 我可以将值发布到 MySQL 并同时在 Bootstrap Modal 上查看它吗？

Question

我有一个表单，它将值发布到 MySQL 数据库中，但是我想在提交表单后在模态中显示这些值，但我不知道我做错了什么。

这是我的表单片段:

 <form action="menuactions/temporesto.php" method="post" enctype="multipart/form-data">
   <label class="control-label">First Name:</label>
 <input class="form-control" placeholder="John" type="text" name="first_name" required autofocus/>
<br />
<label>Last Name:</label>
<input class="form-control" placeholder="Doe" type="text" name="last_name" required/>
<br />
<label>Contact:</label>
<input class="form-control" placeholder="Email/Phone Number" type="text" name="contact" required/>
<br /><label>Order Date:</label>
<input class="form-control" placeholder="mm/dd/yy" type="text" name="eventdate" required/>
<br />
    <label>Event Time:</label>
    <br />
    <select id="eventtime" class="form-control" name="eventtime1">
     <option value="item0">--Select Time--</option>
     <option value="11:00 am - 2:00 pm">11:00 am - 2:00 pm</option>
     <option value="6:00 pm - 9:00 pm">6:00 pm - 9:00 pm</option>
     <option value="7:00 pm - 10:00 pm">7:00 pm - 10:00 pm</option>
     <option value="3:00 pm - 6:00 pm">3:00 pm - 6:00 pm</option>
     <option value="4:00 pm - 7:00 pm">4:00 pm - 7:00 pm</option>
    </select>
    <br/>
    <label>Event Hours:</label>
    <br />
    <input class="form-control" id="eventhours" value="3 Hours" type="text" name="eventhours1" readonly/>
    <br />

 <button type="submit" name="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#checking">Submit</button>
 </form>  

这是我的模态:

 <!-- Modal -->
 <div id="checking" class="modal fade" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times; </button>
     <h4 class="modal-title">Reservation Information</h4>
    </div>
    <div class="modal-body">
       <label><h2>Name: <?php echo $row['first_name'];?> </h2></label>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>

还是我必须在新页面而不是模态窗口中打开它？

我可以将这些值提交到 MySQL 中，但它不会显示在模式中。

Answer 1

如果最终目标是使模态内容动态化，您有两种选择:

1. 使用两个模式，一个用于表单提交，然后在提交时关闭，然后打开第二个模式。也许通过阅读第一次提交的回复，其中包含您需要填充第二个模态的所有内容。这意味着用户看到的是第一个模式隐藏和第二个显示，这可能并不理想。

2. 使用 1 个模态，但使实际正文内容动态化。您很可能需要以某种方式在客户端执行此操作。例如。第一次运行模式知道它处于 submit 模式，因此呈现该 UI，然后在提交时获取新内容(或者您可能必须创建一个只返回新内容的新服务器端点)模态切换到 显示 模式，然后您可以在其中更新模态内的 DOM 元素。根据您拥有的内容量，您可能需要让模态重新触发其高度检查并自行调整。

无论哪种方式，我们都假设您有某种响应负载，它告诉您新的模式内容应该是什么，这可能是 JSON、原始文本、XML 等。此负载可能是响应来自第一个表单提交，或者它可能来自提交后返回新内容表示的另一个服务器端点。

在实现 #2 方面，您可以直接使用 Javascript/jQuery 来实现，并动态创建新的 DOM 元素，或者您可以使用客户端模板语言(如 Handlebars 或 Mustache)，或者您可以实现一个解决方案就像 Vue.js 一样，它只管理模态内容。

最终，我的猜测是这将是客户端操作，但你从那里去哪里取决于你的数据以及你需要在第二个模式中构建多少复杂的 UI。