Lightbox On Form Submit

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 th

Solution 1:

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?

Solution 2:

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;
}
.exitbutton {
  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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><h1>Simple Form</h1><formid="myForm"action="https://posttestserver.com/post.php"method="POST"target="output_frame"><inputtype="text"name="myInput"id="myInput"value="Your Post Input"class="rounded" /><inputtype="submit"value="Submit"class="rounded"/></form><divclass="lightboxOuter"><divclass="lightboxInner"><divclass="exit"><button>X</button></div><iframename="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