Refer to my jsfiddle , my jquery only work for the first "X" i click but not the second or third ?
2) how do i disable it when it only left one input ?
Demo
<div class="main-form">
<fieldset id="ingt">
<legend></legend>
<div class="formheader">
<label style="width:170px;"></label>
<label></label>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][0][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][0][ingredient]" />
<span id="remove">X</span>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][1][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][1][ingredient]" />
<span id="remove">X</span>
</div>
<div class="formrow">
<span class="drag"></span>
<input type="text" max-length="30" name="recipe[ingredient][2][amount]" />
<input type="text" id="ingredient" size="60px" name="recipe[ingredient][2][ingredient]" />
<span id="remove">X</span>
</div>
<div id="add"></div>
<button id="addi" type="button" onclick="add_field()">Add </button>
</fieldset>
</div>
$(function () {
$("#remove").click(function () {
$(this).parent().remove();
});
});
ID of an element must be unique, use class instead
<span class="remove">X</span>
then
$(function () {
$(".remove").click(function () {
$(this).parent().remove();
});
});
The ID selector will return only the first element with the said element so your selector $("#remove") will return the first element with the the id remove so the click handler will get added to only that element
Also since you have an add button I'm assuming you will be adding dynamic elements, so use event delegation to handle the new elements
$(function () {
//if you want to make the last item in the list(in terms of position) to non removable
$(".main-form").on('click', '.remove:not(:last)', function () {
$(this).parent().remove();
});
});
Demo: Fiddle
or
$(function () {
$(".main-form").on('click', '.remove', function () {
//if you want to make the last item in the list to non removable
if ($('.remove').length > 1) {
$(this).parent().remove();
}
});
});
Demo: Fiddle
Duplicate IDs. ( IDS need to be unique )
<span id="remove">X</span>
change to
<span class="remove">X</span>
and change the script
$(".remove").click(
Id should be unique. So you can use class instead of it.
Change id='remove' to class='remove'
and try,
$(function () {
$(".remove").click(function () {
$(this).parent().remove();
});});
To restrict last one not clickable, Just try,
$(function () {
$(".remove").click(function () {
if($(".remove").length > 1){
$(this).parent().remove();
}
});});
ID must be unique, I will suggest you to use class instead
$(".remove").click(function () {
$(this).parent().remove();
});
HTML
<span id="remove">X</span>
change to
<span class="remove">X</span>
Fiddle DEMO
Related
Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>
you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});
I have a ‘parent’ <div>, and ‘child’ divs which are shown after clicking parent <div>.
All divs have <checkboxes> and <input> to put quantity.
Parent <checkbox> checks when at least one child <checkbox> is checked.
When child <checkbox> is checked/unchecked the quantity in <input> is automatically changed into ‘1’ or ‘’.
Parent quantity <input> is disabled and it is supposed to show the sum of all children quantities.
I have two problems.
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child <checkbox>) the summing script does not react on such change.
Secondly I wasn’t able to uncheck the parent <checkbox> when all child checkboxes are unchecked.
However I’m assuming if the summing script will start working properly I will be able to bind the parent <checkbox> with the sum (if (sum> 0){ $('#checkbox0').prop('checked', true);}else{$('#checkbox0').prop('checked', false);}
Html:
<div class="divCell" id="click1">
<div class="checkbox_div" style='pointer-events:none;'>
<input type="checkbox" id="checkbox0">
</div>
<div class="div_name_divcell">Parent - click to open</div>
<div class="div_quantity_divcell">
<input type="text" name="parent_1" class="quantity_class_parent_1" id="quantity_parent_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)" disabled="disabled">
</div>
</div>
<div id="hidden1" style="display: none;">
<div class="divCell" id="child_click1">
<div class="checkbox_div">
<input type="checkbox" id="checkbox1">
</div>
<div class="div_name_divcell">Child1</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_1" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
<div class="divCell" id="child_click2">
<div class="checkbox_div">
<input type="checkbox" id="checkbox2">
</div>
<div class="div_name_divcell">Child2</div>
<div class="div_quantity_divcell">
<input type="text" name="child_1" class="quantity_class_child" id="quantity_child_2" size="1" maxlength="3" onkeypress="return numbersonly(this, event)">
</div>
</div>
</div>
Css:
.divCell {width: 500px;height: 35px;margin: 2px 0;display: inline-block;background-color: #D4F78F;}
.div_quantity_divcell{float:right; padding:9px 1px 0 0}
.checkbox_div {width: 25px;position: relative;margin: 5px;float: left;}
.div_name_divcell {line-height: 35px;width: auto;float: left;}
JavaScript:
$(document).ready( function() {
event.preventDefault();
$('#checkbox1').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
}else{
$('#quantity_child_1').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_1').keyup(function(){
$('#checkbox1').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
//second child
$('#checkbox2').click(function() {
if(this.checked){
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_2').val('1')
}else{
$('#quantity_child_2').val('')
//$('#checkbox0').prop('checked', false);
}});
$('#quantity_child_2').keyup(function(){
$('#checkbox2').prop('checked', this.value > 0);
$('#checkbox0').prop('checked', true);
})
});
// suming script
$(document).on('change', '.quantity_class_child', function(){
var sum = 0;
$('.quantity_class_child').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
});
//opening script
$(document).ready(function() {
$('#click1').click(function() {
if ($('#hidden1').is(':hidden')) {
$('#hidden1').show(500);
} else {
$('#hidden1').hide(500);
}
});
});
JSFiddle: https://jsfiddle.net/mamzj4tw/6/
This is an updated version of your version
https://jsfiddle.net/mamzj4tw/13/
It uses each() to better (and clean) add actions to inputs.
You can create your custom events like do-sum and fire when you want.
In this case I defined that the sum is executed when
$(document).trigger('do-sum');
fires do-sum event.
and I've set a listener that executes your routine:
$(document).on('do-sum', function(){
var sum = 0;
$('.quantity_class_child.active').each(function(){
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
var parentChecked = false;
$('#hidden1 input[type="checkbox"]').each(function(i, e){
if($(e).is(':checked')) {
parentChecked = true;
}
});
$('#checkbox0').prop('checked', parentChecked);
});
I also use class active to set valid inputs (and quick sum them).
PS you don't need event.preventDefault(); after document ready event.
Ok, Here are the things that you can do to achieve,
First, the summing script works fine when you enter the quantity yourself, however when the quantity appears/disappears itself (after checking/unchecking the child ) the summing script does not react on such change.
The thing is change event will not be triggered if you are setting/changing the value from the javascript. For this you can manually call the change event to trigger the effect. Or, Create a separate function for summation calculation and call it on uncheck event of the checkbox.
eg.
Either
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('')
$(".quantity_class_child").trigger("change");
//$('#checkbox0').prop('checked', false);
}
});
OR
$('#checkbox1').click(function() {
if (this.checked) {
$('#checkbox0').prop('checked', this.checked);
$('#quantity_child_1').val('1')
} else {
$('#quantity_child_1').val('');
summation();
}
});
function summation(){
var sum = 0;
$('.quantity_class_child').each(function() {
sum += +$(this).val();
});
$('#quantity_parent_1').val(sum);
}
Now for the second part,
Secondly I wasn’t able to uncheck the parent when all child checkboxes are unchecked.
Just check the length of the checked input box during the summation process and uncheck it if the the length is zero.
Hope this help you cause.
Your code was a bit to complicated, so i have rewritten what you tried to archive ( without the css part). fiddle here
three little html div's
<div class="parent" id="parent">
<span class="input">
<input type="checkbox" name="parent" value="">
<label for parent>parent - click to open</label>
<input type="text" name="sum">
</span>
</div>
<div class="child" id="child1">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child1" value="child1">
<input type="text" class="inputSum" name="sum1">
</span>
</div>
<div class="child" id="child2">
<span class="input">
<input type="checkbox" class="inputCheckbox" name="child2" value="child2">
<input type="text" class="inputSum" name="sum2">
</span>
</div>
and a bit of jquery
$('.child').hide();
// check if parent checkbox is checked
$('input[name="parent"]').click ( function () {
if ( $(this).is(':checked') ) $('.child').show(); else $('.child').hide();
})
// check if childcheckbox is checked , if true trigger keyup and sum
$('.inputCheckbox').on ( 'change', function () {
if ( $(this).is(':checked') ) $(this).next().val('1').keyup();
// if not , trigger parent
if ( ! $('.inputCheckbox').is(':checked') ) $('input[name="parent"]').click ();
})
// check if value is entered and sum it on keyup
$('.inputSum').on('keyup', function () {
var sum = 0;
$('.inputSum').each ( function () { sum += ( $(this).val() - 0) })
$('input[name="sum"]').val(sum)
})
HTH
You can add new elements https://jsfiddle.net/mamzj4tw/34/
$(document).ready( function() {
$('.drop-down #checkbox').on('change',function(){
$(this).closest('.divCell').find('#quantity_child')
.val(this.checked ? 1:'').trigger('keyup');
});
$(document).on('keyup click', '.quantity_class_child', function(){
$(this).closest('.divCell').find('#checkbox').prop("checked",+$(this).val());
var sum = 0;
$('.quantity_class_child').each(function(){sum += +$(this).val()});
$('#quantity_parent_1').val(sum ||'');
$('#checkbox0').prop("checked", sum);
});
$('#click1').click(function() { $('#hidden1').toggle(500); });
});
When I click the zero button, I expect the the function zero to change the input to zero, but it seems to be not working. Is there anyway to do this in JavaScript instead of jQuery?
HTML
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"></input>
</div>
<button id="zero" onclick="setzero()">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>
jQuery
$('#in').on("change", function(){
$('#out').html($(this).val());
});
function setzero() {
$('#in').val(0);
}
http://jsfiddle.net/ahpu8wwx/12/
try you updated I have updated adding a new variable sum
var sum = 0;
$('#in').on("change", function(){
sum += parseInt($(this).val());
$('#out').html(sum);
setzero();
});
function setzero() {
$('#in').val(0);
}
Demo
Tushar needs to put his comment to the answer:
You code is correct, but you run it in a wrong context in fiddle, you need to set "No Wrap" option like
The onlick is not working because the the function setzero() is not in global context so you need to move it outside the document ready handler
You can use click() event handler and trigger change event using cahnge()
$('#in').on("change", function() {
$('#out').html($(this).val());
});
$('#zero').click(function() {
$('#in').val(0).change();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in">
</div>
<button id="zero">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>
Update : Or you need to define the function outside the $(document).ready(function(){..}); handler
$(document).ready(function() {
$('#in').on("change", function() {
$('#out').html($(this).val());
});
});
function setzero() {
$('#in').val(0).change();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in">
</div>
<button id="zero" onclick="setzero(this)">
<span class="glyphicon glyphicon-fire"></span> Zero
</button>
I think it is better to use jquery events, using it for the click is working
$('#zero').on('click', function(e){
$('#in').val(0);
e.preventDefault();
});
I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: http://jsfiddle.net/learner73/gS8u2/
My problem is:
(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.
(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!
HTML:
<div class="optionBox">
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
jQuery:
$('.add').click(function() {
$('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});
$('.remove').click(function() {
$(this).parent('div').remove();
});
You need to use event delegation on your remove link code:
$('.add').click(function() {
$('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().remove();
});
jsFiddle example
Also, you weren't adding a complete div block to match the other code you had. You left out the <div class="block"> and only added the input and span.
Demo http://jsfiddle.net/34Lbu/
API: .before https://api.jquery.com/before/
Hope rest fits your need :)
code
$('.add').click(function () {
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$(document).on('click', '.remove', function () {
$(this).parent('div').remove();
});
EDIT http://jsfiddle.net/amdzakir/gS8u2/38/
To check if all the input fields are filled with values.
$('.add').click(function() {
flag = true;
$('input').css('border-color','green');
$('input').each(function(){
if ($.trim($(this).val())===''){
$(this).css('border-color','red');
flag = false;
}
});
if(flag){
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
}
});
$(document).on('click','.remove',function() {
$(this).parent().remove();
});
try this:
$('.remove').click(function() {
$(this).closest('div').remove();
});
$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove Option</span>');
});
Here is one way -
http://jsfiddle.net/gS8u2/3/
$('.add').click(function () {
$('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});
$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
$(this).parent('.block').remove();
});
my html:
<td class="result">
<div id="main_title">
<label for="textfield"></label>
<input type="text" name="textfield" id="textfield" value="<?php echo $row['leftpanelmaintitle']; ?>" />
</div>
<div id="edit">EDIT</div>
<div id="update">UPDATE</div>
</td>
my js:
$('#edit').click(function()
{
$('#main_title').show(1000,function(){
$('#update').show();
$('#textfield').focus();
});
})
i want to use common selector in the place of $('#main_title'). that is the address of previous div.
i tried;
$(this).click(function()
{
$(this).prev('div').show(1000,function(){
$('#update1').show();
$('#textfield').focus();
});
})
bt not working.
You should use $('id').children() to get the previous div by writing the id of that present div.
You can do this:
$('#edit').click(function () {
$(this).prev('#main_title').show(1000, function () {
$('#update').show();
$('#textfield').focus();
});
});
Here, $(this).prev('#main_title') will give you the previous div with ID main_title to the currently clicked div with ID edit
UPDATE
You can add a class named edit to the edit button and do it like this:
$('.edit').click(function () {
$(this).prev().show(1000, function () {
$('#update').show();
$('#textfield').focus();
});
});
Demo: Fiddle