ansaurus

Question

jQuery ui confirm dialog on multiple forms

Answer 1

+2 A:

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"&gt;
</script>
<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;
</script>
<link
  rel="stylesheet"
  type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/&gt;
</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";

jtp 2010-10-07 12:54:25

this did work thanks! i solved it in a different way though before i read your post, it's probably not as good as yours but it works! when they've confirmed the action, i just forward them to where the form processing takes place, instead of trying to submit the form. this would be so much easier though if there was an opposite function to "preventDefault()"

Becky 2010-10-08 09:23:58

You are welcome. I'm glad it helped. I had a similar requirement to replace plain vanilla JavaScript alert dialogs with the jQuery dialogs instead. After playing around with the posted code snippet a little later, I was able to factor out the '.bind' and the do_submit attribute of object literal assigned to $current. As for the inverse or the reversing of event.preventDefault(), the relevant jQuery API page has some interesting comments related to this http://api.jquery.com/event.preventDefault/.

jtp 2010-10-08 16:09:05

Answer 2

A:

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!

bpeterson76 2010-10-07 22:13:42

That's awesome. Gotta try that myself. Thank you for the link.

jtp 2010-10-07 22:43:57

my form validation is all done from within kohana, I wanted something that would popup a little confirmation box saying "are you sure you want to delete this etc.." when a user opted to delete something, thanks for the link though!

Becky 2010-10-08 09:21:20

Becky, we do our validation on the back-end as well.....this script allows you to easily do front-end validation. While it may not answer your question, doing client-side validation is nearly always preferably to just back end because it's faster and interrupts the user experience just that much less. It also saves hits to your server.

bpeterson76 2010-10-08 21:39:10

ansaurus

tags:

views:

answers:

jQuery ui confirm dialog on multiple forms

related questions