Develop Reference

If click count number JavaScript

I'm building a demo login form. For the demo, I'd like two things to happen:
When the user clicks the login button for the first time, an error message appears.
When the user clicks the login button for the second time, they are directed to another page.
Here's how my code looks so far:
function toggleError() {
var toggleError = document.querySelector('.message--error');
toggleError.classList.toggle('error-toggled');
}
.message {
display: none;
}
.error-toggled {
display: block;
}
<div class="message message--error">
<span class="message__text">The login details you entered are incorrect.</span>
</div>
<form onsubmit="toggleError(); return false;" action="/" method="get" class="login__form" autocomplete="off">
<label for="email" class="srt">Email</label>
<input type="email" name="email" id="email" required placeholder="Email" class="input input--border-right">
<label for="password" class="srt">Password</label>
<input type="password" name="password" id="password" required placeholder="Password" class="input">
<div class="login__actions">
<button type="submit" class="button">Log In</button>
Lost your password?
</div>
</form>
Using onsubmit="toggleError(); return false;" achieves my first objective of displaying an error message.
How would I extend this function so the user is directed to a page when they click the button for a second time? I'm guessing I would write some type of loop?

Based on first two comments here a possible way:
<script>
var clickCounter=0;
function toggleError() {
//Increase the value by one
clickCounter++;
if (clickCounter == 1) {
//what ever you want to do
return false;
} else if (clickCounter == 2) {
//You need to change the value again
...
var toggleError = document.querySelector('.message--error');
toggleError.classList.toggle('error-toggled');
return false;
}
}
</script>

Show loading GIF when submitting form

I have form which has some inputs. I would like to show loading gif while submitting the form and hide when form is submitted.
I sent details using php and once submitted it shows response, but when submitting form, I would like to show gif as loading screen and hide when it is completed.
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#subject').val('');
$('#message').val('');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Email" id="email" value="searchbbc1881#gmail.com" name="email" required>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>
</div>
<button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>

Okay, first of all you could use modal and add gif file on top of it. Or you can simply add the image where you want to add. Here, I will work with modal.
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
var result = $.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
});
// Here, you have to add, what you want to do right after data is sent.
$("#modal").css("display", "flex");
// Overflow of main body to hidden
$("body").css("overflow", "hidden");
result.done(function(response) {
// Now, you can hide modal or loading gif
$("#modal").css("display", "none");
// Overflow of main body to hidden
$("body").css("overflow", "auto");
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Reset form at once instead
$("#ajax-contact").reset();
});
});
});
#modal {
display: none;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact" method="post" action="mailer.php" class="mu-contact-form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" value="Sagar Rawal" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter Email" id="email" value="searchbbc1881#gmail.com" name="email" required>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="message" required>This is message </textarea>
</div>
<button type="submit" name="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<!-- My modal for modal -->
<div id="modal">
<img width=200 src="https://thumbs.gfycat.com/BogusEmptyBrontosaurus-small.gif" alt="Loading-gif"/>
</div>
In js, I have added result as object of ajax. And, right after data are sent, we show our gif file. And, after we gave got data, we will again hide gif div. Feel free to ask!!!!!!!!

.php file won't display form data

I'm trying to change my "Submit" button style when a user clicks on it upon submitting the form.
The action attribute calls PHP file, but the actual data doesn't display until I remove onSubmit attribute from my form. Then I can't use sendBtn() function to change the style of the button.
Pseudo-class option is not good, because it would change the style even if the form is empty.
Any ideas?
PS. I'm on local server with MAMP and using Dreamweaver for editing.
<form class="customform" method="post" action="emailOnServer.php" method="post" onSubmit="return sendBtn();" autocomplete="on" >
<div class="s-12" onClick="formFocus()"><input id="imie" name="imie1" placeholder="Twoje imię" type="text" required </input></div>
<div class="s-12" onClick="formFocus()"><input id="email" name="email1" placeholder="Twój e-mail" type="email" required </input></div>
<div class="s-12" onClick="formFocus()"><textarea placeholder="Wiadomość" id="pole" rows="5" style="resize:none;" required></textarea </input></div>
<div class="custom2" style="width: 34%; float: right;" ><input id="se" type="submit" value="Wyślij" style="background-color:#92c500; color: white; border-color:#6C0;" ></input> </div>
<div class="custom1" style="width: 65%;" ><button id="resetButton" onclick="cleanBtn()" type="reset" style="background-color: #808080; color: white; border-color:#066; border-radius:2px;">Wyczyść </button></div>
<img id="tick123" src="img2/green-tick-icon-0.png" style="display: none; float:right; position:absolute; right:1%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
<img id="tick1234" src="img2/green-tick-icon-0.png" style="display: none; position:absolute; left:58%; top:86%; padding:0; margin:0; width: 28px; height: 28px;"/>
</form>
<!-- more code to change form style on focus -->
function sendBtn() {
if ( document.getElementById('email').value.indexOf("#")> 0 &&
document.getElementById('email').value.indexOf(".")> 2 &&
document.getElementById('imie').value != 0 &&
document.getElementById('email').value != 0 &&
document.getElementById('pole').value != 0){
document.getElementById('se').style.backgroundColor = "#00283A";
document.getElementById("tick123").style.display="block";
document.getElementById('se').value="Wysłano";
document.getElementById('email').disabled=true;
document.getElementById('imie').disabled=true;
document.getElementById('pole').disabled=true;
return true;}}
It's from a free template and I know I should've used css stylesheets to make it more readable
This is emailOnServer.php file:
<body>
Hello User
<?php $name = $_POST['imie1'];
echo $name; ?>
</body>

First, your HTML have some errors, e.g.:
<input id="imie" .... type="text" required </input>
// look here ^
// the tag is not closed correctly
should be
<input id="imie" name="imie1" placeholder="Twoje imię" type="text" required />
Anyway, if you need to remove the onsubmit attribute, you can do something like this
<form name="myform" ...>
...
</form>
then, the js
var form = document.forms.myform;
form.onsubmit = function(){
// do stuff
document.getElementById('se').style.backgroundColor = "#00283A";
// ...
}
This jsfiddle has an example code for your requirements. The form elements was simplified.

Show a dialog box next to a textarea without pop-up or alert box

I want to show a short message besides a textarea once we click inside the textarea.
Here is the simple code that i need to modify :
<textarea id="txt" ></textarea>
and :
$('#txt').click(function(){
// what should i put here to show a dialogbox besides textarea ?
});
Here is a fiddle demo except that i need to put whatever i want as a message once we click inside textarea.
I am a complete newbie so please bear with me if i didn't put things the way it should. Thank you.
input, textarea, select {
display: block;
}
<form>
<p>Try submitting an empty form and one with invalid email addresses.</p>
<label for="one">One Email: </label><input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
<label for="another">Another Email: </label><input type="email" id="another" data-errormessage="Generic error message">
<label for="textarea">A textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Add some text"></textarea>
<select required data-errormessage-value-missing="Please, pick one">
<option selected disabled value="">Pick one</option>
<option value="1">One</option>
</select>
<button>Submit</button>
</form>

You could do something like the following - and I would use focus rather than click . The following code adds the text message you need besides your textarea.
If you want to style the message with an arrow too, have a look at this: cssarrowplease.com
// show hidden message on focus
$('#txt').on('focus', function() {
$('#txt-message').show();
});
// hide hidden message on blur - optional extra
$('#txt').on('blur', function() {
$('#txt-message').hide();
});
/* start message hidden */
#txt-message {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt"></textarea>
<span id="txt-message">message here</span>

Add:
<span id='shortMessage'></span>
tag right after the textarea div.
Then replace your comment with:
$('#shortMessage').innerHTML('your message');

Hope this will help you .
$(document).ready(function() {
$('#textarea').click(function() {
$('#showMsgId').text("some message .......")
});
});
input,
textarea,
select {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Try submitting an empty form and one with invalid email addresses.</p>
<label for="one">One Email:</label>
<input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
<label for="another">Another Email:</label>
<input type="email" id="another" data-errormessage="Generic error message">
<label for="textarea">A textarea:</label>
<div style="width: 100%; overflow: hidden;">
<textarea id="textarea" required data-errormessage-value-missing="Add some text" style="width: 200px; float: left;"></textarea>
<span id="showMsgId" style="margin-left: 10px;"></span>
</div>
<select required data-errormessage-value-missing="Please, pick one">
<option selected disabled value="">Pick one</option>
<option value="1">One</option>
</select>
<button>Submit</button>
</form>

Here is the fiddle for my non-JavaScript alternative.
Pete's answer works if you are satisfied with simply displaying text. If you need the info-box to look pretty and be displayed above the other elements then you will need something different like this:
CSS:
.cPopTable {
position: absolute;
top: 50px;
right: 200px;
background-color: #ffffff;
z-index: 10;
display:none;
}
.cContainer:active .cPopTable {
display:table;
}
HTML:
<div class="cContainer">
<textarea id="txt">Default text here</textarea>
<table class="cPopTable"><tr><td>message pop-up here</td></tr></table>
</div>
Also, the benefit is not using any JavaScript. In fact, unless you are worried about really old browsers you can easily handle all the tasks like these using CSS z-index and event-processing as shown in this example.
You can easily change the position and the way the box is displayed (font, background, etc.) by working with the cPopTable CSS.

JQuery Validation use different divs for different input elements for errors, and multiple error classes

I'm using JQuery Validation on my form, and I'm trying to get the input elements to show a red border if the input is invalid, and also show the error message underneath the appropriate input element.
My HTML code is basically this:
<div id="formContainer">
<form id="mainForm" action="action.php" method="post">
<input class="formTextBox" type="url" name="website" placeholder="website" required />
<input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
<button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Snapshot my site</span> </button>
</form>
</div>
I've tried adding specific DIVs after the form (still in #formContainer), that will get populated with the error using the errorPlacement option. Inside the function I check the element's name attribute, and append the error to its corresponding div... but when I continue typing, or clicking between inputs, the error message keeps repeating and repeating and no error ever gets cleared (I see the same error message many times, one underneath the other).
I've tried putting each input element inside its own div (with a fixed width), and set the errorElement to DIV, so when JQuery Validation creates that new div and appends it next to the input element, it will get pushed underneath... but that caused some design issues, and I'd prefer the 2 error containers to be in the #formContainer div (and it seems a little bit wonky to do it that way).
Also, what do I do if need to style both the error on the input element, and the error message DIVs?
Here's a little illustration of what I had in mind:
Thanks!

Try
<div id="formContainer">
<form id="mainForm" action="action.php" method="post" novalidate>
<div class="input-control">
<input class="formTextBox" type="url" name="website" placeholder="website" required />
</div>
<div class="input-control">
<input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
</div>
<button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Submit</span>
</button>
</form>
</div>
then
#formContainer {
vertical-align: top;
}
.input-control {
display: inline-block;
vertical-align: top;
}
div.error {
display: block;
background-color: red;
color: white;
}
input.error {
border: 1px solid red;
}
.formTextBox {
width: 210px;
background-color: white;
color: black;
}
and
jQuery(function ($) {
var validator = $('#mainForm').validate({
rules: {},
messages: {},
errorElement: "div"
});
});
Demo: Fiddle