Как я могу отобразить поля мультиформ с помощью Bootstrap modeal в качестве предварительного просмотра перед отправкой? - PullRequest
Новая
       17

Как я могу отобразить поля мультиформ с помощью Bootstrap modeal в качестве предварительного просмотра перед отправкой?

0 голосов
/ 16 декабря 2018

Это мой код HTML и JavaScript.Каков наилучший способ отображения этих полей в качестве предварительного просмотра?HTML-код уже включает в себя Bootstrap Modal.

HTML 

  <form id="regForm" method="POST" action="#">

    <h1>Register:</h1>

    <!-- One "tab" for each step in the form: -->
    <div class="tab">Name:
      <p><input placeholder="First name..." oninput="this.className = ''" name="fname" id="fname"></p>
      <p><input placeholder="Last name..." oninput="this.className = ''" name="lname" id="lname"></p>
    </div>

    <div class="tab">Contact Info:
      <p><input placeholder="E-mail..." oninput="this.className = ''" name="email" id="email"></p>
      <p><input placeholder="Phone..." oninput="this.className = ''"  name="phone" id="phone"></p>
      <button data-toggle="Modal" data-target="myModal">preview</button>
    </div>


    <div style="overflow:auto;">
      <div style="float:right;">
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
        <button type="button" id="nextBtn"  onclick="nextPrev(1)">Next</button>
      </div>
    </div>
    <!-- Circles which indicates the steps of the form: -->
    <div style="text-align:center;margin-top:40px;">
      <span class="step"></span>
      <span class="step"></span>

      <!-- <span class="step"></span>
      <span class="step"></span> -->
    </div>
  </form>
  <a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-name="fname" lastname="lname" email="email" phone="phone" data-target="#myModal">Buy Now</a>
  <div class="container">

    <!-- Button to Open the Modal -->

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>

            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <form action="">
              <input type="text" id="fname" />
              <input type="text" id="lname" />
              <input type="text" id="email" />
              <input type="text" id="phone" />
            </form>

            <!-- Modal footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

          </div>
        </div>
      </div>

    </div>

    <script src="register.js"></script>

  </body>
  <script src="register.js" type="text/javascript"></script>
</html>

JavaScript

Я еще не добавил ни одногозапросить модал Bootstrap в коде JavaScript, когда я попробовал, это не сработало. 

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } 
  else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }

  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Пока что он отображает форму по шагам.Но как я могу отобразить все поля в модале, а также добавить оттуда кнопку отправки?

1 Ответ

0 голосов
/ 17 декабря 2018

Попробуйте вызвать функцию showTab после всех загруженных html: 

document.addEventListener('DOMContentLoaded', function() {
    showTab(currentTab);
}, false);
...