I have a button and a form on my page. When the button is clicked it should display the form, and when click again it should hide the form.
For some reason, whenever the button is clicked it executes the first if statement regardless of whether it is true or not. How can I fix this?
Here is my HTML code
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>
Here is my JavaScript
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
if (login_form.css('display') == "none") {
$(document).on('click', '.checkout-login-button', function () {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
});
} else {
$(document).on('click', '.checkout-login-button', function () {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
});
}
You have first to create the event, then inside it you do your conditional statements.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
return;
} else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
return;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
You can have only one click handler and check the CSS state inside it. Besides, css is taking care of the visibility using display:block/none, so in my opinion the show()/hide() methods are redundant.
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function() {
if (login_form.css('display') === "none") {
login_form.css('display', 'block');
} else {
login_form.css('display', 'none');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
</form>
Change your JavaScript as below:
var login_button = $(".checkout-login-button");
var login_form = $(".pop-login-form");
var show_form = false; // add this line
$(document).on('click', '.checkout-login-button', function () {
if(!show_form){
//SHOW FORM
show_form = true;
}else{
//HIDE FORM
show_form = false;
}
});
You seem to be trying to change the function handling the click, which would be accomplished by removing the existing one and adding another. You’re trying to remove it here:
login_form.off('click');
but that doesn’t work when you actually added the listener to document to make use of event delegation, and no listener is being added again after this.
It’s simpler to just have one listener, and to attach it directly to the element if it exists at the time:
var login_form = $(".pop-login-form");
$(".checkout-login-button").click(function () {
login_form.toggle();
});
which your login_button initialization suggests is the case. If not, continue with event delegation by all means:
var login_form = $(".pop-login-form");
$(document).on("click", ".checkout-login-button", function () {
login_form.toggle();
});
It's the other way around, you define the .click() event once and inside it you define the logic for the if-else structure.
The way you have it now, it is only showing the form (never hiding it) because the only part of the code being run is the one inside login_form.css('display') == "none" which is true when the page loads
HIH
var login_button = $(".checkout-login-button"); var login_form = $(".pop-login-form");
$(document).on('click', '.checkout-login-button', function(){
if( login_form.css('display') == "none" ) {
login_form.show();
login_form.off('click');
login_form.css('display', 'block');
}
else {
login_form.hide();
login_form.off('click');
login_form.css('display', 'none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="return-user-signin">
<h2 class="checkout-return-cust">Returning customer?</h2>
<button class="checkout-login-button"><i class="fas fa-user"></i> log in</button>
<form class="woocomerce-form woocommerce-form-login login check-login pop-login-form" method="post" style="display: none;">
<p class="form-row form-row-first">
<input placeholder="Username or email" class="input-text placeholder" name="username" id="username" type="text">
</p>
<p class="form-row form-row-last">
<input class="input-text placeholder" placeholder="Password" name="password" id="password" type="password">
</p>
<div class="clear"></div>
<p class="form-row">
</p>
<div class="clear"></div>
I am trying to validate the form with id's username and initial_password: The HTML portion is as:
<form name="myform" action="includes/logincontrol.php" method="POST" onsubmit="return validateForm()">
<div class="form-group"> <!-- User ID Field -->
<label id="user_name_error" >User ID:</label>
<input class="form-control" id="username" type="text" onfocusout ="validateUserName()"/>
</div>
<div class="form-group"> <!-- Password Field -->
<label id="password_error">Password: </label>
<input class="form-control" id="initial_password" type="password" onfocusout ="validatePassword()"/>
</div>
<div class="form-group"> <!-- Register -->
<p id="submit-error"></p>
<hr/>
<button class="btn btn-primary" id="login" type="submit">Login</button>
<input class="btn btn-danger" type="reset" value="Reset" onClick="clearfunc()"/>
<hr/>
<button type="button" class="btn btn-success" onclick="window.location.href = 'register_user.php'">Register</button>
<button type="button" class="btn btn-warning" onclick="window.location.href = 'changepw.php'">Change Password</button>
</div>
</form>
Java Script:
function validateUserName() {
var user_name_entered = document.getElementById('username').value;
if (user_name_entered.length === 0) {
producePrompt('User empty?', 'user_name_error', 'red');
document.getElementById('login').disabled = true;
return false;
}
producePrompt('User Name OK!', 'user_name_error', 'green');
document.getElementById('login').disabled = false;
return true;
}
function validatePassword() {
var password_entered = document.getElementById('initial_password').value;
if (password_entered.length === 0) {
producePrompt('Password empty?', 'password_error', 'red');
document.getElementById('login').disabled = true;
return false;
}
producePrompt('Password Entered!', 'password_error', 'green');
document.getElementById('login').disabled = false;
return true;
}
function producePrompt(message, promptLocation, color) {
document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;
}
I am unable to get the elements in $_POST array. Please help
You have to put name at inputs, to access them with $_POST.
<input name="usernameInput" class="form-control" id="username" type="text" onfocusout ="validateUserName()"/>
<?php
$username = $_POST['usernameInput'];
?>
If you want to see if the form is submited put a name in the type submit input and try this:
if (isset($_POST['submitButton']) {
$username = $_POST['usernameInput'];
#..etc
}
I am using regex to disable registering with a apple email
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)'))
The code is working fine if I run it with the browser console but I cant get it to work initially, Ive wrapped it in a $(document).ready(function () { .. } as well the blur function just never seems to fire. Here is the code below as well as CodePen
Html
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
JS
function emailValidate(){
var str = $('#Email').val();
$('#Email').blur(function() {
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate()
You need to re-assign the value using val() to variable str inside blur event callback.
function emailValidate(){
$('#Email').blur(function() {
var str = $(this).val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
alert(str)
});
}
emailValidate()
you must get value of target object #Email when the blur event trigger. In your code, you get that value when you bind blur event.
Try with
function emailValidate(){
$('#Email').blur(function() {
var str = $('#Email').val();
if (str.match('(#me.com)') || str.match('(#icloud.com)') || str.match('(#mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<form role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? Register</div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>
Hope this helps.
Regards.
I'm relatively new to HTML and JS and I've been trying to create a simple login page that on entering valid credentials redirects to index.html page. But no matter what I enter it always redirects to the index.html page. Here's the HTML code for the login page
<form role="form" action="index.html" name="formlogin" method="post" class="login-form" onsubmit="check_info()">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn" value="submit">Sign in!</button>
</form>
Here's the javascript
<script type="text/javascript">
function check_info()
{
var myform = document.formlogin;
if(myform.form-username.value == "test")
{
if(myform.form-password.value == "123")
{
return true;
}
}
else
{
return false;
}
}
</script>
P.S: I'm using a bootstrap login template.
Html:
onsubmit="return check_info()"
Javascript:
function check_info()
{
var user = document.getElementById("form-username").value;
var pass = document.getElementById("form-password").value;
if(user == "test")
{
if(pass == "123")
{
return true;
}
}
return false;
}
You can use required parameter like this:
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" required>
I have a web form that submits if my function validate form returns true in that function i wrote an if statement that if another function called usernamecheck returns true then return the validateform function true. I dont want the form to submit unless you click the button to check the username. I know i didnt write this the best way i hope you understand
<!-- Signup Form -->
<form name='signup' action="subscription.php" onsubmit="return validateForm();" method="post" >
<input type="text" id="signupUsername" name="signupusername" placeholder="Business Name" tabindex=1 required>
<input type="password" id="signupPassword" placeholder="Password" name="signuppassword" tabindex=2 required> <br>
<input type="text" id="ownerName" placeholder="Owner's Name" name="ownername" tabindex=3 required>
<input type="email" id="signupEmail" placeholder="Email" name="signupemail" tabindex=4 required>
<input type="tel" id="signupphoneNumber" placeholder="Phone Number" name="signupphonenumber" tabindex=5 required>
<input type="image" id="signupSubmit" src="images/signupBtn.jpg">
<input type="text" id="city" placeholder="City" name="city" tabindex=6>
<input type="text" id="state" placeholder="State" name="state" tabindex=7>
This is the button that you click to check your username if it exists
<input type="button" id='check' value="Check It">
//
</form>
<script type="text/javascript">
Below there is the function where if you click the button above it checks the function usernamecheck
$(function() {
$( "#check" ).click(function() {
return usernamecheck();
});
});
Below is the validateForm function where if usernamecheck returns true it returns true as well and submits the form
function validateForm()
{
if(usernamecheck() && $("#signupUsername").val().length < 4) {
return true;
}
}
function usernamecheck() {
$.post( "checkusername.php", { username: $("#signupUsername").val() })
.done(function( data ) {
result = JSON.parse(data);
if(result["status"]== "Username is taken")
{
alert("username is taken");
return false;
}
else if(result["status"]== "Username is Available") {
alert("username is Available");
return true;
}
else {
alert('You did not check the username');
}
});
}
</script>
<!-- Map Logo -->
<img src='images/map.jpg' id="map" class='menuitems'>
<!-- About Us Logo -->
<img src='images/aboutus.jpg' id="aboutus" class='menuitems'>
<!-- People Logo -->
<img src='images/people.jpg' id="people" class='menuitems'>
</div>
</div>
</div>
</body>
</html>