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

by


In case your want to try, I made something that, I hope, is what you wanted to do.

I used some JavaScript and jQuery library. (I have no idea if you are familiar with it or not. I tried to explain simply what I am doing, I recommand you to search for more informations about it and learn the basis. 🙂 )
I assume your bootstrap template already includes jquery.js library.

HTML

<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();
  });
});

1

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