I'm trying to make a simple controll with jquery that should show an alert onclick if username and password are not empty.
Actually i've tryed the following code for jquery but it has no effect, no any response in console, nothing.
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if (!$('#username').val() && !$('#password').val()) {
alert("VAI!");
}
});
</script>
EDIT:
here is full code of the page, in codebehind there is nothing, seems that the javascript just dies when executing the function click.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="auth.aspx.vb" Inherits="servizigab.auth" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico" />
<title>Gab Servizi: Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link href="/assets/css/bootstrap.min.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/modalstyle.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/login.css" type="text/css" runat="server" rel="stylesheet" />
</head>
<body class="text-center fade-in">
<form class="form-signin" runat="server">
<img class="mb-2" draggable="false" src="assets/img/gabservizi.png" alt="" width="160" height="160" />
<h1 class="h3 mb-3 font-weight-normal" translate="yes">Accedi a Gab Servizi!</h1>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login"/>
<p class="text-muted mt-2 mb-3">Non hai un profilo? Richiedilo!</p>
<div class="myAlert-bottom alert alert-danger">
×
<strong>Password o nome utente errati!</strong> Riprovare!
</div>
<iframe id="log" class="d-none"/>
</form>
<!-- librerie js -->
<script src="/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
</body>
</html>
Problem 1 Your logic is backwards
! means not.
So you are testing if they are both empty (i.e. There is not a value for username and there is not a value for password) and not that they both have values.
Remove the !s.
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
Problem 2: Your HTML is invalid
Use a validator. It will tell you that your <iframe> is missing its end tag. This puts all the content that follows it (including the script) inside the iframe so the script is treated as alternative content for browsers that don't support iframes and is not executed.
Use strings length property:
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
//check if both the username and password values have
// lengths grater then zero
if ($('#username').val().length > 0 && $('#password').val().length > 0) {
alert("VAI!");
}
});
</script>
Or just delete the ! (not) sign from your own code.
It is a good idea to bind your events in $(document).ready if you have lots of other javascript code on page. your code works perfectly if there is no other javascript code.
Just bind click event in $(document).ready as shown below
$(document).ready(function() {
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
})
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it will work.
if ($('#username').val() && $('#password').val()) {
Related
I am trying to input through a form and when I submit the button, it is not working. Kindly help me with this. I want to display the input taken from the form and display it in the span tags at the bottom.
Below is my HTML and JavaScript:
// Variables are being declared.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails() {
sRecipientName = document.getElementById("recipient").value;
console.log(sRecipientName);
sOrganizationName = document.getElementById("organization").value;
console.log(sOrganizationName);
sDate = document.getElementById("date").value;
console.log(sDate);
sURL = document.getElementById("URL").value;
console.log(sURL);
sHostName = document.getElementById("host").value;
console.log(sHostName);
}
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="submitDetails()">
</form>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br/>
<br/> <span id="organizationName">organizationName</span> <span id="eventDate">eventDate</span> <span id="websiteURL">websiteURL</span>
<br/>
<span id="hostName">hostName</span>
</article>
First of all there is no need of a form for your use-case.
A <form> is required when you have to post some data to server, but in your case you just wanted to do some DOM manipulations which you can do without a form.
I have just written a function updateDetails() which takes the values from your inputs and overwrites your span's innerHTML with those values. On your submit button, I have changed it from a submit to a plain <button>, and on click I have just called the function updateDetails() to update the spans.
I have attached a snippet that will work in your use case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="pageForm">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button onclick="submitDetails()">Submit</button>
</section>
<article id="placeholderContent">
<span id="recipientName">recipientName</span>!
<br>
<br>
<span id="organizationName">organizationName</span>
<span id="eventDate">eventDate</span>
<span id="websiteURL">websiteURL</span>
<br>
<span id="hostName">hostName</span>
</article>
<script>
function submitDetails(){
updateDetails("recipient", "recipientName");
updateDetails("organization", "organizationName");
updateDetails("date", "eventDate");
updateDetails("URL", "websiteURL");
updateDetails("host", "hostName");
}
function updateDetails(copyId, pasteId){
document.getElementById(pasteId).innerHTML = document.getElementById(copyId).value;
}
</script>
</body>
</html>
From what I understand, you are trying to change the placeholder text with the information from the form. You would want to first prevent the default behavior of the form submission by passing the event to the function in your submit (which I've changed to a button).
You would then want to have something set the innerHTML of the element to one of the values of the form.
var sRecipientName;
var sOrganizationName;
var sDate;
var sURL;
var sHostName;
function submitDetails(e) {
e.preventDefault();
sRecipientName = document.getElementById("recipient").value;
sOrganizationName = document.getElementById("organization").value;
sDate = document.getElementById("date").value;
sURL = document.getElementById("URL").value;
sHostName = document.getElementById("host").value;
document.getElementById('recipientName').innerHTML = sRecipientName;
document.getElementById('organizationName').innerHTML = sOrganizationName;
document.getElementById('eventDate').innerHTML = sDate;
document.getElementById('websiteURL').innerHTML = sURL;
document.getElementById('hostName').innerHTML = sHostName;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>My website</title>
</head>
<body>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" id="recipient" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:</label>
<input type="text" id="organization" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:</label>
<input type="text" id="date" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:</label>
<input type="text" id="URL" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:</label>
<input type="text" id="host" name="hostName" placeholder="Host Name" />
<button type="submit" onclick="submitDetails(event)">Submit</button>
</form>
</section>
<article id="placeholderContent">
<span id="recipientName"></span>
<br />
<br /> <span id="organizationName"></span> <span id="eventDate"></span> <span id="websiteURL"></span>
<br />
<span id="hostName"></span>
</article>
<script src="script.js"></script>
</body>
</html>
Make sure you are not using console.log(). First remove it.
Then you have to add an eventListener that works if form is submitted and to prevent default events.
Example:
<input value="I am" id="val1" >
<span id="output">
//JavaScript codes
let data = document.getElementById('val1').value;
document.getElementById('output').innerHTML = data;
But make sure those codes are in function that responds to the submit event
I am making a form which will have 3 inputs (firstname , lastname and email). There should be an option to add additional groups of inputs.
The 3 fields and button should be a single line and properly arranged. However, they are appearing one below another. not sure where's the mistake.
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Query</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<form method="post" action="submit.php" style="widows: 500px; margin:auto">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
</body>
</html>
any help would be great
I was able to fix the problem. sharing the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>L</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<style>
form {
padding: 40px 40px 30px !important;
background: #ebeff2;
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mt32"> Customer Query</h2>
<form class="form-inline mt32" action="#">
<div class="form-group fieldGroup">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span
class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
<br/>
<br/>
</div>
</div>
</form>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
It can be done using form-inline.
Refer bootstrap link : https://getbootstrap.com/docs/4.0/components/forms/
I am making a laravel based website and i have a login form and when i press "Register" i want to be switched with the register form but it's not working.Here is the code.
home.js:
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
home.blade.php
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="message">Already registered? Sign In</p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
</body>
</html>
home.js is in public/js/home.js
Try this
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> //** Add jQuery
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered? Sign In
</p>
</form>
<form class="login-form" id="loginID"> //******* add ID
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body> //** Missed the closing tag
</html>
Add this to you home.js file
#loginID{
display:none;
}
Working CODE SNIPPET
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});
#loginID{
display:none;
}
<html>
<head>
<title> AgroHelp Login</title>
<link href="{{asset('css/home.css')}}" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/home.js"></script>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered? Sign In
</p>
</form>
<form class="login-form" id="loginID">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered? Create an account
</p>
</form>
</div>
</div>
</body>
</html>
<div class="login-page">
<div class="form">
<form id="a" class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
<button>create</button>
<p class="login">Not registered? Create an account</p>
</form>
<form id="b" class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="register">Already registered? Sign In</p>
</form>
</div>
</div>
Here are the script
$(document).ready(function () {
$('.register-form').hide();
$('.login-form').show();
$('.register').click(function () {
$('.register-form').show();
$('.login-form').hide();
});
$('.login').click(function () {
$('.register-form').hide();
$('.login-form').show();
});
});
I have a popup page loading on signin button click. The problem is when I keep pressing tabs, the focus is going out to the parent page. I want the focus to keep looping on the popup on tab press until it is closed
http://jsfiddle.net/2EXL5/
HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Css/bootstrap.min.css" rel="stylesheet" />
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.bpopup.min.js"></script>
<link href="Css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<img src="Css/Images/Logo.png" />
</div>
<div class="col-md-8 quickbuttons">
<button type="button" class="btn btn-link" tabindex="1" id="btnSignin"><span class="glyphicon glyphicon-user"></span> Sign in</button>
<button type="button" class="btn btn-link" tabindex="2"><span class="glyphicon glyphicon-info-sign"></span> Help</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 style="margin-top:50px;">Signup</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtFirstName">First Name</label>
<input type="text" name="First Name" value="" id="txtFirstName" class="form-control" placeholder="First Name" required="" tabindex="3" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLastName">Last Name</label>
<input type="text" name="Last Name" value="" id="txtLastName" class="form-control" placeholder="Last Name" required="" tabindex="4" />
</div>
<div class="form-group">
<label class="sr-only" for="txtEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="5" />
</div>
<div class="form-group">
<label class="sr-only" for="txtPassword">Password</label>
<input type="password" name="Password" value="" id="txtPassword" class="form-control" placeholder="Password" required="" tabindex="6" />
</div>
<button class="btn btn-primary pull-right" tabindex="7" id="btnSingUp"><span class="glyphicon glyphicon-plus"></span> Sign Up</button>
</form>
</div>
</div>
<div id="element_to_pop_up">
<a class="b-close">
X
<br />
</a>
<h3>Login</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtLoginEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtLoginEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="1" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLoginPassword">Password</label>
<input type="password" name="Password" value="" id="txtLoginPassword" class="form-control" placeholder="Password" required="" tabindex="2" />
</div>
<button class="btn btn-primary pull-right" tabindex="3"><span class="glyphicon glyphicon-off"></span> Sign In</button>
</form>
</div>
</div>
<script>
$("#btnSignin").click(function () {
$('#element_to_pop_up').bPopup();
});
</script>
</body>
</html>
You can capture the focusOut event of the last focusable item in the popup and when that happens just send the focus to the first focusable element in your pop-up.
You can see it working in this JSfiddle (needs setting tabindexes right).
I added an ID to the button to find it easily and then just add this to the click function:
$('#signin-button').focusout(function() {$(this).closest('form').find('input').first().focus();});
I have two div's, and inside this two div's i have <a href> that invoce javascript function.
My problem is, when i click somewhere outside my form should hide that hide, for the second div..this is working, but for the first isnt.
HTML that have javascript to invoce:
<div id="joinUs">
<a href="javascript:hideshow(document.getElementById('joinusLogin'))">
Join us!
</div>
<div id="invite">
<a href="javascript:hideshow(document.getElementById('inviteNowSignup'))">
<img src="/www/assets/newImages/header/Invite.png"></img>
</div>
HTML that have div's that is going to be invoced:
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
Here's my Javascript function:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
Can anyone help me solve this problem?
the simplest way to do that
add event to the body on click hide all pop-ups
$('body').click(function(){
$('your-pop-up').hide();
});
then add stopPropagation() to this pop-ups to prevent hide when click inside it.
$('your-pop-up').click(function(e){
e.stopPropagation();
});
Now if you press any where outside your pop-ups thy will hide
Try to Use Color Box Plugin from Link
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Pop Up</title>
<style>
#joinUs{cursor:pointer; color:#0066CC}
#invite{cursor:pointer; color:#0066CC}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$("#joinUs").colorbox({inline:true, width:"50%", href:"#joinusLogin"});
$("#invite").colorbox({inline:true, width:"50%", href:"#inviteNowSignup"});
});
</script>
</head>
<body>
<div id="joinUs">Join us!</div>
<div id="invite">Invite Now</div>
<div style='display:none'>
<div id="inviteNowSignup">
<div id="backgroundSignup"></div>
</a>
<form id="signupForm">
<input id="signupFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="signupFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="signupFormFields" type="text" name="subject" placeholder=" User Name"><br />
<input id="submitSignup" type="submit" value="SIGN UP">
</form>
<div id="alreadyMember">
Already a member? Log in here.
</div>
</div>
</div>
<div style='display:none'>
<div id="joinusLogin">
<div id="backgroundJoinus"></div>
</a>
<form id="loginForm">
<input id="loginFormFields" type="email" name="email" placeholder=" E-mail"><br />
<input id="loginFormFields" type="text" name="name" placeholder=" Password"><br />
<input id="submitLogin" type="submit" value="LOG IN">
</form>
<div id="signupNow">
Don't have an account yet? Sign up here.
</div>
</div>
</div>
</body>
</html>