I have created a simple popup form which closes when a click event occurs outside the form; however, clicking on any of the forms children elements also closes the popup. Do I need to add the label and input elements to the 'if' statement in the JS function?
HTML
<button id="contactButton" onclick="show()">Contact</button>
<div id="main">
<div id="formDiv">
<form action="" id="form" method="POST">
<label id="name">Name:</label>
<input type="text" name="name"><br>
<label>Email:</label>
<input type="text" name="name"> <br>
<input type="submit" value="Submit">
</form>
</div>
</div>
JS
function show() {
var mainDiv = document.getElementById("main");
mainDiv.style.display= "block";
mainDiv.addEventListener("click", hide);
}
function hide(e) {
let targetElement = e.target;
if(targetElement == document.getElementById("form")) {
console.log("inside");
return;
} else {
document.getElementById("main").style.display="none";
console.log("outside");
}
}
Do I need to add the label and input elements to the 'if' statement in the JS function?
Yes, but the general implementation of a solution would be to get the target and then recursively check it's parentNodes until you found document.getElementById("form")) or ran out of parents.
Try this;
function hide(e) {
if (e.closest('#form')) {
console.log("inside");
return;
} else {
document.getElementById("main").style.display="none";
console.log("outside");
}
}
Related
I have two forms (consist with input,textarea,checkbox) in a page. I want check emptiness of these forms separately on click seperate button.
I use the following script. But it shows empty message if any of these form input is empty.
$('#submit').click(function(e) {
var empty = false;
$('input, textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
alert("empty");
e.preventDefault();
}
else {
document.getElementById("contact").submit();
}
})()
Never assign stuff to submit buttons
Do not submit a form from a submit button if you have chosen to use preventDefault if something wrong. It could submit the form twice
$(function() {
// on the submit event NOT the button click
$('form').on("submit", function(e) { // any form - use .formClass if necessary to specific forms
var empty = false;
$("input, textarea", this).each(function() { // this form's inputs incl submit
if ($.trim($(this).val()) == "") { // trim it too
console.log(this.name,"empty")
empty = true;
return false; // no need to continue
}
});
if (empty) {
alert(this.id + " is empty"); // or set a class on the div
e.preventDefault(); // cancel submission
}
});
});
div {
border: 1px solid black;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1">
<div>
<input type="text" value="" name="field1" /><br/>
<textarea name="field2"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
<hr/>
<form id="form2">
<div>
<input type="text" value="" name="field3" /><br/>
<textarea name="field4"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
You could also add required to the fields
You need to restrain the handler to the form containing the clicked button:
$('#submit').click(function(e) {
var form = $(this).parents('form:first');
var empty = false;
$('input, textarea', form).each(function() {
// the rest is the same
I'd also like to point out that you cannot have the same ID on multiple controls, so
$('#submit')
should always return exactly one button. You should do something like this, where you distinguish the buttons by class instead:
<input type="submit" id="submitA" class="submitButton">
<input type="submit" id="submitB" class="submitButton">
and select with
$('.submitButton')
you know you can also use jquery to reset the form like so
form.resetForm();
I have a webpage with an input box and a button. If a user inputs some values (12345) an object need to appear below or instead of that form (the input box and the button).
I am handling a value check through and my whole code looks like this:
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc() {
if (document.getElementById("subject").value == 12345) {
document.write(
"<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>"
);
}
}
</script>
Currently this code is showing a object in a new window (only a object on the page).
Also this is offtopic but if you can help, how can I handle if enter is pressed to activate function proveriKljuc()?
Don't use document.write. If you want to replace the current form:
<div id="wrapper">
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>
If you want your object to appear under the form:
<div id="wrapper">
<form name="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
</form>
</div>
<button onclick="proveriKljuc()" style="margin-top:20px">Potvrdi!</button>
<script>
function proveriKljuc()
{
if(document.getElementById("subject").value == 12345)
{
document.getElementById("wrapper").innerHTML += "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
}
</script>
You can NEVER use document.write after page load. It will wipe the page. Instead have div or a span and fill the innerHTML of it or appendChild of a div created using document.createElement. return false onsubmit to stop submission or make the button type="button" - alternatively show a hidden div How to show hidden div after hitting submit button in form?
I cannot show a working example because stacksnippets do not support submit
window.onload = function() {
document.getElementById("form").onsubmit = function() {
if (this.elements["subject"].value == 12345) {
document.getElementById("objContainer").innerHTML = "<center><object id='object1' data='http://termodom.rs/wp-content/uploads/2016/12/akcija1-1.jpg'></object></center>";
}
return false; // ignore submit
}
}
<form id="form" action="" method="post">
<input type="text" name="subject" id="subject" placeholder="UNESI KOD">
<button type="submit" style="margin-top:20px">Potvrdi!</button>
</form>
<div id="objContainer"></div>
I have to show login and register as a slidedown/popup. Following code works for one popup but breaks when i try to add popup for register also. It show both popup
<div class="register-popup">
<a class="button-register" href="#" >Register</a>
<div class="popup-register">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
<div class="login-popup">
<a class="button-login" href="#" >Login</a>
<div class="popup-login">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
I am looking for following functionality
One popup should open at a time and other should close automatically
Popup should open & close when one click on the individual links
Fiddle example http://fiddle.jshell.net/rvepks5q/1/
I tried for sometime, i am doing something wrong.
You may also want to try this
$(document).ready(function(){
$(".button-register").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login, .overlay-register").hide();
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register").slideUp("slow");
}
});
$(".button-login").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register, .overlay-register").hide();
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login").slideUp("slow");
}
});
});
Try this fiddle
Change document.body to element you want to click on.
http://fiddle.jshell.net/rvepks5q/3/
You can also close opened popup if you open another one.
http://fiddle.jshell.net/rvepks5q/5/
Attach click handlers to individual links instead
$(".button-login").click(function () {
if ($(".popup-login").is(":hidden")) {
$(".popup-login").slideDown("slow");
} else {
$(".popup-login, .overlay-login").hide();
}
});
$(".button-register").click(function () {
if ($(".popup-register").is(":hidden")) {
$(".popup-register").slideDown("slow");
} else {
$(".popup-register, .overlay-register").hide();
}
});
example
js
$(".button-login").on("click", function(){
if(!$(".popup-login").hasClass("opened")){
$(".popup-login").show();
$(".popup-login").addClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}else {
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}
});
$(".button-register").on("click", function(){
if(!$(".popup-register").hasClass("opened")){
$(".popup-register").show();
$(".popup-register").addClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}else {
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}
});
You are assigning two click handlers, but both listen to a click on the body.If you want your code to work you have to either assign your listeners to the elements or use event bubbling to see where the click is coming from.
That way you don't have to put unnecessary event-handlers on your dom.
var $body = $(document.body);
var $loginButton = $body.find('.button-login')[0];
var $registerButton = $body.find('.button-register')[0];
var $loginPopup = $body.find('.popup-login');
var $registerPopup = $body.find('.popup-register');
$(document.body).click(function (e) {
if(e.target === $loginButton) {
$registerPopup.hide();
$loginPopup.toggle();
}
if(e.target === $registerButton) {
$loginPopup.hide();
$registerPopup.toggle();
}
});
http://fiddle.jshell.net/rvepks5q/11/
I have a form that I want to validate using JQuery.
When the user leaves the form field without entering anything the class of that input changes to show an error by becoming red.
I have created a jsfiddle file
http://jsfiddle.net/mTCvk/
The problem I am having is that the it will only work on the first text input and the other text inputs will adjust according to the state of the first input.
The JQuery
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Here is the HTML for the form
<form method="post" action="">
<div class="text-input">
<img src="images/name.png">
<input type="text" name="name" placeholder="*Name:">
</div>
<div class="text-input">
<img src="images/mail.png">
<input type="text" name="email" placeholder="*Email:">
</div>
<div class="text-input">
<img src="images/pencil.png">
<input type="text" name="subject" placeholder="*Subject:">
</div>
<div class="text-input">
<img src="images/phone.png">
<input type="text" name="phone" placeholder="Phone Number:">
</div>
<textarea name="message" placeholder="*Message:"></textarea>
<input type="submit" value="Send" class="submit">
It's a DOM issue. It needs to check the :text child for that specific element
$(document).ready(function(){
$('.text-input').focusout(function () {
if ($(this).find(":text").val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
});
Updated Fiddle http://jsfiddle.net/mTCvk/2/
It's easy, you have selected the first input type text found : $(":text").val().. You must select the input type type on the .text-input blured :
$(":text", $(this)).val()... // First :text, on $(this) parent
http://jsfiddle.net/mTCvk/1/
PS : for your class management, don't delete .text-input juste add and remove an other class .text-input-error when you have an error
You can use this:
$(":text").focusout(function () {
if ($(this).val().length == 0) {
$(this).parent().removeClass("text-input").addClass("text-input-error");
} else {
$(this).parent().removeClass("text-input-error").addClass("text-input");
}
});
Use following code....
$('.text-input, .text-input-error').focusout(function () {
if ($(this).find(':text').val().length == 0) {
$(this).removeClass("text-input").addClass("text-input-error");
} else {
$(this).removeClass("text-input-error").addClass("text-input");
}
});
I changed your code to use the .on method, and gave it the event blur. Then we create a variable for the closest text-input class (which would be its parent text-input div). Rather than checking the .length, we just check to see if it is an empty string. You would also need to wrap your textarea in the save text-input div for this to work properly.
http://jsfiddle.net/43e2Q/
$('input, textarea').on('blur', function () {
var $closestParent = $(this).parent();
if ($(this).val() == '') {
$closestParent.removeClass("text-input").addClass("text-input-error");
console.log('error');
} else {
$closestParent.removeClass("text-input-error").addClass("text-input");
console.log('valid');
}
});
I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...
<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>
My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.
You can use the onClick event to do that:
Working Example
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
Inline javascript is considered bad practice
ie. onClick=""
Use something like this instead
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
on jsfiddle
Here is the code suggested by David Thomas in the comments. It performs exactly the same task, but uses shorthand if-else for the toggle function and doesn't provide you with separate show and hide functions.
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" : "hidden";
}
toggle();
button.addEventListener("click", toggle, false);
on jsfiddle
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>
you can change effect like as toggle, fadeToggle in place of show...