I want to close the login-content div when I clicked outside the div I tried event but it ain't working
I have this html code
<nav class="login">
<ul>
<li id="login">
<a id="login-trigger" href="#">
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="text" name="uname"
placeholder="University ID" required>
<input id="password" type="password" name="Password"
placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed
in</label>
</fieldset>
</form>
</div>
</li>
</ul>
this js file script.js
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
You can use the blur event on #login-trigger - for that to work note that you have to add tabindex attribute to the #login-trigger element.
$('#login-trigger').blur(function() {
if ($(this).hasClass('active'))
$(this).trigger('click');
});
If the login-content is active this will trigger the click event and hide the div.
See demo below:
$(document).ready(function() {
$('#login-trigger').click(function() {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
$('#login-trigger').blur(function() {
if ($(this).hasClass('active'))
$(this).trigger('click');
});
});
#login-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="login">
<ul>
<li id="login">
<a id="login-trigger" href="#" tabindex='-1'>
Log in <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="text" name="uname" placeholder="University ID" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed
in</label>
</fieldset>
</form>
</div>
</li>
</ul>
In cases like these, I would add the mouseEventHandler to the body. Here are the utility functions I keep around.
function _wasElemClicked(element, e: MouseEvent) {
let { clientX: x, clientY: y } = e;
let { height, width, top, left } = _getDimensions(element);
if ((x > left && x < left + width) &&
(y > top && y < top + height)) {
return true;
}
return false;
}
function _getDimensions(elem) {
let { height, width, top, left } = elem.getBoundingClientRect();
return { height, width, top, left }
}
With that I would add the following body-click handler:
const bodyClick = e => {
if(!_wasElemClicked(targetElem, e) {
// close modal/dialog/popup
...
// cleanup event listener
document.body.removeEventHandler('click', bodyClick);
}
}
document.body.addEventHandler('click', bodyClick);
your html code is fine , need to change js,
$(document).ready(function(){
$('#login-trigger').click(function(event){
event.stopPropagation();
$("#login-content").slideToggle();
});
$("#login-content").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
working fiddle link here,
http://jsfiddle.net/evGd6/2/
Related
I am having some trouble with my checkboxes. I am trying to get a returned true or false value out of event listeners on checkboxes and then passing it through an event listener on a button to confirm that at least one checkbox is selected. I'm sorry if this sounds confusing and I feel like there is an easier way to do this. I would like to solve this with pure JavaScript. Really appreciate the help. Below is the code.
<body>
<script src="racquetObjects.js"></script>
<div class="mainContainer">
<div class="selectors">
<form action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button type="button" id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
<script src="racquetFinderCB.js"></script>
<script src="racquetFinder.js"></script>
</body>
const findButton = document.querySelector("#find");
const checkboxes = document.querySelectorAll(
".checkboxes input[type=checkbox]"
);
const checkboxesAreChecked = checkboxes.forEach((el) => {
el.addEventListener("click", (e) => {
if (e.target.checked) {
return true;
} else {
return false;
}
});
});
const beforeSubmit = () => {
if (checkboxesAreChecked === true) {
console.log("Time to search!");
} else {`enter code here`
console.log("You need to select an option");
}
};
In this example there is an event listener for the form submit. An array of the input elements is filtered, so only the checked will end up in checked.
The first e.preventDefault() is just for testing. If the form should submit (something was checked) then remove that line of code.
document.forms.find.addEventListener('submit', e => {
let inputs = e.target.querySelectorAll('input');
e.preventDefault(); // prevent default to test what happens
let checked = [...inputs].filter(input => input.checked);
if (checked.length > 0) {
console.log('at least one was checked');
} else {
e.preventDefault(); // prevent default to stop the form action
console.log('none was checked');
}
});
<div class="mainContainer">
<div class="selectors">
<form name="find" action="">
<div class="checkboxes">
<input type="checkbox" id="babolat" value="Babolat" />
<label for="babolat">Babolat</label>
<input type="checkbox" id="wilson" value="Wilson" />
<label for="wilson">Wilson</label>
<input type="checkbox" id="power" value="Power" />
<label for="power">Power</label>
<input type="checkbox" id="control" value="Control" />
<label for="control">Control</label>
<input type="checkbox" id="popular" value="Popular" />
<label for="popular">Popular</label>
</div>
<button id="find">Find</button>
</form>
</div>
<div class="racquetContainer"></div>
<div class="bench"></div>
</div>
I'm trying to create an interactive resume template using javascript and html and have managed to use cloneNode to duplicate work history blocks (see attached screenshot)
The problem(s) I am having is that clicking on the add list item button in the cloned/duplicated work history block at the bottom, creates a <li> item in the 1st/cloned element.
The objective is to be able to add or delete ````` list elements within a specific work history block and to also be able to add/remove entire work history sections. Currently it deletes from the top down, which is also an issue.
Thanks for any pointers in advance.
CODE
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea id="task" name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask()">Add List Item</button>
<button onclick="RemoveTask()">Delete List Item</button>
</ul>
<button onclick="addWork()">Add Work</button>
<button onclick="removeWork()">Remove Work</button>
</div>
</div>
</div>
<script>
function addWork() {
var div = document.getElementById("node");
var cln = div.cloneNode(true);
//cln.setAttribute( 'id', 'newId');
document.getElementById("test").appendChild(cln);
}
function removeWork(){
var last = document.getElementById("test");
// want to delete the last added work history not first
last.removeChild(last.childNodes[0]);
}
function addTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var li = document.createElement("li");
li.setAttribute('id',task.value);
li.appendChild(document.createTextNode(task.value));
ul.appendChild(li);
}
function removeTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var item = document.getElementById(task.value);
ul.removeChild(item);
}
</script>
</body>
</html>
You'd have to use e.currentTarget instead of document.getElementById, otherwise you're only referring to the first instance of it:
function addWork(e) {
const div = e.currentTarget.parentElement;
const cln = div.cloneNode(true);
document.getElementById("test").appendChild(cln);
}
function removeWork(e) {
const last = e.currentTarget.parentElement;
last.parentElement.removeChild(last);
}
function addTask(e) {
const ul = e.currentTarget.parentNode;
let task = ul.children[0].childNodes[1].value;
let li = document.createElement("li");
// Replace paragraph breaks
task = task.replace(/\r?\n|\r/g, " ");
li.innerText = task;
ul.appendChild(li);
}
function removeTask(e) {
const ul = e.currentTarget.parentNode;
ul.removeChild(ul.lastChild);
}
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask(event)">Add List Item</button>
<button onclick="removeTask(event)">Delete List Item</button>
</ul>
<button onclick="addWork(event)">Add Work</button>
<button onclick="removeWork(event)">Remove Work</button>
</div>
</div>
</div>
</body>
</html>
This allows you to refer to the specific element where the click event occurred and add/remove any elements that are relative within the DOM.
As a side note, it's best practice to have unique id attributes, adding the same id to multiple elements goes against that.
var add_button = $(".add_form_field");
var wrapper = $(".container1");
var max_fields = 9;
var x = 1;
$(add_button).click(function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(
` <div class="email">
<label for="">Year</label>
<input type="text" name="eduYear${x}">
<label for="">Title Name</label>
<input type="text" name="eduTitle${x}">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace${x}">
<label for="">Details</label>
<input type="text" name="eduNotes${x}"> <br>Delete<hr></div>`
); //add input box
}
});
$(wrapper).on("click", ".delete", function (e) {
e.preventDefault();
$(this).parent("div").remove();
x--;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<h2>Educations</h2>
<button type="button" class="add_form_field">Add Education
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div class="email">
<label for="">Year</label>
<input type="number" name="eduYear1">
<label for="">Title Name</label>
<input type="text" name="eduTitle1">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace1">
<label for="">Details</label>
<input type="text" name="eduNotes1">
</div>
you can try this to create dynamic form
I have this sample:
link
CODE HTML:
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
CODE JS:
function sendForm() {
var status_form = false;
$(".add-patient input").each(function(){
if($(this).val() == ""){
status_form = true;
}
});
console.log(status_form);
var createdBy = jQuery('#created_by').val();
if( status_form )
{
alert('Fill at least one field');
}else{
alert("now it's ok");
}
}
I want to do a check ... if an input is complete when displaying the message "it; s ok" ... otherwise displaying another message
probably means the code clearly what they want to do.
You can help me with a solution please?
Thanks in advance!
Use .filter to get the length of the input elements having value as ''
Try this:
function sendForm() {
var elem = $(".add-patient input[type='text']");
var count = elem.filter(function() {
return !$(this).val();
}).length;
if (count == elem.length) {
alert('Fill at least one field');
} else {
alert("now it's ok");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="add-patient">
<fieldset style="display: block;">
<label for="new_exam">New exam</label>
<input type="text" name="new_exam" id="new_exam" value="">
</fieldset>
<fieldset style="display: block;">
<label for="x_ray">X ray</label>
<input type="text" name="x_ray" id="x_ray" value="">
</fieldset>
<input type="button" class="btn btn-submit" onclick="sendForm();" value="Create report">
</form>
I'm working on a multi stage form with the following enabling the next/previous button to transit the form submission from one stage to the other:
$("input[name='next']").click(function(){
var output = validate();
if(output) {
var current = $("#signup-step.active");
var next = current .next(); //Just use .next() here to get the nextSibling of this li
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("input[name='back']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
next.addClass("active");
/* if($(".active").attr("id") == $("#signup-step.li").last().attr("id")) {
$("input[name='next']").hide();
$("input[name='finish']").show();
} */
if ( next.is(':last-child') ) {
$("input[name='next']").hide();
$("input[name='finish']").show();
}
}
}
});
$("input[name='back']").click(function(){
var current = $(".active");
var prev = $(".active").prev("#signup-step.li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("input[name='next']").show();
$("input[name='finish']").hide();
$(".active").removeClass("active");
prev.addClass("active");
/*if($(".active").attr("id") == $("#signup-step.li").first().attr("id")) {
$("input[name='back']").hide();
}
*/
if ( next.is(':last-child') ) {
$("input[name='back']").hide();
}
}
});
By #signup-step:li I'm trying to refer to the li elements in a specific UL element because there two other UL element on the page: 1) UL of main menu, 2) UL of sidebars. Now since the main menu's UL comes before the form itself, the next/back button activate the menu items of the main menu rather the form stages. So being able to specify the UL referred will resolve this.
Kindly advise on the the correct for mat for selecting #signup-step:li in the code above?
Here is the form:
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
<form name="frmRegistration" id="signup-form" method="post" enctype="multipart/form-data" action="sendemail.php">
<div id="initiate-field">
<label>Name of Organization</label><span id="coyname-error" class="signup-error"></span>
<div><input type="text" name="coyname" id="coyname" class="demoInputBox"/></div>
<label>Certificate of Incorporation No.</label><span id="cacnum-error" class="signup-error"></span>
<div><input type="text" name="cacnum" id="cacnum" class="demoInputBox"/></div>
<label>Registered Office Address</label><span id="regofficeaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="regofficeaddy" id="regofficeaddy" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Operations Address</label><span id="opsaddy-error" class="signup-error"></span>
<div>
<textarea cols="30" rows="4" name="opsaddy" id="opsaddy" class="demoInputBox" class = "max10"></textarea>
</div>
</div>
<div id="strive-field" style="display:none;">
<label>Location of workshop/facility if different from office address given in the Structure Section:</label><span id="facilityloc-error" class="signup-error"></span>
<div>
<textarea cols="60" rows="8" name="facilityloc" id="facilityloc" class="demoInputBox" class = "max10"></textarea>
</div>
<label>Size of facility (in sq meters):</label><span id="facilitysize-error" class="signup-error"></span>
<div><input type="text" name="facilitysize" id="facilitysize" class="demoInputBox"/></div>
<label>Does your organization own or hire equipment:</label>
<div>
<input type="radio" name="facilityownhire" id="facilityownhire" value="Own"> Own
<input type="radio" name="facilityownhire" id="facilityownhire" value="Hire"> Hire <span id="facilityownhire-error" class="signup-error"></span>
</div>
</div>
<div id="end-field" style="display:none;">
<label>Does your Organization have an HSE Manual?</label>
<div>
<input type="radio" name="hsemanual" id="hsemanual" value="Yes"> Yes
<input type="radio" name="hsemanual" id="hsemanual" value="No"> No <span id="hsemanual-error" class="signup-error"></span>
</div>
<div id="hseevidenceBOX">
<label>If yes, please attach evidence</label><span id="hseevidence-error" class="signup-error"></span>
<div>
<input type="file" name="vendorfile[]" id="hseevidence" class="demoInputBox" />
</div>
</div>
<label>Does your Organization have a Safety Policy?</label>
<div>
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="Yes"> Yes
<input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="No"> No <span id="orgsafepolicy-error" class="signup-error"></span>
</div>
</div>
<div>
<input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
<input class="btnAction" type="button" name="next" id="next" value="Next">
<input class="btnAction" type="submit" name="finish" id="finish" value="Send" style="display:none;">
</div>
</form>
Thanks everyone for responding. I solve the problem of conflict with the main menu of the page I change the .active class to .here in the UL HTML, CSS and jquery script. I also reliazed from this fiddle http://jsfiddle.net/GrahamWalters/sgNH4/2/ i gained from another thread that the next("#signup-step.li"); should be next("#signup-step li");
UL HTML
<ul id="signup-step">
<li id="Initiate" class="active">Initiate</li>
<li id="Strive">Strive</li>
<li id="End">End</li>
</ul>
CSS
#signup-step li.here{background-color:#FF0000;}
.here{color:#FFF;}
JQUERY
$("#next").click(function(){
var output = validate();
if(output) {
var current = $(".here");
var next = $(".here").next("#signup-step li");
if(next.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+next.attr("id")+"-field").show();
$("#back").show();
$("#finish").hide();
$(".here").removeClass("here");
next.addClass("here");
if($(".here").attr("id") == $("#signup-step li").last().attr("id")) {
$("#next").hide();
$("#finish").show();
}
}
}
});
$("#back").click(function(){
var current = $(".here");
var prev = $(".here").prev("#signup-step li");
if(prev.length>0) {
$("#"+current.attr("id")+"-field").hide();
$("#"+prev.attr("id")+"-field").show();
$("#next").show();
$("#finish").hide();
$(".here").removeClass("here");
prev.addClass("active");
if($(".here").attr("id") == $("li").first().attr("id")) {
$("#back").hide();
}
}
});
Disclaimer: I know there are quite a few questions out there with this topic and it has been highly addressed, though I need assistance in my particular case.
I am trying to check if the input values are empty on keyup then disable the submit button.
My HTML snippet:
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" />
</div>
</form>
</div>
I have used the example answer from here with some modifications:
(function() {
$('.field input').keyup(function() {
var empty = false;
$('.field input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('.actions input').attr('disabled', true);
} else {
$('.actions input').attr('disabled', false);
}
});
})()
Any help would be greatly appreciated!
I would suggest disabling the button by default. I would also look at the length of the .val(), not check for an empty string. Lastly, I think document.ready() is much more readable than your existing code: Here is the full code:
HTML
<div class='form'>
<form>
<div class='field'>
<label for="username">Username</label>
<input id="username" type="text" />
</div>
<div class='field'>
<label for="password">Password</label>
<input id="password" type="password" />
</div>
<div class='actions'>
<input type="submit" value="Login" disabled="disabled" />
</div>
</form>
</div>
JS/jQuery
$(document).ready(function() {
$('.field input').on('keyup', function() {
let empty = false;
$('.field input').each(function() {
empty = $(this).val().length == 0;
});
if (empty)
$('.actions input').attr('disabled', 'disabled');
else
$('.actions input').attr('disabled', false);
});
});
Here's a working fiddle.
I use this in my project and it succes.
$(document).ready(function() {
$('.field').keyup(function() {
var empty = false;
$('.field').each(function() {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('.actions[type="submit"]').attr('disabled', 'disabled');
} else {
$('.actions[type="submit"]').removeAttr('disabled');
}
});
});