1

I have a jQuery dialog that posts a form when the "Please Confirm" button is clicked.

I see my post data, but the button is missing its name/value: enter image description here

How can I get it to display the button name/value?
example of desired result enter image description here

Here is example code testjQueryDialog.php that demonstrates this behavior:

<html><head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var $dialog = $('<div></div>')
        .dialog({
            autoOpen: false,
            title: 'Are you sure?',
            modal: true,
            closeOnEscape: true,
            buttons: {
                "Please confirm": function() {
                $( this ).dialog( "close" );
                $('#btnSubscription').parents('form').submit();
                },
                Cancel: function() {
                $( this ).dialog( "close" );
                }
            }
        });
    $('#btnSubscription').live('click', function() {
        $dialog.dialog('open');
        return false;
    });
});
</script>
</head><body>
<form action="/testjQueryDialog.php" method="post">
<div>
    <input name="txtOne" type="text" value="One">
  <input name="txtTwo" type="text" value="Two">
  <button name="btnSubmit" id="btnSubscription" value="Subscription">Click</button>
</div>
<?php echo 'POST<br>'; print_r($_POST); ?>
</form></body></html>
wclark
  • 436
  • 4
  • 14

2 Answers2

1

HTML4 spec states: “If a form contains more than one submit button, only the activated submit button is successful.”

Looks like the browser ignores the fact form has only one submit button, and since you trigger form submit dynamically via $('#btnSubscription').parents('form').submit(), button is not considered as a successful control.

The problem resides in the button click callback:

$('#btnSubscription').live('click', function() {
    $dialog.dialog('open');
    return false;
});

Button activation is lost when false returned from the callback, what you need is to return a value based on the user's choice: Returning value from confirmation dialog using JQuery UI dialog

Community
  • 1
  • 1
Artem Koshelev
  • 10,548
  • 4
  • 36
  • 68
  • Artem: Thanks for your reply. The link you provided shows a way to use propagation, but does not answer my question. I tried it, and it gives the same result: I can see other form input value/pairs in the post data, but not the – wclark Oct 19 '11 at 16:03
  • The properly propagated event should preserve activated button value. I could try to check what's wrong if you'll provide the code you tried. – Artem Koshelev Oct 25 '11 at 07:40
1

It seems like the jQueryUI Dialog Box is slightly busted because it does not return button name/value pairs.

My workaround is to add a hidden field to the form, and use that to pass the button value(s).

$('#btnSubscription').live('click', function() {
    document.getElementById('hidSubmit').value = document.getElementById('btnSubscription').value
    $dialog.dialog('open');
    return false;
});

Now my desired result looks like: Array ([txtOne] => One [txtTwo] => Two [hidSubmit] => Subscription )

wclark
  • 436
  • 4
  • 14