Question

I have two simple submit buttons on my form, which work just fine:

<button id="accept" type="submit" name="accept" value="accept">Accept</button>
<button id="decline" type="submit" name="decline" value="decline">Decline</button>

However, the page in question you can either view by going directly to the URL, or it is occasionally displayed in a modal dialog, which I have setup using the following jQuery:

dialog.dialog({
    buttons: [
        {
            text: "Decline", click: function() {
                $('#decline').click();
                dialog.dialog('close');
            }
        },
        {
            text: "Accept", click: function() {
                $('#accept').click();
                dialog.dialog('close');
            }
        }
    ]
});

dialog.load(url + '&ajax=1');

This submits the form just fine, and it detects all post information apart from the element that was actually clicked. So for example, if you load the form, and click the #decline button, that information will be posted, this isn’t the case with jQuery.

Thanks

Answer 1

Careful with dialogs as they don’t make your submit action from your inputs wait. As soon as you click the submission is triggered.
You should use inputs of type button instead of submit and manage yourself the submission with the $(form).submit() method. It might solve your problems

EDIT: to answer your comment:

<style>
.submitbutton{
    text-align:center;
    font-weight:bold;
    /* you can do whatever you like here */
}​
</style>
<div id="dialog"></div>
<form id="myform">
<input id="accept" class="submitbutton" type="text" value="Accept button" name="accept" value="accept"/>
<input id="decline" class="submitbutton" type="text" value="Decline button" name="decline" value="decline"/>

</form>​
<script>
$('#accept,#decline').click(function(e){
    alert('you clicked #'+$(this).attr('id'));
    //you can do whatever you want here as you know which button was pressed.
    // to add more information in your form :
    $('#myform').append($("<input>").attr("type", "hidden").attr("name", "newhiddendata").val("something"));
    $('#myform').submit();
});

var dialog= $('#dialog');
dialog.dialog({
    modal:true,
    buttons: [
        {
            text: "Decline", click: function() {
                dialog.dialog('close');
                $('#decline').click();

            }
        },
        {
            text: "Accept", click: function() {
                dialog.dialog('close');
                $('#accept').click();
            }
        }
    ]
});
​
</script>

http://jsfiddle.net/techunter/KPu7G/

this is really raw, no css at all but you see the point.