Develop Reference

Showing a gif image while form is being processed

I am working on a spring web application where I have a login page but I want to show a gif image while the form is being processed. Please anyone can guide me through the best way to achieve this.
this is the part in my HTML page with a javascript function inside.
<div class="loginbox">
<img src = "images/login2.jpg" class="avatar" >
<form id="myForm" action="login" method='POST' onsubmit="return validate();" >
<div th:if="${param.message != null}" class="alert alert-info" th:text="${param.message[0]}">message</div>
<div th:if="${param.error != null}" class="alert alert-danger" th:text="${session[SPRING_SECURITY_LAST_EXCEPTION]}">error</div>
<p>Username</p>
<input type="text" name="username" placeholder="Enter your Email">
<p> Password</p>
<input type="password" name="password" placeholder="Enter your password">
<div>
<input id="myBtn" type="submit" name="submit" value="Login">
<img id="loadingImg" src="../images/loading.gif" style="display:none;" alt="LOADING PLEASE WAIT....">
</div>
</form>
</div>
<script th:inline="javascript">
function validate() {
if (document.f.username.value == "" && document.f.password.value == "") {
alert(/*[[#{message.username} + #{message.password}]]*/);
document.f.username.focus();
return false;
}
if (document.f.username.value == "") {
alert(/*[[#{message.username}]]*/);
document.f.username.focus();
return false;
}
if (document.f.password.value == "") {
alert(/*[[#{message.password}]]*/);
document.f.password.focus();
return false;
}
}
</script>
I tried to add something in js like this function
function validateGif(){
var myForm= document.getElementById('myForm');
var loadingImg= document.getElementById('loadingImg');
myForm.style.display='none';
loadingImg.style.display='block';
setTimeout (function(){
myForm.style.display='block';
loadingImg.style.display='none';
}5000);
}
But I know it doesnt work correclty. I want to show the gif image as long as the form is submitting and if there is some validation errors to stop the gif and show the error. However the gif image should be loading all time the to the redirection after authentication.
What is the best way to go through this.
Any help is appreciated thank you!

Here is a simple example with jQuery.
$('#myForm').submit(function (event) {
// prevent the default action of the form, i.e. submitting
event.preventDefault()
if (document.f.username.value == "" && document.f.password.value == "") {
alert(/*[[#{message.username} + #{message.password}]]*/);
document.f.username.focus();
return false;
}
else if (document.f.username.value == "") {
alert(/*[[#{message.username}]]*/);
document.f.username.focus();
return false;
}
else if (document.f.password.value == "") {
alert(/*[[#{message.password}]]*/);
document.f.password.focus();
return false;
}
}
else{
// serialize your form data
var formdata = $(this).serialize();
// show image
$('#loadingImg').fadeIn();
// run ajax request
$.ajax({
method: 'POST',
type: 'POST', // if using jquery 1.9 or earlier
data: formdata,
url: 'your/form/action',
success: function (data) {
$('#loadingImg').fadeOut();
}
});
}
});

Submit form via Enter key and Submit button both

Hi I have form and following things are bothering me:
1. Form does not submit on pressing enter.
2. When i press enter in input field then Search Now button needs to be pressed
twice to search places.
Form is displayed as below:
<form method="POST" id="mylocform" action="">
<h3 class="animated slideInLeft delay-2">
<input type="text" placeholder="Start Typing Your Location" id="geocomplete"
style="color:black;width:100%;padding:5px;height:45px;border-radius:5px"
autocomplete="off" class="chkmeloc" onblur="checkmylocform()"/></h3>
<input type="submit" class="btn btn-default btn-lg animated fadeInUpBig delay-3"
style="color: black;background-color: #FFF;border-color: #FFF;"
value="Search Now!"/>
</form>
Validation goes like below:
$(document).ready(function(){
$("form#mylocform").submit(function(event) {
event.preventDefault();
validate();
});
});
function checkmylocform(){
var checkOdlen = $(".chkmeloc").val().length;
if(checkOdlen==0){
$(".chkmeloc").css("border-color","#F05F68");
$(".chkmeloc").focus();
$(".chkmelocmess").html('<button type="submit" class="btn btn-default
btn-lg" style="background: #FFF;color:red">
<i class="fa fa-warning text-red"></i>
Select Your Location</button>');
return false;
}
else{
$(".chkmeloc").css("border-color","#0C9");
$(".chkmelocmess").html('<input type="submit" class="btn btn-default
btn-lg" style="color: black;background-color: #FFF;border-color: #FFF;"
value="Search Now!"/>');
return true;
}
}
function validate(){
$.each($('form :input'),function(){
$(this).blur().change();
});
if(!checkmylocform()){
return false;
}
else{
submitform();
}
}
Submit Form has code to submit form via ajax as below. Please help me to get out of this situation.

$("Your selector").keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$(input[type = submit]).click();
return false;
}
});

look at this site:
http://tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/
the site says that enter key is automaticly a submit in al browser

Try This
File index.html :
<form class="form-inline" action="" method="POST">
<input type="password" name="token" placeholder="Enter Facebook access token..." class="subscribe-email">
<button type="submit" class="btn">Start!</button>
</form>
<div class="success-message"></div>
<div class="error-message"></div>
File script.js :
$('.get_token form').submit(function(e) {
e.preventDefault();
var postdata = $('.get_token form').serialize();
$.ajax({
type: 'POST',
url: 'assets/submit_token.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.valid == 0) {
$('.success-message').hide();
$('.error-message').hide();
$('.error-message').html(json.message);
$('.error-message').fadeIn();
}
else {
$('.error-message').hide();
$('.success-message').hide();
$('.get_token form').hide();
$('.success-message').html(json.message);
$('.success-message').fadeIn();
}
}
});
});

JavaScript redirect in modal

I've been struggling with this for a while but I can't seem to figure this out.
I've got a modal that displays and asks for user login and password. Right now if user ==admin it should redirect to Google but for some reason it doesn't work.
Any indications on why is this happening?
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center">
<input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3">
</div>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#loginform').submit(function(e) {
});
$('#modaltrigger').leanModal({
top: 110,
overlay: 0.45,
closeButton: ".hidemodal"
});
});
$('#loginbtn').click(function() {
var username = $("#username").val();
var password = $("#password").val();
if (username == "admin") {
window.location.href = "http://kegan.ing.puc.cl/~grupo6/faseiv/index.php";
} else {
alert("Usuario o contraseña invalido");
}
});

OK, looking at it first, your $('#loginbtn') code is outside your DOM ready scope. Secondly, I'd remove that selector completely and bind your code to the form's submit event - it's much more accurate than the submit buttons click.
$(function() {
$('#loginform').submit(function(e) {
e.preventDefault();
var username = $("#username").val();
var password = $("#password").val();
if (username == "admin") {
window.location.href = "http://kegan.ing.puc.cl/~grupo6/faseiv/index.php";
} else {
alert("Usuario o contraseña invalido");
}
});
});
...if you were to continue to use the click handler on your submit button, you need to stop #loginform from submitting normally.

Form submit with 'return false' reloads current page

I have been trying to fix this code for hours, and I still cannot make it work.
This is rather basic:
I am building an hybrid iOS app, and there is an area which requires the user to log into our system, and I use Hammer.js to handle touch events.
So, on the page, I have a form and a submit button. And in my JS app file, there is the ajax requests to my server to check credentials.
Though, it doesn't work: my form keeps reloading the page, whatever I do. And as it refreshes the window, my ajax request doesn't get any chance to work.
Here is the HTML form:
<div class="login-form-parent">
<div class="login-form">
<section>
<h2>Sign in to GraphiX Studios CPM</h2>
<form name="loginForm" id="login" method="post" submit="#" >
<fieldset>
<input type="text" name="login" id="loginEmail" placeholder="Username" autocapitalize="false" autocorrect="false" >
<input type="password" name="password" id="loginPass" placeholder="••••" >
<aside>
<label for="rememberLogin">Remember me</label>
<input type="checkbox" name="rememberLogin" id="rememberLogin" >
</aside>
<footer>
<input type="submit" name="submit" id="submitLogin" value="Login" >
</footer>
</fieldset>
</form>
</section>
</div>
</div>
The two <div>, the <aside>, <section> and <footer> tags are only here for styling purposes.
And here is the JS code:
var loginEl = document.getElementById('submitLogin');
Hammer(loginEl, {tap_max_touchtime: 1000}).on("tap", loginFunctions);
function loginFunctions() {
var usernameValidation = $("input#loginEmail").val();
if (usernameValidation == "") {
$("#login_error").show();
$("input#login").focus();
return false;
}
var passwordValidation = $("input#loginPass").val();
if (passwordValidation == "") {
$("#password_error").show();
$("input#password").focus();
return false;
}
if (usernameValidation != "" && passwordValidation != "") {
$.submit(function() {
var username = $('#loginEmail').val();
var password = $('#loginPass').val();
$.ajax({
url: 'loginProcessing.php',
type: 'POST',
data: {
user: username,
pass: password
},
success: function(response) {
if(response == '1') {
// Success
alert('Success');
} else {
// Error
alert('Failed');
}
}
});
return false;
});
}
return false;
}
I can't debug that on my own: I've been trying for hours different solutions and I've already searched among Google and Stack Overflow resources.
Feel free to clean up or improve the JS code.

try using:
event.preventDefault();
instead of return false, in the start of your $.submit function

change <input type="submit" name="submit" id="submitLogin" value="Login" > for <input type="button" name="submit" id="submitLogin" value="Login" >

javascript how to create a validation error message without using alert

I am looking to make a simple form validation error message that displays under the username field.
I cannot seem to figure it out.
<form name ="myform" onsubmit="validation()">
Username: <input type ="text" name="username" /><br />
<input type ="submit" value="submit" />
<div id ="errors">
</div>
</form>
Here is my validation script:
function validation(){
if(document.myform.username.value == ""){ //checking if the form is empty
document.getElementById('errors').innerHTML="*Please enter a username*";
//displaying a message if the form is empty
}

You need to stop the submission if an error occured:
HTML
<form name ="myform" onsubmit="return validation();">
JS
if (document.myform.username.value == "") {
document.getElementById('errors').innerHTML="*Please enter a username*";
return false;
}

JavaScript
<script language="javascript">
var flag=0;
function username()
{
user=loginform.username.value;
if(user=="")
{
document.getElementById("error0").innerHTML="Enter UserID";
flag=1;
}
}
function password()
{
pass=loginform.password.value;
if(pass=="")
{
document.getElementById("error1").innerHTML="Enter password";
flag=1;
}
}
function check(form)
{
flag=0;
username();
password();
if(flag==1)
return false;
else
return true;
}
</script>
HTML
<form name="loginform" action="Login" method="post" class="form-signin" onSubmit="return check(this)">
<div id="error0"></div>
<input type="text" id="inputEmail" name="username" placeholder="UserID" onBlur="username()">
controls">
<div id="error1"></div>
<input type="password" id="inputPassword" name="password" placeholder="Password" onBlur="password()" onclick="make_blank()">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>

I would strongly suggest you start using jQuery. Your code would look like:
$(function() {
$('form[name="myform"]').submit(function(e) {
var username = $('form[name="myform"] input[name="username"]').val();
if ( username == '') {
e.preventDefault();
$('#errors').text('*Please enter a username*');
}
});
});