I have a basic sign-in page using Bootstrap where a user enters an email address and password and then presses a "Sign-In" button to log into our online app.
The bootstrap button uses the "data-xxx-complete" text identifier to change the color and state of the button to "Authenticating..." after the user has clicked it.
I was able to use an event handler to trap the enter key and force a form submit, but what I really want to do is trap the enter key to make it act just like the user clicking the sign-in button so I get the "Authenticating..." state change on that element before the form submits.
Here is the button:
echo "<div class='form-group' id='sendBtn1'>";
echo "<div class='col-xs-3 text-left'>";
echo "<button type='button' id='sendButton' class='btn btn-primary' autocomplete='off' data-complete-text='Authenticating...' onclick="$(this).button('complete');$(this).prop('disabled',true);J_action('signin');" >";
echo "Sign In";
echo "</button>";
echo "</div>";
echo "</div>";
The J_Action(); function called from the sign-in button just calls a simple JS routine that handle where and what to do next with the login.
The code to handle the keypress is in my header as follows:
...
function checkSubmit(e) {
if(e && e.keyCode == 13) {
J_action('signin');
}
}
</script>
</head>
<body onKeyPress='return checkSubmit(event)'>
Is there a way to directly tell a button in bootstrap to change it's state?
I tried to add the same JS calls that were in the onClick event on the button itself to the event handler, but am not sure if using the ID name of the button in place of the (this) nomenclature is the right syntax. This did not work for me to change the state of the button.
...
function checkSubmit(e) {
if(e && e.keyCode == 13) {
$(sendButton).button('complete');
$(sendButton).prop('disabled',true);
J_action('signin');
}
}
</script>
</head>
<body onKeyPress='return checkSubmit(event)'>