JQuery on submit show dialog

Question

First sorry for my bad English.

I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.

I tried this:

Layer:

<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
<a href="#" id="yes">Yes</a> <a href="#" onclick="closeconfirmwin()">No</a>
</div>

JavaScript:

$(document).ready(function(){
  $("#yes").click( function() {
    $("#form").off("submit").submit();
  });
  $("#form").on("submit", function() {
    $('#confirmwin').show();
    return false;
  });
});

Sometimes (not always) it looks like it's in an endless loop.

Perhaps the #yes click event's off event goes wrong.

What did you try so far to get this working?

Robin van Baalen
– Robin van Baalen

2013-01-23 15:15:21 +00:00
Commented Jan 23, 2013 at 15:15 — Robin van Baalen
– Robin van Baalen, Commented Jan 23, 2013 at 15:15

Robin Maben · Accepted Answer · 2013-01-23 15:17:15Z

1

Have you tried removing the .submit() while turning it off?

$("#form").off("submit").submit();

shouldn't it be..

$("#form").off("submit")  //if

and only if confirmed proceed to do..

$("#form").submit(); //then you can /off() but I don't see the need to

answered Jan 23, 2013 at 15:17

Robin Maben

23.3k16 gold badges70 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin van Baalen · Accepted Answer · 2013-01-23 15:20:57Z

1

One solution would be to pass extra parameters while triggering the submit event. You can read more about event data in the jQuery API here.

$("#yes").click( function() {
    $("#form").trigger("submit", [true]);
});

$("#form").on("submit", function(e, blnConfirmed) {
    // If it's not confirmed yet, show the overlay.
    if (!blnConfirmed) {
        $('#confirmwin').show();
        return false;
    } // else it actually IS confirmed, do a real submit
});

You should test this code first. It's just an example.

answered Jan 23, 2013 at 15:20

Robin van Baalen

3,6712 gold badges24 silver badges36 bronze badges

Comments

Pawel Pawlowski · Accepted Answer · 2013-01-24 14:33:31Z

1

It is easy:

Just add an global var:

var ignoreConfirm = false;

so it will look like:

$("#yes").click( function() {
  ignoreConfirm = true;
  $("#form").off("submit").submit();
});

$("#form").on("submit", function() {
  if(!ignoreConfirm){
   $('#confirmwin').show();
   return false;
  }
});

edited Jan 24, 2013 at 14:33

answered Jan 23, 2013 at 15:21

Pawel Pawlowski

333 bronze badges

Comments

Ricardo Vieira · Accepted Answer · 2013-01-24 15:50:55Z

1

simples as this

<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">

//bla bla bla here

</form>

function callJavascriptFunctionConfirm(){
   //do the logic here
   if (yes) 
      return true; 
   else
      return false;
}

}

answered Jan 24, 2013 at 15:50

Ricardo Vieira

7407 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery on submit show dialog

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related