jQuery ui confirm dialog on multiple forms

StackOverflow https://stackoverflow.com/questions/3880815

Question

I have a few forms on the same page and I want to add a confirm dialog to all of them using the same code. They all have a class of confirm-form and the title of the confirm dialog should be generated dynamically (which isn't working atm).

In the html I have the dialog that gets hidden when the page loads, it then gets shown once the dialog('open') function is called.

This is what I have now and it just isn't working at all, the dialog loads but once you press confirm, it repeats the else clause a lot and doesn't submit the form:

var deleteConfirmed = false;
$('form.confirm-form').submit(function(e) {
if ( ! deleteConfirmed)
{
    e.preventDefault();
    var title = $(this).find('input.action').val();
    var $this = $(this);
    console.log('title: ' + title);

    $('#confirm-dialog').attr('title', title);

    $('#confirm-dialog').dialog({
        buttons : {
            "Confirm" : function() {
                deleteConfirmed = true;
                $(this).dialog('close');
                $this.submit();
            },
            "Cancel" : function() {
                $(this).dialog('close');
            }
        }
    });

    $('#confirm-dialog').dialog('open');
}
else
{
    $(this).submit();
    deleteConfirmed = false;
}
});
Was it helpful?

Solution

EDIT

Here is one possible solution. I have tested it on a live server since I was getting some unusual behavior on jsFiddle. Note: I scrapped the original post since it did not address multiple forms. And most likely the form submit would be submitted with AJAX.

Source of x.html


<!DOCTYPE html>
<html>
<head><title>SO</title>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
  rel="stylesheet"
  type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>

<div id="dlg1"></div>
<form method="post" action="/so/x.php" id="frm1" name="frm1">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm1_submit">
</form>
<form method="post" action="/so/x.php" id="frm2" name="frm2">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm2_submit">
</form>
<form method="post" action="/so/x.php" id="frm3" name="frm3">
    <input type="text"><br />
    <input type="submit" class="submitter_btn" id="frm3_submit">
</form>


<script type="text/javascript">
var $current = { form : null, do_submit : false };

$('#dlg1').dialog({
    title: "Confirmation",
    width: 300,
    height: 200,
    autoOpen: false,
    modal: true,
    buttons : {
      "Confirm" : function(e){
        $current.do_submit = true;
        $(this).dialog('close');
      },
      "Cancel"  : function(e){
         $current.do_submit = false;
         $(this).dialog('close');
      }
    }
});

$('#dlg1').bind('dialogbeforeclose', function(){
    if($current.do_submit){
      ($current.form).submit();
      $current.form = null;
      $current.do_submit = false;
    }
});

$('.submitter_btn').click(function(e){
    e.preventDefault();
    $current.form = $(this).parents('form:first');
    $('#dlg1').dialog('open');
});


</script>
</body>
</html>

Source of x.php


<?php
echo "HELLO";

OTHER TIPS

I used to home-brew validations until I found this script. It's SO much less brain damage and seems to do well validating just about any type or combination of form element. Just one class declaration per element turns on the validation at a minimum. To do two (or more) per page you'd just instantiate one for each form id or name. Pretty easy!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top