JavaScript Help to change this on(click to on submit

[chrisj]

How can I change this JS so that it displays upon submit ?

<button id="submit-btn" class="btn-main" disabled>Submit</button></div>

<script>
$('.open-popup').on('click', function() {
  $('.overlay').addClass('shown');
});
$('.popup-close').on('click', function() {
  $('.overlay').removeClass('shown');
});
</script>

Any guidance is appreciated

 

[Johna]

What do you want to display on submit?

 

[chrisj]

What do you want to display on submit?

Thanks for your reply. I want to submit this:

<div class="layout"> <span class="open-popup">Open popup</span> </div>
<div class="overlay overlay--bg-black">
  <section class="popup" style="width: 50%;">
          <span class="popup-close"></span>
        <h3 class="pop_head">Popup Heading</h3>
          <div class="pop_body">
            <p>Lorem ipsum dolor sit amet, beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
        </div>
        <div class="pop_footer text-right">
        </div>
  </section>
</div>

I look forward to any additional comments/assistance

 

[Johna]

So if I understand correctly, you want to display this:

<div class="layout"> <span class="open-popup">Open popup</span> </div>
<div class="overlay overlay--bg-black">
  <section class="popup" style="width: 50%;">
          <span class="popup-close"></span>
        <h3 class="pop_head">Popup Heading</h3>
          <div class="pop_body">
            <p>Lorem ipsum dolor sit amet, beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
        </div>
        <div class="pop_footer text-right">
        </div>
  </section>
</div>

when this is clicked:

<div class="layout"> <span class="open-popup">Open popup</span> </div>

And this is the code you've tried?

<script>
$('.open-popup').on('click', function() {
  $('.overlay').addClass('shown');
});
$('.popup-close').on('click', function() {
  $('.overlay').removeClass('shown');
});
</script>

Is that correct?

 

[chrisj]

yes

 

[Johna]

Then that code should work if you have this CSS:

.overlay {
  display: none;
}

.shown {
  display: block;
}

As I see you're using jQuery, you could also use the jQuery css() method like this:

$('.open-popup').on('click', function() {
  $('.overlay').css('display', 'block');
});
$('.popup-close').on('click', function() {
  $('.overlay').css('display', 'none');
});

If you're using this method you will still need to give the overlay class this css: display: none;, but you wouldn't need the shown class.

 

[chrisj]

Thanks for your kind help, however, with this:

$('.open-popup').on('click', function() {
  $('.overlay').css('display', 'block');
});
$('.popup-close').on('click', function() {
  $('.overlay').css('display', 'none');
});

and this:

<div class="layout"> <span class="open-popup">Open popup</span> </div>
<div class="overlay overlay--bg-black">
  <section class="popup" style="width: 50%;">
          <span class="popup-close"></span>
        <h3 class="pop_head">Popup Heading</h3>
          <div class="pop_body">
            <p>Lorem ipsum dolor sit amet, beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
        </div>
        <div class="pop_footer text-right">
        </div>
  </section>
</div>

and this:

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    text-align: center;
    white-space: nowrap;
    display:none;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
      display: none;
}

the form submits without the pop up display.
Any additional suggestions are welcomed

 

[Johna]

Where's the form you're submitting?

 

[chrisj]

 <form action="" class="form-horizontal setting-panel pt_forms pt_upld_page_frm" method="POST">
....
</form>

   $('#upload-form form').ajaxForm({
   url: '{{LINK aj/ffmpeg-submit}}?hash=' + $('.main_session').val(),
    beforeSend: function() {
       $('#submit-btn').attr('disabled', true);
       $('#submit-btn').val("{{LANG please_wait}}");
},
 success: function(data) {
         if (data.status == 200) {
window.location.href = '{{LINK home}}';
         }