loading screen appears after jquery alert - javascript

I'm trying to create a loading screen for it to appear when the form is being submitted, it works great except on Safari, the problem is that if you were to click enter or submit an alert appears but when you click okay for the alert to go away the loading appears because of the submit event and doesn't go away. I've tried numerous this but i cant seem to figure it out, i'm a beginner in jquery.
To summarize, on safari after alert, loading screen appears when it's not suppose too and doesn't go away.
Preferably I would like for the loading screen to appear only when the form is being submitted. or the alternative is for the loading screen not to show in a safari browser.
<script>
var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
} else {
form.noValidate = true;
form.addEventListener('submit', function(event) { /*listen for form submitting */
if (!event.target.checkValidity()) {
event.preventDefault(); /*dismiss the default functionality*/
alert('Please, fill the form before you submit'); /*error message*/
$("#formID").attr("id", "form");
$(".circularG1").addClass("active");
$(".circularbrg").addClass("active");
}
}, false);
}
}
</script>
<!--loading screen appears while form submit's-->
<script type="text/javascript">
$(document).ready(function() {
$('#formID').submit(function() {
var pass = true; //some validations
if (pass == false) {
return false;
$(".circularG1").addClass('active'); //hides loading if clicked
$(".circularbrg").addClass('active'); // hides loading if clicked
} else {
$(".circularG1, .active").removeClass('active'); //shows loading if clicked
$(".circularbrg, .active").removeClass('active'); // shows loading if clicked
}
});
});
</script>
<!--^--END--^-->
<!-- 3. Add this script for Function of Hamburger Menu -->
<script>
$(document).ready(function() {
$(".icon").on("click", function() {
$("header .nav ul").toggleClass("open", 200);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="circularG1 active">
<div id="circularG_1" class="circularG"></div>
<div id="circularG_2" class="circularG"></div>
<div id="circularG_3" class="circularG"></div>
<div id="circularG_4" class="circularG"></div>
<div id="circularG_5" class="circularG"></div>
<div id="circularG_6" class="circularG"></div>
<div id="circularG_7" class="circularG"></div>
<div id="circularG_8" class="circularG"></div>
</div>
<div class="circularbrg active"></div>
<form id="formID" class="Form" action="" method="post">
<input name="fname" type="text" placeholder="First Name" maxlength="50" min="2" required>
<input name="lname" type="text" placeholder="Last Name" maxlength="50" min="2" required>
<input type="submit" name="submit" class="submit">
</form>

The best way to resolve this issue is to remove the alert line altogether and use a different method. For example, add a div inside your form html:
<div id="form-message"></div>
Then in your jQuery, replace the alert line with:
$('#form-message').text('Please, fill the form before you submit');
This is better in terms of usability as actual alerts are rarely (if ever) used on websites these days.
Hope this helps!

Related

Form submits multiple times

I am using a Wordpress theme that unfortunately is duplicating the header HTML for desktop, mobile and tablet. As a result, a login form I have appears to be submitting multiple times even though "Login" is only clicked once.
Here is the HTML for the form:
<div id="user-login">
<div class="com_row">
<div class="com_panel_body">
<div id="error_message91" class="com_alert com_alert_danger" style="display: none;">
</div>
<form method="post" id="validation_form83">
<input type="hidden" name="login_form_flag" value="1">
<div class="login-username">
<label for="email" class="main_label">Email Address</label>
<input id="email68" type="email" name="email" required="required">
</div>
<div class="login-password">
<label for="password" class="main_label">Password:</label>
<input id="password82" type="password" name="password" required="required">
</div>
<ul class="login-links" style="margin-top:-30px"><li>Forgot Password?</li></ul>
<div class="login-submit" style="margin-top:-20px">
<input type="submit" value="Login"></div>
<div style="padding-top:20px"><a class="button green small borderd-bot" href="/client_account">Register</a></div>
</form>
</div>
</div>
</div>
Here is the relevant JS:
$("[id^='validation_form']").each(function(i) {
//necessary because there are 3 form duplicates on the page, so this button works on all
jQuery(document).on("submit", this, SubmitValidationForm);
});
function($) {
SubmitValidationForm = function (event) {
event.preventDefault();
var formk = "#"+event.target.id;
var k = $(formk).serialize();
k += "&action=wcap_requests&what=validate_login";
jQuery("input[type=email]",formk).prop("disabled", true);
jQuery("input[type=password]",formk).prop("disabled", true);
jQuery("input[type=submit]",formk).prop("disabled", true).val(WCAP_Working_text);
var childf = $(formk).closest('div','.com_alert').children( ".com_alert");
$(childf).hide();
var login_form_flag = jQuery("input[name=login_form_flag]",formk).val();
jQuery.post(wcap_ajaxurl, k, function (data) {
data = JSON.parse(data);
console.log(data);
if (data.status === "OK") {
//== if client login through wcap login form
if (login_form_flag === '1'){
window.location.href = client_area_url;
}
else {
if (redirect_login !== "0") {
window.location.href = redirect_login;
} else {
window.location.reload();
}
}
}
else {
jQuery("input[type=email]",formk).prop("disabled", false);
jQuery("input[type=password]",formk).prop("disabled", false);
jQuery("input[type=submit]",formk).prop("disabled", false).val('Login');
$(childf).html(data.message).show();
}
});
};
};
The problem is because there are 3 duplicate forms on the page HTML (with only 1 visible to the user), the SubmitValidationForm function is called 3 times every time. The issue is pronounced when there is a valid login submitted, but the error box still appears saying invalid email after a few seconds (even though the login is actually correct and the user gets automatically redirected properly to the client area ). This error seems caused by the fact the SubmitValidationForm function is called 2 subsequent times after the first 'valid' submission which makes it think it's invalid, when it's not... the interesting thing is it doesn't seem caused by the other duplicate forms in the HTML, as the form ID attribute that I display in browser console shows only the 'valid' form being submitted (albeit multiple times -- perhaps because of the jquery.on() for each function).
Any ideas how to fix?
Thanks!
I figured out the issue. If anyone else is looking at this in future the issue was with respect to the 'on' function, it was referencing the 'document' before instead of 'this'. So it should be changed to:
$("[id^='validation_form']").each(function(i) {
jQuery(this).on("submit", this, SubmitValidationForm);
});

Javascript Word Counter w/ enabled Disabled buttons

What I'm trying to do is;
-Right arrow disable until I start typing
-when I click that counts the words in the text box and image changes to the left arrow
-when I click the left arrow that restarts the progress.
Right now it doesn't really display the result it just shows that for a second and changes the image but auto restarts everything in a second and right arrow button is enabled all the time.
$(document).ready(function() {
$("input").click(function() {
var words = $.trim($("textarea").val()).split(" ");
document.getElementById("resultDiv").innerHTML = words.length;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
<form action="" method="get" name="frm" onSubmit="TextCount();">
<!--Text Area-->
<textarea id="mytext"></textarea><br/>
<!--Image Flipped Here-->
<input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
<br/>
<!--Result-->
<div id="resultDiv">0</div> Characters
</form>
</div>
You've configured your form to perform a GET request. When you click your input type="image" element, the form's submission event fires and performs the GET request to the page. Since there's no handler code for these requests, your page effectively goes through a "refresh" as you've noticed.
To prevent this behavior, capture the event object from the fired click event and use it to preventDefault() in your callback function:
$(document).ready(function() {
$("input").click(function(e) {
e.preventDefault();
var words = $.trim($("textarea").val()).split(" ");
document.getElementById("resultDiv").innerHTML = words.length;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
<form action="" method="get" name="frm" onSubmit="TextCount();">
<!--Text Area-->
<textarea id="mytext"></textarea><br/>
<!--Image Flipped Here-->
<input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
<br/>
<!--Result-->
<div id="resultDiv">0</div> Characters
</form>
</div>
Probably better off using focus instead of click, in case the user uses tab or something.
$(document).ready(function() {
$('input').blur(function () {
$('#submit').attr("disabled", "disabled");
});
$("input").focus(function () {
$('#submit').prop('disabled', false);
var words = $.trim($("textarea").val()).split(" ");
$("#resultDiv").innerHTML = words.length;
});
$("#submit").click(function(){
var imageSource = $(this).attr('src');
if(imageSource == "imgs/arrow_button_metal_green_left_T.png"){
$(this).attr("src","imgs/arrow_button_metal_green_right_T.png");
}else{
$(this).attr("src","imgs/arrow_button_metal_green_left_T.png");
}
});
});
You can get resultDiv easier with jQuery.

Bootstrap jQuery - Issues with empty field validation

I've written some jQuery to validate my Bootstrap forms, however I'm having a few issues.
Firstly, I want a red outline to appear if the user clicks off the input field without typing anything in: JSFiddle example here. In this example I'm using the Bootstrap Validator plugin, however I want to imitate this effect without using the plugin.
Second, and linked to the issue I just mentioned, the green outline only appears once the user clicks the submit button, thus the user only sees it for half a second or so before they are redirected, making it a little pointless. Again, this would be solved by having an error/success outline appear once the user clicks off the input. If anyone could help me out it would be greatly appreciated.
This is the code I have so far:
HTML:
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
jQuery:
$(document).ready(function() {
$('#auth_form').on('submit', function(e) {
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
e.preventDefault();
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
}
})
})
JSFiddle
Try this updated fiddle: jsfiddle.net/xqwsobmo/20/
Need to add input blur event and validate input
$(document).ready(function() {
$('#auth_code_input').blur(function(){
if(!ValidateInput()){
e.preventDefault();
}
});
$('#auth_form').on('submit', function(e) {
if(!ValidateInput()){
e.preventDefault();
}
})
});
function ValidateInput(){
var IsValid=false;
var auth_code = $('#auth_code_input').val()
if (auth_code=="") {
$('#auth_code').addClass('has-error');
$('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
IsValid=false;
} else {
$('#auth_code').removeClass('has-error').addClass('has-success');
$('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
IsValid=true;
}
return IsValid;
}

Adding exceptions in blur event

I'm making a simple Multiple Choice Question form. I want to put validation that if a user clicks on Question <textarea> and clicks somewhere else on page while not entering value in <input type="text" name="q1_option1"> of options of the question, then the user should get an alert("Wait, you forgot to enter options for Question 1");. I tried doing it like this but it's simply not the thing that i want. Here is the <html>
<div class="right">
<div class="row" style="margin:5px;">
<label><strong>Question 1</strong></label>
<div>
<textarea name="question1"></textarea>
</div>
</div>
<div class="row">
<div class="span-4"><input type="text" name="q1_option1" value="" class="q1" /></div>
<div class="span-4"><input type="text" name="q1_option2" value="" class="q1" /></div>
<div class="span-4"><input type="text" name="q1_option3" value="" class="q1" /></div>
<div class="span-4"><input type="text" name="q1_option4" value="" class="q1" /></div>
<div class="clear"></div>
</div>
</div>
And this is <script>
<script type="text/javascript">
$(function(){
$('textarea[name=question1]').blur(function(){
$('.right').click(function(event) {
if($(event.target).is('input[name=q1_option1]')) {
$('#alert_error_message').text('Please enter all options in Question 1!!');
callalert();
return false;
}
else
{
alert('Not working!');
}
})
})
})
</script>
Now what is happening in this code, when the user clicks on <input> to enter the options, blur is fired and user gets the alert.
What i want that if a user clicks on these <input> of answers, he should not get the alert, else, the user must get the alert for not entering values in the <input> of options!!
DEMO
I came up with below approach and I will explain what I am doing with the below code. Check for the inline comments.
$(function(){
var hasFocus=false; //this variable is used to check whether focus was on textarea
//when clicked on document
$('textarea[name=question1]').blur(function(event){
setTimeout(function(){
hasFocus=false; //on blur set the variable to false but after sometime
},100);
}).focus(function(){
hasFocus=true; //on focus set it to true again
});
//A click event on document so that to display alert only if textarea had focus and the
//targetted element is not radio button
$(document).on('click',function(e){
if($(e.target).attr('class')!='q1' && hasFocus && $(e.target).attr('name')!="question1")
{
if(!$('.q1:checked').length) //if any radio has been checked
{
//if not checked then display alert
alert('Please select an option');
}
}
});
})
How about this?
var all_filled = true;
// for each component having class "q1", if the value is empty, then all_filled is false
$('.q1').each(function(comp){
if(comp.val() == ''){
all_filled = false;
break;
}
});
// if not all input is filled, then do what you want
if(!all_filled){
// do what you want
}

Make a text entry fade out after input validation, then fade back in with original placeholder text

I'm setting up a splash page with a single email entry form.
Right now when a user enters an email the form fades out quickly and a thank you message fades in to replace it. What I want to do is have the 'Thank You' fade out after a couple of seconds then have the form fade back in.
I can get it to happen, it's just that the form comes back with the email that was originally entered and I'm having a hell of time trying to figure out a way of replacing the email address with the original placeholder text.
Here's the from:
<form action="" method="post" id="sendEmail">
<div class="forms">
<div class="buttons" id="buttons">
<button type="submit" id="submit"></button>
<input type="hidden" name="submitted" id="submitted" value="true"
/>
</div>
<div class="text_box" id="text_box">
<input type="text" name="emailTo" id="emailTo" value=" Your Email Here"
onfocus="this.value=''" />
</div>
</div>
</form>
<div class="answerBox">
<div style="display:none;" id="thanks">Thank you!</div>
</div>
And this is the Jquery I'm using to handle the fade in, fade out after successful validation:
if (hasError == false) {
$.post("adduser1.php", {
emailTo: emailToVal
}, function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#thanks").fadeIn(200)
});
});
}
return false;
I tried this:
$.post("adduser1.php", {
emailTo: emailToVal
}, function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#emailTo").text(" Your Email Here", function () {
$("#thanks").fadeIn(200))
});
But It doesn't work.
Any ideas?
First, #emailTo is not affected by .text as it's an <input> element. Replace .text with .val:
$("#emailTo").val(" Your Email Here")
Second, you're trying to bind #thanks.fadeIn to the end of .text (or .val) change. Since it's an instant action, this is unnecessary (and I think also not proper jQuery syntax). Just place $("#thanks").fadeIn(200) in the next line:
function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#emailTo").val(" Your Email Here")
$("#thanks").fadeIn(200))
});
}
Working example: jsFiddle

Categories