Please, advice.
I want to add tags inside the container marking checkboxes and remove tags by clicking on the "x" button of each tag.
Everything works fine except that when you click on the "x" button and tags are removed the state of the checkbox remains checked.
But I need that when you click on the button of each tag the state of the checkbox must be unchecked.
It might be easier to do with the value and the name of input, but I can't use them - only id.
$(document).ready(function() {
var $list = $("#itemList");
$(".chkbox").change(function() {
var a = $('label[for="' + this.id + '"]').text();
if (this.checked) {
$list.append('<li>'+a+'<button class="closebutton" value="'+a+'">X</button></li>');
}
else {
$("#itemList li:contains('"+a+"')").remove();
}
})
$(document).on('click','.closebutton',function(){
var b = this.value;
$("#itemList li:contains('"+b+"')").remove();
$('label[for="' + this.id + '"]').removeAttr('checked');
});
});
<div id="items">
<ul id="itemList">
</ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label> </div>
<div id="ck-button"><label for="two"><input type="checkbox" class="chkbox" id="two"><span> Second book</span></label> </div>
</div>
Try
$(document).ready(function () {
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $(this).next().text();
if (this.checked) {
$('<li>' + a + '<button class="closebutton" value="' + a + '">X</button></li>').appendTo($list).data('src', this);
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var $li = $(this).closest('li');
$($li.data('src')).prop('checked', false);
$li.remove();
});
});
Demo: Fiddle
Try this:
<div id="items">
<ul id="itemList">
</ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button1"><label for="one"><input type="checkbox" id="one" class="chkbox"><span>First book</span></label>
</div>
<div id="ck-button2">
<label for="two"><input type="checkbox" class="chkbox" id="two"><span> Second book</span></label></div>
</div>
</body>
<script>
$(document).ready(function()
{
var $list = $("#itemList");
$(".chkbox").change(function()
{
var a = $('label[for="'+this.id+'"]').text();
var t = this.id;
if(this.checked)
{
$list.append('<li>'+a+'<button class="closebutton" title="'+t+'" value="'+a+'">X</button></li>');
}
else
{
$("#itemList li:contains('"+a+"')").remove();
}
})
$(document).on('click', '.closebutton', function()
{
var b = this.value;
var q = this;
$("#itemList li:contains('"+b+"')").remove();
$('#'+this.title).removeAttr('checked');
});
});
</script>
Or See this demo: http://jsfiddle.net/knYvf/
API used:
find: http://api.jquery.com/find/
contains: http://api.jquery.com/contains-selector/
This line should do the trick:
$('label:contains("' + b + '")').find('.chkbox').prop('checked', false);
+1 to you for neat question as well!
Hope any will suffice the need :)
Code
$(document).ready(function () {
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $('label[for="' + this.id + '"]').text();
if (this.checked) {
$list.append('<li>' + a + '<button class="closebutton" value="' + a + '">X</button></li>');
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var b = this.value;
$("#itemList li:contains('" + b + "')").remove();
$('label:contains("' + b + '")').find('.chkbox').prop('checked', false);
});
});
<div id="items">
<ul id="itemList"></ul>
</div>
<div id="tab1" class="tab-pane">
<div id="ck-button">
<!--html code should be like this no need to add span-->
<input type="checkbox" id="one" class="chkbox"/>
<label for="one">First book</label>
</div>
<div id="ck-button">
<input type="checkbox" class="chkbox" id="two" />
<label for="two"> Second book</label>
</div>
var $list = $("#itemList");
$(".chkbox").change(function () {
var a = $('label[for="' + this.id + '"]').text();
var name=$(this).attr('id');
if (this.checked) {
//add name attribute in the button with the id of checkbox
$list.append('<li>' + a + '
<button class="closebutton" value="' + a + '" name="'+name+'">X</button></li>');
} else {
$("#itemList li:contains('" + a + "')").remove();
}
})
$(document).on('click', '.closebutton', function () {
var b = this.value;
$("#itemList li:contains('" + b + "')").remove();
//remove the checkbox whose id is same as the name attribute of button
$(':checkbox[id="' + this.name + '"]').removeAttr('checked');
});
DEMO
Related
I try to build form like this jsfiddle.net/pu3antasyah/5au979ck/ . Collect multiple value from other textarea and input in to one textarea.
Bytheway how to collect all input value dinamically from all input with .step class like this >> <input class="step" /> and wrap it using <li /> . send to <textarea id="collectallfieldtosave texarea" />
$(function(){
var scntDiv = $('#steparea');
var i = $('#steparea p').size() + 1;
$('#addinput').live('click', function() {
$('<p><input class="step-'+ i +'" value="step '+ i +'">remove</p><br/><br/>').appendTo(scntDiv);
i++;
return false;
});
$('.remove').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
window.setInterval(function(){
var
space = ' ',
line = '\n',
summary = $('.summary').val(),
theyield = $('#yield').val(),
IngredientsTitle = '<b>Ingredients for (<span class="yield">' +space+ theyield +'</span>)</b>',
step = '<li>' + $('.step').val() + '</li>';
$('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea name="summary" rows="7" class="summary"></textarea>
<br/><br/>
<input id="yield" value="1 person">
<br/><br/>
<div id="steparea">
<p><input class="step" value="step 1">remove</p>
<br/><br/>
</div>
add more step
<br/><br/>
<br/><br/>
<textarea id="collectallfieldtosave" name="nameoffield" rows="15" cols="70" placeholder=".." class="usp-textarea"></textarea>
You shouldn't be using live here. Use on and listen to events on #steparea (live is deprecated) And as of your solution you have to iterate using $.each() jquery fn
$(function(){
var scntDiv = $('#steparea');
var i = $('#steparea p').size() + 1;
$('#addinput').live('click', function() {
$('<p><input class="step" value="step '+ i +'">remove<br/><br/></p>').appendTo(scntDiv);
i++;
return false;
});
$('.remove').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function findSteps(what){
var acc = '';
$(what).each(function(){
acc += '<li>'+$(this).val()+'</li>';
});
return acc;
}
window.setInterval(function(){
var
space = ' ',
line = '\n',
summary = $('.summary').val(),
theyield = $('#yield').val(),
IngredientsTitle = '<b>Ingredients for (<span class="yield">' +space+ theyield +'</span>)</b>',
step = findSteps('.step');
$('#collectallfieldtosave').val( summary + line + line + IngredientsTitle + line + line + '<ol>' + step + '</ol>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea name="summary" rows="7" class="summary"></textarea>
<br/><br/>
<input id="yield" value="1 person">
<br/><br/>
<div id="steparea">
<p><input class="step" value="step 1">remove<br/><br/> </p>
</div>
add more step
<br/><br/>
<br/><br/>
<textarea id="collectallfieldtosave" name="nameoffield" rows="15" cols="70" placeholder=".." class="usp-textarea"></textarea>
I have two textareas with different ids which both have wysiwyg buttons for text formatting. I can insert the formatting tags into the first textarea however when I try to insert tags into the second textarea, the tags are inserted into the first one. Obviously when I use the buttons assigned to their respective textarea I would like the format tags to be inserted in the appropriate textarea. In jQuery I try to store the id of the buttons to concatenated with '#textarea' to recreate the textarea id.
<button class="B" id="11">B</button>
<button class="I" id="11">I</button>
<button class="U" id="11">U</button>
<button class="S" id="11">S</button>
<div id="textarea1" class="textareaWrapper">
<textarea id="textarea11" class="textarea"></textarea>
</div>
<button class="B" id="22">B</button>
<button class="I" id="22">I</button>
<button class="U" id="22">U</button>
<button class="S" id="22">S</button>
<div id="textarea2" class="textareaWrapper">
<textarea id="textarea22" class="textarea"></textarea>
</div>
<script>
$(document).ready(function () {
$('button.B').click(function () {
var id = $('button.B').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + id);
})
$('button.I').click(function () {
var id = $('button.I').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
})
$('button.U').click(function () {
var id = $('button.U').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
})
$('button.S').click(function () {
var id = $('button.S').attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
})
})
</script>
The problem is that inside your click handler you're getting a ref to the first button's id.
try this: $(this).attr('id');
Like:
$(document).ready(function () {
$('button.B').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + id);
})
$('button.I').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<i></i>");
})
$('button.U').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<u></u>");
})
$('button.S').click(function () {
var id = $(this).attr('id');
$('#textarea' + id).val($('#textarea' + id).val() + "<s></s>");
})
})
You must not use same ids for multiple controls.
My suggestion is to use dummy attribute e.g.'data-group', which can be used in JavaScript and browser simply ignores it. Like:
<button class="B" data-group="1">B</button>
<button class="I" data-group="1">I</button>
<button class="U" data-group="1">U</button>
<button class="S" data-group="1">S</button>
<div id="textarea1" class="textareaWrapper">
<textarea id="textarea11" class="textarea"></textarea>
</div>
<button class="B" data-group="2">B</button>
<button class="I" data-group="2">I</button>
<button class="U" data-group="2">U</button>
<button class="S" data-group="2">S</button>
<div id="textarea2" class="textareaWrapper">
<textarea id="textarea22" class="textarea"></textarea>
</div>
<script>
$(document).ready(function () {
$('button.B').click(function () {
var grp = $('button.B').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + id);
})
$('button.I').click(function () {
var grp = $('button.I').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<i></i>");
})
$('button.U').click(function () {
var grp = $('button.U').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<u></u>");
})
$('button.S').click(function () {
var grp = $('button.S').attr('data-group');
$('#textarea' + grp).val($('#textarea' + grp).val() + "<s></s>");
})
})
</script>
Hope it works.
The problem is the way you retrieve your ids:
$('button.S').attr('id');
This will get the id of the first element passing the selector. Consider this JSFiddle.
I want to remove the addcontent button once a new div is created.
Then create new divs from the new addcontent button created inside a new div.
<script>
var i = 1;
$(document).ready(function () {
$("#addcontent").click(function () {
var q = "new-question" + String(i);
alert(q);
$(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button id="addcontent">Add content</button></div>').show('slow');
i++;
});
});
</script>
<div class="question">
<button id="addcontent">Add content</button>
</div>
try this:
<script>
var i = 1;
$(document).ready(function () {
$(document).on('click','.addcontent',function(){
//$(".addcontent").click(function () {
if(i==1)
$(".question").html('');
var q = "new-question" + String(i);
$(".hide_button").remove();
alert(q);
$(".question").append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button class="addcontent hide_button">Add content</button></div>').show('slow');
i++;
});
});
</script>
<div class="question">
<button class="addcontent hide_button">Add content</button>
</div>
Just in case you want to have div inside div questions:
var i = 1;
$(document).ready(function () {
$('.question').on('click', 'button#addcontent', function () {
var $parent = $(this).parent();
$(this).remove();
var q = "new-question" + String(i);
alert(q);
$parent.append('<div class="new-question" id="question' + i + '" name="question' + i + '"><b>Div is created</b><br> This is div text <br> <button id="addcontent">Add content</button></div>').show('slow');
i++;
});
});
See demo
I try to make a count up function whenever there is pressed on a button (button is not in this code).
the result of the count up should be in the read only text field.
var html='';
var huidig = 0;
$('body').off('click', '[data-type=product]').on('click', '[data-type=product]', function(e)
{
e.preventDefault();
var price = $(this).attr('data-price');
var name = $(this).attr('data-name');
var id = $(this).attr('data-id');
if($('input[value='+id+']').length > 0)
{
var parent = $('input[value='+id+']').parent();
console.log("parent: " + parent);
var currentValue = parseFloat(parent.find('input[name^=product_amount]').val());
console.log("currentValue: " + currentValue);
currentValue++;
console.log("currentValue: " + currentValue);
parent.find('input[name^=product_amount]').val(parseFloat(currentValue));
console.log(parent.find('input[name^=product_amount]').val(parseFloat(currentValue)));
}
else
{
html+='<div class="row-fluid"><div class="span1"><input type="hidden" name="product[]" value="'+id+'"/><input type="text" readonly="readonly" name="product_amount[]" value="0" /></div> <div class="span7">'+name+'</div> <div class="span3 offset1">€'+price+'</div> </div>';
}
$('.bill').html(html);
amount = amount + parseFloat(price);
$('.total_bill').html(amount.toFixed(2));
});
Here is the JSfiddle: http://jsfiddle.net/buyC9/128/
I want to clear only the file upload field when pressed on clear.
My HTML:
<h1>Upload image:</h1>
<input type="file" name="blog[opload]" id="blog_opload" class="imagec">
<input type="url" size="50" name="blog[url]" id="blog_url" class="imagec">
<div id="preview">
</div>
My Jquery:
$('input').change(function() {
var el = $(this);
if (this.value === "") {
$('.imagec').prop('disabled', false);
this.disabled = false;
$('#preview').hide();
} else {
$('.imagec').prop('disabled', true);
el.prop('disabled', false);
alert(el.val());
if (el.attr('type') == 'url') {
$('#preview').show().html('<img src=' + '"' + el.val() + '"' + ' />');
}
}
});
function reset_html(id) {
$('.' + id).html( $('.' + id).html() );
}
var imagec_index = 0;
$('input[type=file]').each(function() {
imagec_index++;
$(this).wrap('<div id="imagec_' + imagec_index + '"></div>');
$(this).after('<input type="button" value="Clear" onclick="reset_html(\'imagec_' + imagec_index + '\')" />');
});
How about:
$('input[value="Clear"]').click(function(){
$('#blog_opload').val('');
});
Example: jsFiddle
You could also get rid of onclick="reset_html(\'imagec_' + imagec_index + '\')" if you use this.
Quick answer is replace it:
$("#clear").click(function(event){
event.preventDefault();
$("#control").replaceWith("<input type='file' id='control' />");
});
<input type="file" id="control" />
Clear
You can do simply
$("#filuploadId")[0].value = "";
In your code you meant to use the ID selector but instead are using class selector.
$('.' + id).html( $('.' + id).html() );
should be
$('#' + id).html( $('#' + id).html() );
Updated jsFiddle