Why does my jQuery dialog reload the page when enter is pressed?
dialog, jquery, jquery-ui
Solution
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.
Problem
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> <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?