CODEWITHSUNDEEP
javascriptjqueryhtmlforms
anwartheravian
anwartheravian

Reputation: 1101

jQuery form getting submitted multiple times

I've made a simple lightbox implementation in my code. By Clicking on #makePayment link a lightbox is opened, and within that lightbox there is a form. When user clicks on #paymentDetailsConfrimLB to submit the form, I've just displayed an alert.

Before I explain the problem, please have a look at the code I've written:

       $("#makePayment").click(function() { 
            $("body").addClass("modalPrint");
            var lb = new LightBox("paymentDetailsLB", "675", "500");
            lb.htmlObjRef.style.height = "auto";
            lb.show();
            $("#paymentDetailsCloseLB, .hideBox").click(function() {
                $("body").removeClass("modalPrint");
                lb.hide();
            });//paymentDetailsCloseLB
            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB
          return false;
        });//makePayment

Problem is, when I first load the page, and open the lightbox, and click the submit button, the alert is shown once (as it should), but if I close the lightbox, re-open it, and then submit the form, it is submitted twice and alert is shown twice. Similarly if I again close and re-open the lightbox, upon form submission the alert shows up 3 times, and it goes on like this.

Any idea on how I can resolve this?

Upvotes: 1

Views: 1284

Answers (4)

anwartheravian
anwartheravian

Reputation: 1101

Other than Kavin's approach, another solution also worked for me. I just added this line immediately after the event.preventDefault() method:

  event.stopImmediatePropagation()

And it resolved the issue.

Upvotes: 4

Kevin
Kevin

Reputation: 2802

You're binding a new handlers every time the submit button is clicked. You only need to define a handler once, and it will be executed whenever that action occurs. Otherwise, each handler you bind will execute.

If you absolutely needed to bind the handlers the way you are, then you could also use .one, which will only bind the handler the first time for each element.

jQuery .one() documentation

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Try something like this.

$(document).on('click', '#makePayment', function() {
  $("body").addClass("modalPrint");
  var lb = new LightBox("paymentDetailsLB", "675", "500");
  lb.htmlObjRef.style.height = "auto";
  lb.show();
  return false;
}).on('click', '#paymentDetailsCloseLB, .hideBox', function() {
  $("body").removeClass("modalPrint");
  lb.hide()
}).on('click', '#paymentDetailsConfrimLB', function() {
  alert('form submission happened.');
  event.preventDefault();
  return false;
});

Upvotes: 0

Greg Borbonus
Greg Borbonus

Reputation: 1384

The problem is: 

            $("#paymentDetailsConfrimLB").click(function( event ) {
               alert('form submission happened.');
               event.preventDefault();
               return false;
            });//paymentDetailsConfrimLB

it adds to the click queue, so to speak. So if you add multiple click events to something, all of them get added and all of them run by default. You don't notice it because all your other functions don't matter about being run multiple times.

A way to solve this is to put a check within the function.

        $("#paymentDetailsCloseLB, .hideBox").click(function() {
            $("body").removeClass("modalPrint");
            lb.hide();

        });//paymentDetailsCloseLB
         pDCLB=$("#paymentDetailsConfrimLB");
         if(!pDCLB.attr('alertc')); //check if the attribute exists, if not, we've never been here before.
             pDCLB.attr('alertc',1); //adds the attribute so we can check it later.
             $("#paymentDetailsConfrimLB").click(function( event ) {
                alert('form submission happened.');
                event.preventDefault();
                return false;
              });//paymentDetailsConfrimLB
          }

Upvotes: 0

Ledzz
Ledzz

Reputation: 1286

You're setting click callback every time you open lightbox. Try to move click callbacks out of #makePayment:

$("#makePayment").click(function() { 
    $("body").addClass("modalPrint");
    var lb = new LightBox("paymentDetailsLB", "675", "500");
    lb.htmlObjRef.style.height = "auto";
    lb.show();          
    return false;
 });//makePayment
 $("#paymentDetailsCloseLB, .hideBox").click(function() {
     $("body").removeClass("modalPrint");
     lb.hide();
 });//paymentDetailsCloseLB
 $("#paymentDetailsConfrimLB").click(function( event ) {
     alert('form submission happened.');
     event.preventDefault();
     return false;
 });//paymentDetailsConfrimLB

Upvotes: 1

Related Questions