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 the framework is implemented, the add to cart button itself is part of a form that submits to the page that contains the above mentioned form. So, how do i get the add to cart button to load the next form in a lightbox?

Answers:

Answer

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?

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.