Response title
This is preview!
jQuery automcomplete plugin: disabling form submission with the enter key, but keeping menu selection functionality
in Using jQuery
•
9 years ago
I have a JSP ( below ) that uses a jQuery autocomplete plugin.
I am trying to set up the text field such that if someone hits the "Enter" key to select an option from the autocomplete menu, everything works the default way AND if they hit "Enter" after that, the form sumbits, and calls my validation function ( quietSubmit() ).
I set up some .bind() functions to tell me if the autocomplete menu is up or not. I'm using that as a flag in another .bind() to tell me if the enter key has been pressed and if so if the menu is up.
The flag seems to be reporting correctly, but if I hit "enter" while the menu is up, to select a choice, the form still submits.
Any ideas on what I can try?
Thanks
<%@ include file="header.jsp"%>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------------------
var doSubmit = false;
// When the page is loaded/ready
$(function() {
// Set up the auto complete menu
var cache = {};
$( "#org_name" ).autocomplete({
source: "/acme/acmeorglist",
select: updateRecordCount
});// end autocomplete plugin call
$("#org_name").bind('autocompleteopen', function(event, ui) {
$(this).data('is_open',true);
});
$("#org_name").bind('autocompleteclose', function(event, ui) {
$(this).data('is_open',false);
});
//Reroute the input field from doing a form submission, to using
//quietSubmit()
$("#org_name").bind("keydown", function(e) {
var code = e.keyCode || e.which;
var menuOpen = $(this).data('is_open');
// "Enter" key is pressed
if(code == 13 && menuOpen == false) {
// Don't submit the form in the default way
e.preventDefault();
// Do the custom form submission
quietSubmit();
// Don't submit the form in the default way
return false;
}
});
});// end main jQuery call
function updateRecordCount(){
$.post("/acme/getorgstaffcount",
$("#org_name").serialize(),
function(data){$("#record_count span").text(data + " records");}
);
}
function quietSubmit(){
updateRecordCount();
var org_name = document.form1.org_name.value;
var recordcount = 0;
if( isNaN(parseInt($("#record_count span").text())) ){
recordcount = 0;
}
else{
recordcount = parseInt($("#record_count span").text());
}
var msgStats = "There are " + recordcount + " records for " +
org_name + " ";
var msgConfirm = msgStats + ", proceed to download?";
var msgAlert = msgStats + "Please make sure your choice is " +
"highlighted after choosing it from the " +
"auto-completeion menu or make another choice";
if(recordcount < 1){
jqAlert(msgAlert,"Okay",closejQAlertBox);
return false;
}
else if( recordcount > 0){
jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
return doSubmit;
}
return true;
}// end function quietSubmit()
//-------------------------------------------------------------------------
function submitSearch(){
doSubmit = true;
doProgress();
}
//-------------------------------------------------------------------------
function doProgress(){
var progressbar = $( "#progressbar" );
var progressLabel = $( ".progress-label" );
progressbar.show();progressLabel.show();
//changing of progress bar text
$( "#progressbar" ).progressbar({
value:0,
change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
});
setTimeout( progress, 1000 );
}// end doProgress()
function progress() {
$.post("/acme/getprogress", function(data){
$( "#progressbar" ).progressbar("option","value",data);
});
var pval = $( "#progressbar" ).progressbar("option","value");
if ( pval < 99 ) {
setTimeout( progress, 250 );
}
}
//----------------------------------------------------------------------------
</script>
<br>
<br>
<div class="ui-widget">
Please select one of the <strong>${acme_org_count}</strong> acme
Organizations:
<p> </p>
<label for="org_name">Organization Abbreviation: </label>
<form name="form1" action = "getphonelist" method = "post" onSubmit = "return quietSubmit();">
<input id="org_name" name="org_name" />
<div id="record_count">
<span>Status</span>
</div>
<div id="progressbar"><div class="progress-label"></div></div>
<input type="submit" value="Download a phone list for this organization" />
</form>
</div>
<%@ include file="footer.jsp"%>
<%@ include file="header.jsp"%>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------------------
var doSubmit = false;
// When the page is loaded/ready
$(function() {
// Set up the auto complete menu
var cache = {};
$( "#org_name" ).autocomplete({
source: "/acme/acmeorglist",
select: updateRecordCount
});// end autocomplete plugin call
/*
$("#org_name").bind('autocompleteopen', function(event, ui) {
$(this).data('is_open',true);
});
$("#org_name").bind('autocompleteclose', function(event, ui) {
$(this).data('is_open',false);
});
*/
//Reroute the input field from doing a form submission, to using
//quietSubmit()
$("#org_name").bind("keydown", function(e) {
var code = e.keyCode || e.which;
// "Enter" key is pressed
if(code == 13) {
// Don't submit the form in the default way
e.preventDefault();
// Do the custom form submission
//quietSubmit();
// Don't submit the form in the default way
return false;
}
});
});// end main jQuery call
function updateRecordCount(){
$.post("/acme/getorgstaffcount",
$("#org_name").serialize(),
function(data){$("#record_count span").text(data + " records");}
);
/*
$.ajax({
url: "/acme/getorgstaffcount",
type: "POST",
data: { org_name: $("#org_name").val()},
async:false,
cache: false,
success: function(data) {
$("#record_count span").text(data + " records");
}
});
*/
}
function quietSubmit(){
updateRecordCount();
var org_name = document.form1.org_name.value;
var recordcount = 0;
if( isNaN(parseInt($("#record_count span").text())) ){
recordcount = 0;
}
else{
recordcount = parseInt($("#record_count span").text());
}
var msgStats = "There are " + recordcount + " records for " +
org_name + " ";
var msgConfirm = msgStats + ", proceed to download?";
var msgAlert = msgStats + "Please make sure your choice is " +
"highlighted after choosing it from the " +
"auto-completeion menu or make another choice";
//alert("recordcount == " + recordcount);
if(recordcount < 1){
jqAlert(msgAlert,"Okay",closejQAlertBox);
return false;
}
else if( recordcount > 0){
jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
return doSubmit;
}
return true;
}// end function quietSubmit()
//-------------------------------------------------------------------------
function submitSearch(){
doSubmit = true;
//alert("before doprogress");
document.form1.submit();
doProgress();
}
//-------------------------------------------------------------------------
function doProgress(){
var progressbar = $( "#progressbar" );
var progressLabel = $( ".progress-label" );
progressbar.show();progressLabel.show();
//changing of progress bar text
$( "#progressbar" ).progressbar({
value:0,
change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
});
setTimeout( progress, 1000 );
}// end doProgress()
function progress() {
$.post("/acme/getprogress", function(data){
$( "#progressbar" ).progressbar("option","value",data);
});
var pval = $( "#progressbar" ).progressbar("option","value");
if ( pval < 99 ) {
setTimeout( progress, 250 );
}
}
//----------------------------------------------------------------------------
</script>
<br>
<br>
<div class="ui-widget">
Please select one of the <strong>${acme_org_count}</strong> acme
Organizations:
<p> </p>
<label for="org_name">Organization Abbreviation: </label>
<form name="form1" action = "getphonelist" method = "post">
<input type = "text" id ="org_name" name ="org_name" />
<div id="record_count">
<span>Status</span>
</div>
<div id="progressbar"><div class="progress-label"></div></div>
<input type="button" onClick = "quietSubmit();" value="Download a phone list for this organization" />
</form>
</div>
<%@ include file="footer.jsp"%>
I am trying to set up the text field such that if someone hits the "Enter" key to select an option from the autocomplete menu, everything works the default way AND if they hit "Enter" after that, the form sumbits, and calls my validation function ( quietSubmit() ).
I set up some .bind() functions to tell me if the autocomplete menu is up or not. I'm using that as a flag in another .bind() to tell me if the enter key has been pressed and if so if the menu is up.
The flag seems to be reporting correctly, but if I hit "enter" while the menu is up, to select a choice, the form still submits.
Any ideas on what I can try?
Thanks
<%@ include file="header.jsp"%>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------------------
var doSubmit = false;
// When the page is loaded/ready
$(function() {
// Set up the auto complete menu
var cache = {};
$( "#org_name" ).autocomplete({
source: "/acme/acmeorglist",
select: updateRecordCount
});// end autocomplete plugin call
$("#org_name").bind('autocompleteopen', function(event, ui) {
$(this).data('is_open',true);
});
$("#org_name").bind('autocompleteclose', function(event, ui) {
$(this).data('is_open',false);
});
//Reroute the input field from doing a form submission, to using
//quietSubmit()
$("#org_name").bind("keydown", function(e) {
var code = e.keyCode || e.which;
var menuOpen = $(this).data('is_open');
// "Enter" key is pressed
if(code == 13 && menuOpen == false) {
// Don't submit the form in the default way
e.preventDefault();
// Do the custom form submission
quietSubmit();
// Don't submit the form in the default way
return false;
}
});
});// end main jQuery call
function updateRecordCount(){
$.post("/acme/getorgstaffcount",
$("#org_name").serialize(),
function(data){$("#record_count span").text(data + " records");}
);
}
function quietSubmit(){
updateRecordCount();
var org_name = document.form1.org_name.value;
var recordcount = 0;
if( isNaN(parseInt($("#record_count span").text())) ){
recordcount = 0;
}
else{
recordcount = parseInt($("#record_count span").text());
}
var msgStats = "There are " + recordcount + " records for " +
org_name + " ";
var msgConfirm = msgStats + ", proceed to download?";
var msgAlert = msgStats + "Please make sure your choice is " +
"highlighted after choosing it from the " +
"auto-completeion menu or make another choice";
if(recordcount < 1){
jqAlert(msgAlert,"Okay",closejQAlertBox);
return false;
}
else if( recordcount > 0){
jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
return doSubmit;
}
return true;
}// end function quietSubmit()
//-------------------------------------------------------------------------
function submitSearch(){
doSubmit = true;
doProgress();
}
//-------------------------------------------------------------------------
function doProgress(){
var progressbar = $( "#progressbar" );
var progressLabel = $( ".progress-label" );
progressbar.show();progressLabel.show();
//changing of progress bar text
$( "#progressbar" ).progressbar({
value:0,
change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
});
setTimeout( progress, 1000 );
}// end doProgress()
function progress() {
$.post("/acme/getprogress", function(data){
$( "#progressbar" ).progressbar("option","value",data);
});
var pval = $( "#progressbar" ).progressbar("option","value");
if ( pval < 99 ) {
setTimeout( progress, 250 );
}
}
//----------------------------------------------------------------------------
</script>
<br>
<br>
<div class="ui-widget">
Please select one of the <strong>${acme_org_count}</strong> acme
Organizations:
<p> </p>
<label for="org_name">Organization Abbreviation: </label>
<form name="form1" action = "getphonelist" method = "post" onSubmit = "return quietSubmit();">
<input id="org_name" name="org_name" />
<div id="record_count">
<span>Status</span>
</div>
<div id="progressbar"><div class="progress-label"></div></div>
<input type="submit" value="Download a phone list for this organization" />
</form>
</div>
<%@ include file="footer.jsp"%>
<%@ include file="header.jsp"%>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------------------
var doSubmit = false;
// When the page is loaded/ready
$(function() {
// Set up the auto complete menu
var cache = {};
$( "#org_name" ).autocomplete({
source: "/acme/acmeorglist",
select: updateRecordCount
});// end autocomplete plugin call
/*
$("#org_name").bind('autocompleteopen', function(event, ui) {
$(this).data('is_open',true);
});
$("#org_name").bind('autocompleteclose', function(event, ui) {
$(this).data('is_open',false);
});
*/
//Reroute the input field from doing a form submission, to using
//quietSubmit()
$("#org_name").bind("keydown", function(e) {
var code = e.keyCode || e.which;
// "Enter" key is pressed
if(code == 13) {
// Don't submit the form in the default way
e.preventDefault();
// Do the custom form submission
//quietSubmit();
// Don't submit the form in the default way
return false;
}
});
});// end main jQuery call
function updateRecordCount(){
$.post("/acme/getorgstaffcount",
$("#org_name").serialize(),
function(data){$("#record_count span").text(data + " records");}
);
/*
$.ajax({
url: "/acme/getorgstaffcount",
type: "POST",
data: { org_name: $("#org_name").val()},
async:false,
cache: false,
success: function(data) {
$("#record_count span").text(data + " records");
}
});
*/
}
function quietSubmit(){
updateRecordCount();
var org_name = document.form1.org_name.value;
var recordcount = 0;
if( isNaN(parseInt($("#record_count span").text())) ){
recordcount = 0;
}
else{
recordcount = parseInt($("#record_count span").text());
}
var msgStats = "There are " + recordcount + " records for " +
org_name + " ";
var msgConfirm = msgStats + ", proceed to download?";
var msgAlert = msgStats + "Please make sure your choice is " +
"highlighted after choosing it from the " +
"auto-completeion menu or make another choice";
//alert("recordcount == " + recordcount);
if(recordcount < 1){
jqAlert(msgAlert,"Okay",closejQAlertBox);
return false;
}
else if( recordcount > 0){
jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
return doSubmit;
}
return true;
}// end function quietSubmit()
//-------------------------------------------------------------------------
function submitSearch(){
doSubmit = true;
//alert("before doprogress");
document.form1.submit();
doProgress();
}
//-------------------------------------------------------------------------
function doProgress(){
var progressbar = $( "#progressbar" );
var progressLabel = $( ".progress-label" );
progressbar.show();progressLabel.show();
//changing of progress bar text
$( "#progressbar" ).progressbar({
value:0,
change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
});
setTimeout( progress, 1000 );
}// end doProgress()
function progress() {
$.post("/acme/getprogress", function(data){
$( "#progressbar" ).progressbar("option","value",data);
});
var pval = $( "#progressbar" ).progressbar("option","value");
if ( pval < 99 ) {
setTimeout( progress, 250 );
}
}
//----------------------------------------------------------------------------
</script>
<br>
<br>
<div class="ui-widget">
Please select one of the <strong>${acme_org_count}</strong> acme
Organizations:
<p> </p>
<label for="org_name">Organization Abbreviation: </label>
<form name="form1" action = "getphonelist" method = "post">
<input type = "text" id ="org_name" name ="org_name" />
<div id="record_count">
<span>Status</span>
</div>
<div id="progressbar"><div class="progress-label"></div></div>
<input type="button" onClick = "quietSubmit();" value="Download a phone list for this organization" />
</form>
</div>
<%@ include file="footer.jsp"%>
1