Develop Reference

How to ignore click listening on child elements in jQuery?

I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.

Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>

Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>

jQuery add unique identifier to inputs and class on clone()

This code dynamically adds a unique number to the id of each item. I want to be able to add a unique identifier to certain classes and id's in every new clone() and not only to the .item itself.
In this snippet I need the function to follow the same pattern for the [data-input="checkbox0"] and the [class="radio0"].
As a bonus, I would like to have only one .add button clone() the new .items instead of having one inside of each .item.
var rowNum = 0;
$("body").on("click", ".add", function() {
rowNum++;
var $item = $(this).parents('.item');
var next = $item.clone();
next.attr('id', 'item' + rowNum);
$item.after(next);
});
.item {
border: 2px solid;
height: 50px;
width: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<label>
<input type="radio" class="radio0">
<div class="add">
<button type="button" class="addbtn">Add</button>
</div>
</div>

You might want something like this.
$("body").on("click", ".addbtn", function() {
var $item = $('.item').last();
var next = $item.clone();
// Gets last number dynamically, instead of saving it as global variable.
var rowNum = parseInt($item.attr("id").substr(4)) + 1;
next.attr('id', 'item' + rowNum).find("input[type='checkbox']").attr("data-input", "checkbox" + rowNum);
next.find("input[type='radio']").attr("class", "radio" + rowNum);
$item.after(next);
});
.item {
border: 2px solid;
height: 50px;
width: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<input type="radio" class="radio0" />
</div>
<button type="button" class="addbtn">Add</button>

You just change the html a little bit, move add button outside and use $('.item').last() to get last item for the list item
var rowNum = 0;
$("body").on("click", ".addbtn", function() {
rowNum++;
var $item = $('.item').last();
var next = $item.clone();
next.attr('id', 'item' + rowNum);
$item.after(next);
next.find('input[type="checkbox"]').attr('data-input', 'checkbox' + rowNum);
next.find('input[type="radio"]').attr('data-input', 'radio' + rowNum);
});
.item {
border: 2px solid;
height: 50px;
width: 50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" id="item0">
<label class="icon">
<input data-input="checkbox0" class="toggle" type="checkbox" name="toggle"/>
</label>
<input type="radio" class="radio0" />
</div>
<button type="button" class="addbtn">Add</button>

Simplifying/Combining if statement logic (When using Numbers)

I have been looking around, googling here and there, how to properly code a very simplistic calculator. More specifically a Boolean calculator with set values. If I've lost you, bear with me I'll try to explain.
I have the need to use checkboxes to set a input.value. This value will be picked up elsewhere in a Web-Java applet; hence the need for input.value.
To save time and confusion I have built a small snippet using JS Fiddle, and realised I have no real idea how to work with Numbers in JS. Everything I have learned so far has been self taught using the web and various other sources.
I struggle in understanding efficient ways of writing logic, but can scrape by, by writing really simplistic logic. The more I write and ask questons the more I learn. So I've come here seeking some advice on how to minimize my given code snippet.
It's not robust, It's not elegant; but it's my route in.
function calculate() {
// set the variables
var a = document.getElementById('checkboxopt');
var b = document.getElementById('checkboxopt1');
var c = document.getElementById('pnvar');
var d = document.getElementById('adjvar');
var e = document.getElementById('adjvar2');
var i = 0;
var i2 = 0;
if (a.checked) {
console.log('Arg True')
i = i + 80;
d.value = i;
} else {
console.log('Arg False')
d.value = i;
}
if (b.checked) {
console.log('Arg True')
i2 = i2 + 30;
e.value = i2
} else {
console.log('Arg False')
e.value = i2;
}
console.log(i, i2);
c.value = i + i2;
};
var cbs = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(cb) {
cb.addEventListener("click", function() {
console.log(this.id);
calculate();
});
});
calculate();
.editoropt {
font-family: Calibri, sans-serif;
width: 160px;
background: #f8f8ff;
padding: .5em;
border: solid 1px #ddd;
}
#checkboxopt {
float: left;
margin-right: 1em;
margin-top: 4px;
}
#checkboxopt1 {
float: left;
margin-right: 1em;
margin-top: 4px;
}
.pnvar {
width: 95%;
}
input:-moz-read-only {
/* For Firefox */
background-color: transparent;
border: none;
border-width: 0px;
}
input:read-only {
background-color: transparent;
border: none;
border-width: 0px;
}
<div class="seq-box-form-field editoropt ">
<label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Default 80mm </span>
<input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked />
<input type="hidden" name="opt1" id="opt1" value="true" />
</label>
</div>
<div class="seq-box-form-field editoropt ">
<label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Add 30mm </span>
<input type="checkbox" name="checkboxopt1" id="checkboxopt1" value="true" />
<input type="hidden" name="opt2" id="opt2" value="true" />
</label>
</div>
<div class="editoropt">
<input class="pnvar" id="pnvar" name="pnvar" placeholder="Null" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" class="required" type="text">
<input name="adjvar" class="pnvar" id="adjvar" readonly value="0">
<input name="adjvar" class="pnvar" id="adjvar2" readonly value="0">
</div>
</div>
My Question
What would be the best way to simplify my given code, and improve it's performance. More Specifically, is there a more simplistic way of working with numbers within JS? Or am I on the right track with my current snippet?
If you are an experienced JS developer how would you tackle the desired result above?
A little detailed guidance is what I'm hoping for.

First, try to make code as reusable as possible. So,
if (a.checked) {
console.log('Arg True')
i = i + 80;
d.value = i;
} else {
console.log('Arg False')
d.value = i;
}
if (b.checked) {
console.log('Arg True')
i2 = i2 + 30;
e.value = i2
} else {
console.log('Arg False')
e.value = i2;
}
can be replaced as
function dummy(el, val) {
i2 += el.checked ? val : 0;
}
Second, do not have inline functions in HTML. It will dirty your HTML and make debug difficult. You should wrap all listeners in a wrapper function. This will enable you to even export all of them to separate file and you will know where to look.
Third, instead of hard coding value 80 or 30 in your code, make a map or bind it to element using data-attribute
Fourth and more Important one, use better variable names. a-e or i, i1, i2 are bad names. Only you will understand your code (till you are in context). Always use precise meaningful name. This will help in long run. I have even kept function names as long as 30+ chars just to define its purpose.
Also try to break your code in smaller functions. This will increase scope for reusing them.
You can refer updated code and ask any queries, if you have.
Hope it helps!

JS: Dynamically make second input required when the first input is given value?

Basically I have a row with a couple inputs, like this:
<div class="row collapse-col input-connect" id="custom-field-1">
<div class="col small-4-10"><input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1"></div>
<div class="col small-3-10"><input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 1" name="custom_amount_1" id="custom-amount-1"></div>
<div class="col small-3-10"><select name="custom_type_1" id="custom-type-1"><option value="" selected>Options:</option><option value="optdiscount">No Discount</option></select></div>
</div>
I have a script that dynamically adds new rows, which isn't important to show, but just know that it will dynamically add rows so that "custom-field-1" becomes"custom-field-2" and on, and the same with "custom-item-2, "custom-amount-2", and the rest of the attributes that need to be updated. That's all done, that works fine.
I want the "custom-amount-X" inputs to be 'required' if someone starts entering into the "custom-item-X" inputs.
Here is what I have so far:
function formCustomFieldsAllow(e) {
e.preventDefault();
for (var i = 1; document.getElementById("custom-item-"+i); i++) {
var itemEntered = document.getElementById("custom-item-"+i).value;
if (itemEntered) {
document.getElementById("custom-amount-"+i).required = true;
} else {
document.getElementById("custom-amount-"+i).required = false;
}
}
}
document.getElementById('form-button-submit').addEventListener('change', formCustomFieldsAllow);
The idea is that the user clicks on the submit button, this will check to see if any custom-item's are filled and then see if their corrosponding custom-amount's are filled, if it doesn't find a match it will stop the form and make the appropriate custom-amount's 'required'.
My script doesn't work - any help would be appreciated?
Here is a fiddle: https://jsfiddle.net/qa8s4qc4/1/

The approach I'd suggest is the following:
// the function bound as the event-handler for the 'input' event:
function conditionallyRequired(e) {
// e is passed automatically as the first argument via the
// EventTarget.addEventListener() method.
// caching the element upon which the event was triggered:
var trigger = e.target,
// caching the element whose id is equivalent to that of the
// trigger, with the 'item' portion of the id string replaced
// with 'amount':
target = document.getElementById(trigger.id.replace('item', 'amount'));
// setting the required property of the target using an assessment to find
// if the length of the trigger element's value, with leading and trailing
// whitespace removed, is greater than zero; the strings '' and ' ' will
// evaluate to false, whereas 'a' and ' a ' will both evaluate
// to true:
target.required = trigger.value.trim().length > 0;
}
// because rows are added dynamically to the <form> we use event-delegation,
// and bind the event-handler to the ancestor <form> element, although if the
// <form> is loaded dynamically the EventTarget must be bound to the closest
// ancestor that is present in the document on page-load, or be dynamically bound
// when the <form> is added:
document.querySelector('form').addEventListener('input', conditionallyRequired);
.row {
width: 100%;
margin-bottom: 8px;
}
.row .col {
width: 45%;
display: inline-block;
margin-right: 3px;
}
input,
div {
padding: 0;
margin: 0;
}
input {
width: 100%;
}
#form-button-submit {
width: 200px;
max-width: 40%;
min-width: 20px;
}
[required] {
/* adding a style to visually indicate
a required <input> element; adjust
to taste */
border-color: red;
}
<form name="send_price" method="post" action="">
<div class="row" id="custom-field-1">
<div class="col">
<input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1">
</div>
<div class="col">
<input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 1" name="custom_amount_1" id="custom-amount-1">
</div>
</div>
<div class="row" id="custom-field-2">
<div class="col">
<input type="text" placeholder="Item 2" name="custom_item_1" id="custom-item-2">
</div>
<div class="col">
<input type="number" min="0" max="99999.99" step="0.01" placeholder="Price 2" name="custom_amount_2" id="custom-amount-2">
</div>
</div>
<input type="submit" id="form-button-submit">
</form>
JS Fiddle demo.
References:
document.getElementById().
document.querySelector().
EventTarget.addEventListener().
String.prototype.replace().
String.prototype.trim().

I believe I've figured it out, here is what I've done:
function formCustomFieldsAllow() {
for (var i = 1; !!document.getElementById("custom-item-"+i); i++) {
var itemEntered = document.getElementById("custom-item-"+i).value;
if (itemEntered) {
document.getElementById("custom-amount-"+i).required = true;
} else {
document.getElementById("custom-amount-"+i).required = false;
}
}
}
document.getElementById('form-button-submit').addEventListener('click', formCustomFieldsAllow);
I changed the eventlistener from change to click, changed the elementId in the for loop to a boolean, and got rid preventDefault.

Checkboxes not binding to tags they create on DOM jquery

I have created a modal with checkboxes that when checked, are added to the DOM. The issues that I am having that I have been trying to troubleshoot for days are that whether the checkboxes are checked or unchecked, the tag is added to the DOM, not just when checked.
I also cannot figure out how to remove the tag from the DOM when the associated checkbox is unchecked. I have the amount of checkboxes that are able to be checked max out at 6, which is what I am looking to have, but is there a way to max the amount of child divs within a parent div there could be? That way theres another safeguard to fall back on so that no more than 6 tags can be selected at one time?
Here is a jsfiddle http://jsfiddle.net/co5w7c9j/ with what I have, hopefully I explained enough without making it sound too confusing.
Below is my jquery that I have written thus far, I think I am missing a step somewhere to achieve what I am looking for.
Thank you for taking the time to look through my code.
// When specilaty is checked, add tag to profile page
$('[name=specialty]').click(function() {
$newTag = $("<div class='specTag'>" + $(this).attr('value') + "<div class='xOut'>x</div></div>");
$(this).attr('value');
$('.Specialties').append($newTag);
/* if ($('.Specialties > .specTag').has(('[name=specialty]:checked').attr('value'))) {
$('.Specialties > .specTag').has((this).txt()).remove();
} */
// Count number of checkboxes selected and display in modal
var increment = 0;
$('[name=specialty]:checked').each(function() {
if (this.checked) {
increment++;
} else {
increment--;
}
$('#specCount').html(increment);
});
// Disable checkboxes when 6 (maximum) are selected
$("input[type=checkbox][name=specialty]").click(function() {
var bol = $("input[type=checkbox][name=specialty]:checked").length >= 6;
$("input[type=checkbox][name=specialty]").not(":checked").attr("disabled", bol);
});
// Create array of checked items - add on checked - remove on uncheck
specialtyArray = $('[name=specialty]:checked').map(function() {
return $(this).val();
// if item is in the array, then remove it from the DOM
if (jQuery.inArray($('[name=specialty]:checked').val(), specialtyArray) > -1) {}
});
console.log(specialtyArray.get());
});
// When Specialties modal closes, uncheck all checked boxes, reset count
$(document.body).on('click', '.close', function() {
$('.modal-body > #updateSpecForm > .columns').children().removeAttr('checked');
$('#specCount').html(0);
})
// Fade out specialty tags when x is clicked
$(document.body).on('click', '.xOut', function() {
$(this).parent().fadeOut('slow');
$(this).parent().remove();
});

Try
// When specilaty is checked, add tag to profile page
$('input[name=specialty]').change(function() {
var value = this.value;
//if checked add a new item else remove item.
if (this.checked) {
var $newTag = $("<div class='specTag'>" + value + "<div class='xOut'>x</div></div>").attr('data-id', value);
$('.Specialties').append($newTag);
} else {
//use the attribute value which is the same as the input value to find out the item to be removed
$('.Specialties').find('div.specTag[data-id="' + value + '"]').remove()
}
//cache the result since it is used multiple times
var $checked = $('input[name=specialty]:checked');
// Count number of checkboxes selected and display in modal
var increment = $checked.length;
$('#specCount').html(increment);
// Disable checkboxes when 6 (maximum) are selected
var bol = increment.length >= 6;
//use prop instead of attr to set the disabled state
$("input[type=checkbox][name=specialty]").not(":checked").prop("disabled", bol);
// Create array of checked items - add on checked - remove on uncheck
var specialtyArray = $checked.map(function() {
return $(this).val();
});
console.log(specialtyArray.get());
});
// When Specialties modal closes, uncheck all checked boxes, reset count
$(document.body).on('click', '.close', function() {
$('.modal-body > #updateSpecForm > .columns').children().prop('checked', false);
$('#specCount').html(0);
})
// Fade out specialty tags when x is clicked
$(document.body).on('click', '.xOut', function() {
$(this).parent().fadeOut('slow', function() {
$(this).remove();
});
//uncheck the corresponding checkbox
$('input[name=specialty][value="' + $(this).closest('.specTag').attr('data-id') + '"]').prop('checked', false)
});
.Specialties {
background-color: #FFFFFF;
width: 350px;
height: 135px;
margin-left: 249px;
margin-top: 125px;
top: 0;
position: absolute;
z-index: 1;
}
.specTag {
background-color: #51b848;
color: #FFFFFF;
font-weight: 200;
letter-spacing: 1px;
font-size: 12px;
width: 150px;
height 30px;
padding: 8px;
position: relative;
margin-left: 10px;
margin-bottom: 5px;
border-radius: 5px;
display: inline-block;
}
.xOut {
background-color: #FFFFFF;
width: 25px;
padding: 3px;
position: absolute;
right: 5px;
text-align: center;
color: #333333;
top: 5px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="GET" id="updateSpecForm">
<!-- ATHLETIC TRAINER OPTIONS -->
<div class="columns" id="athleticTrainer">
<input type="checkbox" name="specialty" value="Boot Camp" />Boot Camp
<br />
<input type="checkbox" name="specialty" value="Children's Fitness" />Children's Fitness
<br />
<input type="checkbox" name="specialty" value="Circuit Training" />Circuit Training
<br />
<input type="checkbox" name="specialty" value="Core Training" />Core Training
<br />
<input type="checkbox" name="specialty" value="Cycling/Spinning" />Cycling/Spinning
<br />
<input type="checkbox" name="specialty" value="Dance" />Dance
<br />
<input type="checkbox" name="specialty" value="Flexibility/Balance" />Flexibility/Balance
<br />
<input type="checkbox" name="specialty" value="Meal Planning" />Meal Planning
<br />
<input type="checkbox" name="specialty" value="Men's Fitness" />Men's Fitness
<br />
<input type="checkbox" name="specialty" value="Women's Fitness" />Women's Fitness
<br />
</div>
<div class="Specialties">
<!-- SHOW BELOW DIV ONLY IF LOGGED IN -->
<!-- <div class="updateOn">+ Update My Specialties</div> -->
<!-- ***PRO CAN ADD UP TO 6 SPECIALY TAGS*** -->
</div>
</form>

Sometimes it's easier to compartmentalize code by setting parts of it into functions so that conditional aspects are easier to read through .
The biggest issue in your code was not testing if checkboxes were checked or not in the click handler.
Since the checkbox needs to do the same as the click on new tag does when it is unchecked, all logic flows through the change event of checkbox. Note that the click handler on X of tag triggers the change also
var maxChecked = 6;
// use change handler on checkboxes, will get triggered also below in another click handler
var $checkboxes = $('[name=specialty]').change(function() {
var value = $(this).val();
if(this.checked ){
addTag( value);
}else{
removeTag( value );
}
checkBoxStatus();
});
function removeTag(checkBoxValue){
/* we stored the checkbox value as data attribute, use that to filter*/
$('.specTag').filter(function(){
return $(this).data('value') === checkBoxValue;
}).slideUp(function(){
$(this).remove();
})
}
function addTag( checkBoxValue){
$newTag = $("<div class='specTag'>" + checkBoxValue + "<div class='xOut'>x</div></div>");
/* store the value in elment data so we can reference back to checkbox */
$newTag.data('value', checkBoxValue);
$('.Specialties').append($newTag);
}
/* use this to both disable and enable checkboxes */
function checkBoxStatus(){
var limitReached = $checkboxes.filter(':checked').length === maxChecked;
$checkboxes.not(':checked').prop('disabled',limitReached);
}
$(document.body).on('click', '.xOut', function () {
var $element = $(this).parent(),
$checkbox = $checkboxes.filter(function(){
return this.value === $element.data('value');
/* trigger change to remove element and reset disabled checkboxes */
}).prop('checked',false).change();
});
DEMO

Working fiddle:
http://jsfiddle.net/co5w7c9j/1/
// When specilaty is checked, add tag to profile page
$('[name=specialty]').click(function() {
$newTag = $("<div class='specTag'>" + $(this).attr('value') + "<div class='xOut'>x</div></div>");
$(this).attr('value');
$('.Specialties').append($newTag);
EnableDisableCheck();
// Create array of checked items - add on checked - remove on uncheck
specialtyArray = $('[name=specialty]:checked').map(function(){
return $(this).val();
// if item is in the array, then remove it from the DOM
if (jQuery.inArray($('[name=specialty]:checked').val(), specialtyArray) > -1) {
}
});
console.log(specialtyArray.get());
});
// When Specialties modal closes, uncheck all checked boxes, reset count
$(document.body).on('click', '.close', function () {
$('.modal-body > #updateSpecForm > .columns').children().removeAttr('checked');
$('#specCount').html(0);
})
// Fade out specialty tags when x is clicked
$(document.body).on('click', '.xOut', function () {
$(this).parent().fadeOut('slow');
$(this).parent().remove();
var text = $(this).parent().text();
$('[name=specialty]:checked').filter(function () {
return text.indexOf($(this).val()) > - 1;
}).removeAttr('checked');
EnableDisableCheck();
});
function EnableDisableCheck(){
if($('[name=specialty]:checked').length >=5)
{
$('[name=specialty]').attr("disabled","disabled");
}
else
{
$('[name=specialty]').removeAttr("disabled");
}
}