How to make sure your users mean to click “Submit”

Here’s a situation my coworkers and I ran into with our new online testing system: our users were accidentally clicking the “Submit” button on a form, then they were accidentally clicking the “Confirm” button on a confirm dialog popup. We took a number of steps to make it harder for them to do this, including making the “Next” and “Submit” buttons farther apart and changing the positions of the buttons on the form. Then we realized we needed to move the confirm dialog popup as it was appearing directly over the buttons on the form. When that didn’t fix the problem, we realized we needed to change the default button on our confirm dialog popup. It was more than a little tricky figuring out how to manipulate the jQuery UI modal dialog widget, so I’m going to share with you how we did it.

First, here’s how I created my confirm dialog popup using jQuery UI:

<div id="confirm" title="Confirm">
    Are you sure you want to submit your test?
</div>

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        resizable: false
    });
</script>

How to move a jQuery UI dialog widget

Although I had to dig through pages of Google search results to find it, the solution to this problem is pretty simple. The jQuery UI dialog() method – in addition to autoOpen, modal, resizable, and buttons – accepts a position option. It’s fairly obvious how to use this option: giving it a value of ‘top’ will place the dialog widget at the top of the window, giving it a value of [x, y] will place it at the specified co-ordinates in the window.

What’s not obvious is that you can also use the jQuery Position plugin, which allows you to position any element relative to any other element on the page. In my case, I was able to place the top of the dialog widget at the top of another div on my page like so:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by double-clicking on the “Submit” button.

How to change the default button in a jQuery UI dialog widget

After looking at a few cryptic solutions on Stack Overflow, one of my coworkers figured out that you can give the buttons option an array of button objects instead of a buttons object itself. The advantage of doing this is you can add any number of attributes to the button objects in the array:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

Give the “Cancel” button a class of “cancelButton” made it easy to select with jQuery. Using the dialog() method’s open event, I added a function to change the focus of the form to the “Cancel” button:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        open: function() {
            $('.cancelButton').focus();
        },
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by hitting the “Enter” key on their keyboard.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s