title: How do I keep users input after closing modal in the same page without reload?
body: <p>I want to be able to keep the data that the user decided in the checkbox of the modal and send it with the checkbox decision outisde of the modal without leaving the page or reloading. </p>
  
  <p>If the user decides to check the checkbox within the modal how do I keep that data when I press continue to then wait for the submit button to send tha values of all the checkboxes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var btn = document.getElementById("myBtn");
  
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The Modal (background) */
  
  .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
  }
  /* Modal Content */
  
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  /* Add Animation */
  
  @-webkit-keyframes animatetop {
    from {
      top: -300px;
      opacity: 0
    }
    to {
      top: 0;
      opacity: 1
    }
  }
  @keyframes animatetop {
    from {
      top: -300px;
      opacity: 0
    }
    to {
      top: 0;
      opacity: 1
    }
  }
  /* The Close Button */
  
  .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }
  .modal-body {
    padding: 2px 16px;
  }
  .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Trigger/Open The Modal --&gt;
  &lt;button id="myBtn"&gt;Open Modal&lt;/button&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;span class="close"&gt;×&lt;/span&gt;
        &lt;h2&gt;Modal Header&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Some text in the Modal Body&lt;/p&gt;
        &lt;p&gt;Some other text...&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;h3&gt;Modal Footer&lt;/h3&gt;
        &lt;input type="checkbox" name="option" /&gt;
        &lt;input type="submit" value="continue" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="checkbox" name="value" /&gt;
    &lt;input type="submit" value="Send" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>