jQuery UI Dialog - Enter key should equal a click

Question

I want to be able to press "ENTER" and have the dialog execute the same thing as a submit button.

I found a similar question here: Submit jQuery UI dialog on <Enter>. I added some of the solutions to the code and nothing fixed the problem.

This is what I have so far:

The button:

<button id="myButton">Execute Tasks</button>

The dialog itself:

<div id='myDialog' title="New Task(s):">
    <p>Enter the name of the tasks you wish to execute</p>
        <form>
            <label for="name">
                <input type="text" name="name" id="name" />
            </label> 
        </form>
</div>

Inside script tags:

$('#myButton').click( function() {
    $( "#myDialog" ).dialog({
        open: function(){

            $("#myDialog").unbind('submit');
            $("#myDialog").submit(function() {
            $("#myDialog").parents('.ui-dialog').first().find('.ui-button').first().click();
            return false;
            });
        },
        buttons: {
            "Run tasks": function() { .... },
            "Cancel":function() { $(this).dialog("close"); };
        },
    });
});

Storfer

Answer 1

You can bind the form submit event on dialog open. Pressing Enter within the textbox will automatically trigger the form submit.

You can additionally Trigger the submit event upon Clicking the Run Tasks button.

jsFiddle: http://jsfiddle.net/CodingDawg/dk7hT/

$('#myButton').click(function () {
  $("#myDialog").dialog({
        open: function () {
            $(this).off('submit').on('submit', function () {
                //Run tasks
                //$(this).dialog('close'); //You can Close the dialog after running the tasks.
                return false;
            });
        },
        buttons: {
            "Run tasks": function () {
                $(this).find('form').submit();
            },
                "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

Lakh

Answer 2

It's not hard to achieve what you trying to do, but your code is not what you asked for. I will try to simplify it:

This code will execute when submitting the form:

$( "#MyForm" ).submit(function( event ) {
  alert( "Handler for .submit() called." ); // Your code should be here
  event.preventDefault();
});

look on the id I gave to the jquery selector - $( "#MyForm" ) - it's the FORM ELEMENT - you didn't specify a form ID.

And if you want to bind the ENTER key to the submit form even your need this code also:

$(document).keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $("#MyForm").submit();
    }
});

and i re-edit your HTML so you can understand easily how it should looks like:

<div id='myDialog' title="New Task(s):">
    <p>Enter the name of the tasks you wish to execute</p>
    <form id="MyForm">
        <label for="name">My Label</label> 
        <input type="text" name="name" id="name" />    
    </form>
</div>

Weal

You do NOT have to bind the keypress event. Since the textbox is within the form, Enter should submit the form automatically. – Lakh

But only if your focus is in the text filed. I changed it from "input" to "document" element so every enter keydown will submit the form. – Weal