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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With