Hide pop-up when click somewhere - javascript

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>

Related

Can't switch login and register form in laravel

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();
});
});

Check if box in form has information or not

I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">

jquery toggle between login and registration in same page

I have two form login and registration, by default show login form. There has a link "Don't have account?" I want to create when click on link then registration form will show and login form will hide.
HTML Code:
<div class="login_form">
<div id="form">
<h2>Login Here </h2>
<form method="post" action="login.php" >
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="login_username" id="login_username" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="login_password" id="login_password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="login" id="login" class="btn btn-success" />
</div><!--end form_elements-->
<br />
Don't have a account?
</form>
</div>
</div>
<div class="clear_both"></div>
<div class="register_form">
<div id="form">
<h2>Register Here </h2>
<form method="post" action="login.php" name="">
<div class="form_elements">
<label for="username">username</label>
<input type="text" name="username" id="usename" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Email</label>
<input type="text" name="email" id="email" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">Password</label>
<input type="password" name="password" id="password" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<label for="username">RePassword</label>
<input type="password" name="repassword" id="repassword" value="" />
</div><!--end form_elements-->
<div class="form_elements">
<input type="submit" name="register" id="register" class="btn btn-success" />
</div><!--end form_elements-->
</form>
</div><!-- div form-->
jQuery Code:
$(function(){
('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});
Please guide me to solve this difficulty.
Use as , $ is missing in show_register
$(function(){
$('#show_register').click(function(){
$('.login_form').hide();
$('.register_form').show();
return false;
});
});

TinyBox how get passing value from parent pages

Recently I have faced a problem which do not know how to pass value from parent page to a tinybox. The following is my source code; is there any idea can help me to achieve this? A edit.php wrap inside a tinybox so when I click on a specific column suppose the value should pass to the edit.php (tinybox) and also the value will display on the textfield, but it just simply doesn't work. I am new in PHP would appreciate for some one pointing me to good solution.
parent page.php
display_cell6.appendChild(edit).innerHTML='<img id="edit" alt="Edit" class="'+obj[idx].id+'" onclick="TINY.box.show({iframe:\'ajaxEditUserDetail.php\',boxid:\'frameless\',width:400,height:280,openjs:function(){openJS(this.id)}}); title="Edit" src="images/edit.png"></img>';
function openJS(id){
var id=parent.document.getElementById(id);
alert(id);
}
edit.php
<div id="banner">
<span>Edit Customer Information</span>
</div>
<div id="form_container">
<fieldset>
<div class="box-form">
<form action="send.php" method="POST" id="userDetail" >
<fieldset>
<div>
<label for="name_Req">Name <strong>*</strong></label>
<input type="text" id="name_Req" name="name" value="test"
title="Required! Please enter your name" />
</div>
<div>
<label for="contact_Req_Email">E-mail <strong>*</strong></label>
<input type="text" id="contact_Req_Email" name="email"
title="Required! Please enter a valid email address" />
</div>
<div>
<label for="telephone_Tel">Telephone</label>
<input type="text" id="telephone_Tel" name="telephone"
title="Please enter a valid telephone number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address" name="address" title="Please enter a
valid address" />
</div>
<div>
<input type="submit" value="Save" id="sub" class="button" />
</div>
</fieldset>
</form>
</div>
</fieldset>
</div>

Make CSS popup dissapeer when blanket is clicked (Example: Facebook Photo's)

i have a css popup div that when it loads through the onClick it also brings up a blanket of transparency kind of like how Facebook does when you look at photos
How do i get that popup div to close when i click on the blanket?
Heres the code
'
<center><div id="blanket" style="display:none;">
</div>
<table width="1000" border="0">
<tr>
<td>
<div id="mainAdminCP">
<div class="editRecipe" >
<h2>Edit Recipe</h2>
</div>
<div id="popUpAdminEditRecipe" style="display:none;" align="center">
<br />
<br />
<form id="editRecipe">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the name of the recipe" autofocus required>
<br />
<br />
<input id="add" type="text" placeholder="Recipe Name" required>
<input id="add" type="text" placeholder="Recipe Ingredients" required>
<input id="add" type="text" placeholder="Recipe Instructions" required>
<input id="add" type="text" placeholder="Recipe Image" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Save Changes">
<input type="submit" id="submit" onClick="popup('popUpAdminEditRecipe')" value="Close">
</fieldset>
</form>
</div>
<div class="editCoins">
<h2>Edit Coins</h2>
</div>
<div id="popUpAdminEditCoins" style="display:none;" align="center">
<br />
<br />
<form id="login">
<fieldset id="inputs">
<input id="username" type="text" placeholder="Please insert the Username of the User" autofocus required>
<input id="add" type="text" placeholder="Add Coins" required>
<input id="add" type="text" placeholder="Subtract Coins" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Submit">
<input type="submit" id="submit" onClick="popup('popUpAdminEditCoins')" value="Close">
</fieldset>
'
And heres the link to the page itself to get a clear example of what im looking for.
http://teknologenie.com/fruitforest/admincp.php
Ive tried placing the
<a href="#" onClick="popup('popUpAdminEditUser')" > </a>
Within the blanket div, and nothing. Just kind of screws everything up.
Edit:
Also if you visit the link, and click the text, the whole div doesnt get directly in the middle of the screen and i need it to be. Any solutions?
Instead of putting an link inside the blanket div, pup an onclick function on the blanket div itself:
<div id="blanket" onclick="closePopup()" style="height: 681px; display: block;"></div>
The function closePopup should then set display none to the popup and the blanket:
function closePopup() {
document.getElementById('blanket').style.display = 'none';
document.getElementById('popUpAdminEditCoins').style.display = 'none';
}
I've written you an example here: http://jsfiddle.net/KXK6E/2/
You'd be much better off binding events within the javascript rather than within the HTML.
document.getElementById("blanket").onclick = function(e){
document.getElementById("popup").style.display = "none";
e.target.style.display = "none";
};
document.getElementById("trigger").onclick = function(){
document.getElementById("blanket").style.display = "block";
document.getElementById("popup").style.display = "block";
}
​

Categories

Resources