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个模态，但使实际的身体内容动态化。你很可能需要以某种方式做这个客户端。例如。第一次通过模态运行知道它在提交模式，因此呈现该UI，然后在提交时获取新内容（或者您可能必须创建一个新的服务器端点，只返回新内容）模态切换到显示模式，然后更新模态中的DOM元素。根据您拥有的内容，您可能需要让模态重新触发其高度检查并自行调整。

对于＃2，我们假设您有一些响应有效负载，它告诉您新的模态内容应该是什么，这可能是JSON，原始文本，XML等。这个有效负载可能是第一个表单提交的响应，或者可能是在提交后返回另一个服务器端点，返回新内容的表示。

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

最终，我的猜测是它将成为客户端操作，但是你从哪里开始取决于你的数据以及你需要在第二模态中构建多少复杂的UI。

我可以将值POST到MySQL中并在Bootstrap Modal上同时查看吗？

1 个答案: