JQuery UI Dialog - key entry should equal click

I want to be able to press "ENTER", and in the dialog box perform the same function as the submit button.

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

This is what I have so far:

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 the 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"); };
        },
    });
});
+4
source share
2 answers

You can bind the form submit event in the open dialog box. Pressing Enter in the text field automatically activates form submission.

, " ".

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");
            }
        }
    });
});
+6

, , , . :

:

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

, jquery - $( "#MyForm" ) - - .

ENTER , :

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

HTML, , :

<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>
+3

Source: https://habr.com/ru/post/1545444/


All Articles