如何在HTML/PHP中创建一个显示表单内容的确认页面 - How to make a confirmation page that shows content of a form in HTML/PHP?

How to make a confirmation page that shows content of a form in HTML/PHP?

我正在为我的数据库制作html/php表单。表单部分以导航选项卡(bootstrap)的形式划分。分别为:Personal Information、Status、Accounts、Projects、Confirm。我如何在确认选项卡中显示前4个选项卡中的所有信息，以便用户可以在提交之前查看?

编辑:据我所知，我必须在确认选项卡中写入所有字段并输入id以显示它们?下面是一个代码示例:

<div class="tab-content">
   <fieldset class="tab-pane active" id=pers_tab">
      <form>
         First name:<br>
            <input type="text" name="firstname"><br>
            <!-- followed by last name, email, phone, etc. -->
      </form>
   </fieldset>
</div>

所以在我的<fieldset class="tab-pane" id="conf_tab">中，我必须写一些像First name: firstname这样的东西?(不确定的语法)我不知道如果名称和id在这种情况下工作相同…

如果你想尝试，我做了一些东西，我希望，是你想做的。

我使用了一些JavaScript和jQuery库。我不知道你是否熟悉它。我试图简单地解释我在做什么，我建议你搜索更多的信息，了解基础。:))我假设你的引导模板已经包含了jquery.js库。

<div class="tab-content">
  <!-- Tab containing the form -->
  <fieldset class="tab-pane active" id="pers_tab">
    <form id="my_form">
      First name:<br>
      <input type="text" name="firstname" id="firstname"><br>
      <!-- Other fields (lastname, email, etc.) -->
      <button type="submit" class="btn btn-default" id="submit_btn">Submit</button>
    </form>
  </fieldset>
  <!-- Tab containing the confirmation infos -->
  <fieldset class="tab-pane" id="conf_tab">
    Please confirm your informations :<br />
    Firstname: <span id="confirm_firstname"><!-- Empty span for now, but we will put the firstname here. --></span><br />
    <button type="submit" class="btn btn-default" id="confirm_btn">Confirm</button>
  </fieldset>
</div>

JavaScript

$(document).ready(function() { $('#submit_btn').click(function() { // Triggered when the element with id 'submit_btn' is clicked. // Get the value of the field with 'firstname' id. var firstname = $('#firstname').val(); // Put it as text in the element with 'confirm_firstname' id. $('#confirm_firstname').text(firstname); // Hide form tab and show confirmation tab $('#pers_tab').removeClass('active'); $('#conf_tab').addClass('active'); // Prevent the form from submitting return false; }); $('#confirm_btn').click(function() { // Submits the form with id 'my_form' $('#my_form').submit(); }); });