Why does my jQuery dialog reload the page when enter is pressed?

Question

I'm trying to use jQuery dialog to enter data in my page. For a reason I don't understand, when the user press enter, the entire page is refreshed. It doesn't even validate what is in the textbox.

I've create a jsfiddle that show the issue. I checked the documentation here and my code seems to follow the guidelines but I must be missing something!

Here is how I call the dialog

$("#create-subtitle")
    .click(function () {
    $("#dialog-form-subtitles").dialog("open");
    return false;
});

Here is one of my dialog:

$("#dialog-form-steptitles").dialog({
        autoOpen: false,
        height: 220,
        width: 450,
        modal: true,
        buttons: {
            "Ajouter un sous-titre pour les étapes": function () {
                var bValid = true;
                allFieldsStepTitle.removeClass("ui-state-error");
                bValid = bValid && checkLength(nameStepTitle, "sous-titre pour les étapes", 3, 50);

                if (bValid) {
                    var $parent = $("#StepTitles");
                    var numElem = $parent.find("tr").length;
                    $('#StepTitles > tbody:last').append('<tr><td><input class="text-box single-line" id="StepTitles_' + numElem + '__Name" name="StepTitles[' + numElem + '].Name" type="text" value="' + nameStepTitle.val() + '" /></td><td>&nbsp;<ul id="ListStep' + numElem + '"></ul></td><td><button id="create-step' + numElem + '" name="create-step' + numElem + '" class="btn btn-success">Ajouter une étape</button></td></tr>');
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFieldsStepTitle.val("").removeClass("ui-state-error");
        }
    });

Anyone can help me with this?

In your jsFiddle, click on the `jsHint` button and you will quickly see your mistake. — Sparky, Mar 18 '13 at 23:34
not too sure how the jsHint works.. can you give me a little more information or maybe write a complete answer below? :) — Jean-François Côté, Mar 19 '13 at 00:28
Click the jsHint button and look at the code's line numbers in your JavaScript pane. Hover over the red dots... those are your JavaScript issues. — Sparky, Mar 19 '13 at 00:31
Ok I fixed them. http://jsfiddle.net/DarkJaff/m8Ps2/ Still do the same thing :( — Jean-François Côté, Mar 19 '13 at 00:32
Sorry... it was worth a shot. My only other suggestion would be to carefully compare every last bit of the code in your fiddle with the code on that demo page. I noticed you have multiple forms. Strip it down to ONE and see if it works, then build it back up from there. — Sparky, Mar 19 '13 at 00:34
For others coming to help, [here is the Fiddle in English](http://jsfiddle.net/FcDFV/1/) — couzzi, Mar 19 '13 at 00:36

score 5 · Answer 1 · answered Mar 18 '13 at 23:33

5

Hitting enter while inside the form > input causes the form to submit, thus refreshing the page. There are a few things you can do, but most of them involve preventing the default submit action on the form. Your code is mostly in French, so I had hard time navigating it, but in order to step the refresh, simply do this:

$('form').on('submit', function(event){
    event.preventDefault();
});

From there, you'll likely want to do something with the enter key — trigger a click on the button—again, the text is in French, so I don't know what it says.

$('your-input').keypress(function(event) {
    if(event.which == 13) { // 13 is the 'Enter' key
     // do something here
   }
});

Hope that helps.

answered Mar 18 '13 at 23:33

couzzi

6,316
3
24
40

That does not explain how the identical code on [the documentation page](http://jqueryui.com/dialog/#modal-form) does not behave like that. – Sparky Mar 18 '13 at 23:34
OP wants to hit "enter" while in the modal—the "identical" code documentation page doesn't all for that experience. – couzzi Mar 18 '13 at 23:53
Where does he say he "wants" to hit enter? The form submit caused by hitting enter is the whole problem, is my understanding. – Sparky Mar 19 '13 at 00:07
"when the user press enter, the entire page is refreshed." said OP. Seems undesirable, Sparky. OP only has one form field; any average user would think hitting enter would function-as-expected:dismiss the modal and save their change to the UI. Anyway, you can elaborate in your answer. – couzzi Mar 19 '13 at 00:15
Hey, ease up a bit on that incredibly snippy attitude of yours. My only point is that the code from the jQuery UI example page does not have these issues. So instead of coming up with a workaround, perhaps we need to figure out where he made his mistake copying over that code. – Sparky Mar 19 '13 at 00:20
1

@Sparky is right. If you go in the example on the jquery ui page about dialog, when you press enter, nothing happen. Why does my code refresh/submit the page and also skip all the validation? If you click on the button "Ajouter une catégorie d'ingrédient" inside the dialog with the mouse, it doesn't submit anything because the content of the textbox is not valid.. – Jean-François Côté Mar 19 '13 at 00:27
Sparky, I'm not being snippy. This is a text-based conversation, I don't even know how you'd figure out my tone. I agree that the code on the jQuery UI page works. I'm simply trying to help make some progress. I apologize if I've come off the wrong way. Let's try to help OP solve this, eh? – couzzi Mar 19 '13 at 00:28
@Sparky because on the documentation page the example does not involve a form tag, check at http://jsfiddle.net/m8Ps2/2/ where the problem has gone...you need the form where it is? well check this SO question http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter – a0viedo Mar 19 '13 at 01:16
@a0viedo, I am not the OP, so you'll have to ask him why he's doing it like that. – Sparky Mar 19 '13 at 01:31
@a0viedo: Can you please write an official answer with a good explanation what to change and why? – Jean-François Côté Mar 26 '13 at 12:19

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

In jQuery's documentation page the example does not have a form tag, this is why is working as expected. Check your code without the form here. In case you need the tag to be there, check this SO question.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 27 '13 at 18:48

a0viedo

199
1
11

Why does my jQuery dialog reload the page when enter is pressed?

2 Answers2