var buttons = [];
buttons.push({title: "Existing Guest", value: "guest"});
buttons.push({title: "Existing Booking", value: "booking"});
$.prompt({
init: {
title: "Reservation Creation",
html: '<p>Where should this reservation be assigned?</p>',
buttons: buttons,
focus: 1,
submit: function(e,v,m,f) {
e.preventDefault();
if (v == 'guest' || v == 'booking') {
$.prompt.goToState(v, true);
return false;
}
$.prompt.close();
}
},
guest: {
html: '<label>Guest email address <input type="text" name="email" /></label>',
buttons: {
Confirm: 1,
Cancel: -1
},
focus: "input[name='email']",
submit:function(e,v,m,f){
e.preventDefault();
if (v == 1) {
$.extend(ajax.data, {
reference: f.email
});
$.ajax(ajax);
$.prompt.close();
}
else if (v == -1) {
$.prompt.goToState('init');
}
}
},
booking: {
html: '<label>Booking reference <input type="text" name="reference" /></label>',
buttons: {
Confirm: 1,
Cancel: -1
},
focus: "input[name='reference']",
submit:function(e,v,m,f){
e.preventDefault();
if (v == 1) {
$.extend(ajax.data, {
reference: f.reference
});
$.ajax(ajax);
$.prompt.close();
}
else if (v == -1) {
$.prompt.goToState('init');
}
}
}
});
When the user enters the sub-state (to enter an email address or existing booking reference) the focus is already on the input field. But hitting enter causes the page to hang and become completely unresponsive
Pressing escape, etc, doesn't do anything (the buttons bar on the prompt flash though, weirdly). The user is forced to do a page refresh to regain control.
No errors are raised in the console, and I even tried removing the onsubmit declaration in the form that it builds. This made no difference.