Lightbox on form submit

Question

I am working on an ecommerce site for which, i want the add to cart button to open a lightbox with a form to accept some more details like quantity, etc. The problem is, the way

Answer 1

I will add more details when I have time, but you can set a 'target' for the initiating form's which directs the action output to appear in the specified iframe (make the target='iframe_name' then in the iframe set the name='iframe_name');

jQuery("#myForm").on("submit", function() {
  jQuery(".lightboxOuter").show();
});

jQuery(".exit button").on("click", function() {
  jQuery(".lightboxOuter").hide();
});

.lightboxOuter {
  width: 99vw;
  height: 99vw;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: none;
}
.lightboxInner {
  width: 50%;
  height: 50%;
  margin: 30px auto;
}

.exit {
  text-align: right;
  position: relative;
  top: 1.5em;
}
.exit button {
  border-radius: 100%;
  display: inline-block;
  margin-left: 90%;
  background: black;
  color: white;
}

iframe.sexy {
  background: white;
  border-radius: 5px;
  max-height: 35%;
}

.rounded {
  border-radius: 5px;
}

html {
  overflow: hidden;
  font-family: Arial, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>Simple Form</h1>
<form id="myForm" action="https://posttestserver.com/post.php" method="POST" target="output_frame">
  <input type="text" name="myInput" id="myInput" value="Your Post Input" class="rounded" />
  <input type="submit" value="Submit" class="rounded"/>
</form>

<div class="lightboxOuter">
  <div class="lightboxInner">
    <div class="exit">
      <button>X</button>
    </div>
    <iframe name="output_frame" class="sexy" src="https://posttestserver.com/" id="output_frame" width="100%" height="100%">
</iframe>
  </div>
</div>

then instead of stopping propagation and preventing defaults (as suggested above) you'd want to wire-up/fire some JS to bring the targeted iframe up in a lightbox wrapper.

Or see codepen.io/reboot-sequence/pen/WOxYWO

Answer 2

Just attach a click handler onto the button that submits the form, like so:

$("#id_of_submit_button").click(function(e) {

    e.preventDefault();
    e.stopPropagation();

});

That will keep the form from being submitted (or at least, it should). As for opening the lightbox, you should be able to just include that after the e.stopPropagation(); call above...just open it as normal.

The major problem you are probably going to have is how to include the information from the additional form in the lightbox with the original form. You may just want to submit all of it via a $.post call, or perhaps do some $("form").append() calls to insert hidden fields into the original form based on the information in the lightbox?