Remove Respective Li from all - javascript

Following is my fiddle in which when user click on all delete then on foreach for LI function. I want to remove those lis which contains name like abc,def,ghk in their input field . I just want to know how to check that the active li on foreach loop contains the certain value that matches it input field value or not so i'll stop to remove it.
Fiddle: http://jsfiddle.net/mT5vw/2/
$(document).ready(function () {
$(document).on('click', '.liDelete', function () {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});
function alldelete() {
$('#folder li').each(function (e) {});
}

If you want to remove the li that the input contains a value like ABC try:
$('#removeAll').click(function(){
$('#folder li input[type="text"]').each(function () {
if ($(this).val() === "abc") {
$(this).parent().remove();
}
});
here the jsfiddle only write abc in the input and before press remove all.

I've edited your fiddle: http://jsfiddle.net/mT5vw/3/
If this is what you what it can be achieved by, removing all elements from the tag and then reinserting one empty row.
js:
$(document).ready(function () {
$(document).on('click', '.liDelete',function() {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
$("#deleteall").click(function(){
$('#folder').html("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});

Related

Insert checkboxes values(name) into input with jQuery

I'm working with Symfony and I have a lot of checkboxes with different id and value, so when I check one, i want to automatically insert its value (name) into an input and when I check other insert its value in the same input:
<input type="checkbox" name="{{ent.username}}" value="{{ent.username}}">
Thanks everyone
That does not depend on Symphony.
jQuery:
$(function() { // when page loads
$("input[type='checkbox']").on("click",function() {
if (this.checked) $("#somefield").val(this.value);
});
});
Plain JS:
window.onload=function() { // when page loads
document.querySelectorAll("input[type='checkbox']").forEach(function() {
this.onclick=function() {
if (this.checked) document.getElementById("somefield").value=this.value;
}
}
}
Steps to follow:
Add change listener on each input field of checkbox type.
Get all the selected fruit by iterating each checkbox.
Set the value of selected fruits in the field.
Running sample code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" value="Banana">Banana</input>
<input type="checkbox" value="Apple">Apple</input>
<input type="checkbox" value="Mangeo">Mango</input>
<input type="checkbox" value="Orange">Orange</input>
</div>
<div>
Selected Fruit : <input type="text" id="fruit">
</div>
<script>
var fruit = $('#fruit');
$('input[type="checkbox"]').change(function(e){
fruit.val(getSelectedFruits());
});
function getSelectedFruits(){
var fruits = "";
$('input[type="checkbox"]').each(function(i,cb){
if($(this).is(":checked")){
fruits += $(this).val() + " ";
}
});
return fruits;
}
</script>

jQuery get only first id value from the loop

My code is:
<input id='edit' type='checkbox' />
while($rs = mysql_fetch_array($query_fetch))
{
echo "
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
";
}
<script>
document.getElementById('edit').onchange = function() {
document.getElementById('qty').disabled = !this.checked;
};
</script>
The problem is that when check the checkbox only the first row of the loop is effected. I want when checkbox is checked all input to be enabled.
To do this in jQuery, change:
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
To:
<input type='text' name='qty' class='qty' value='".$sum[0]."' disabled>
And add the following code:
$('#edit').click(function() {
if ($(this).prop('checked')) {
$('.qty').prop('disabled', false);
} else {
$('.qty').prop('disabled', true);
}
});
Note: DOM object IDs should be unique. No two elements should have the same ID. You can assign the same class to multiple elements and identify them in javascript that way. Also, if these input elements are form elements you plan to process server side, you will need to name them differently or only the last value assigned will be available.
First thing You don't use id for that much elements... id is unique for each element...
here you can use class = qty .
you can get class values using jquery
$('.qty').eq(0).val();
still if you want to use id then you can concatenate any counter variable (i) to id
echo "
<input type='text' name='qty"+i+"' id='qty' value='".$sum[0]."' disabled>
";
To do this in jQuery:
add class entry to the text fields:
<input type='text' class='qty' name='qty' id='qty' value='".$sum[0]."' disabled>
and then use the jquery
$( "#edit" ).click(function() {
$( ".qty" ).each(function( index ) {
if ($("#edit").is(':checked')) {
$( this ).prop('disabled', false);
} else {
$( this ).prop('disabled', true);
}
});
});

Append only parent UL

Following is my fiddle in which I am dynamically adding LIs. The issue I am facing is that the Parent UL in which I am trying to add Lis already consist child UL within the Parent LI and on generating dynamically a new Li. The Li not only created for parent UL but also for child UL. Kindly let me know how can I change following fiddle so the (Dynamically Created) LI will only be created for Parent <ul>
http://jsfiddle.net/NH5Lc/2/
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /> <ul class='anotherUL'><li>Dynamic Child Li</li></ul> </li>");
});
$("ul").append is targetting all the uls you have to specifically select the ul you want, which is #folder
$("#folder").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /> <ul class='anotherUL'><li>Dynamic Child Li</li></ul> </li>");
http://jsfiddle.net/NH5Lc/4/
As you have already provide an id to UL, use and change your selector as
$("ul#folder").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /> <ul class='anotherUL'><li>Dynamic Child Li</li></ul> </li>");
DEMO
$("ul").append() will target to all uls

Show div when radio button selected

I am novice in javascript and jQuery.
In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible.
If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
How should I change my script to achieve that?
I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});
Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
jsFiddle example
$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
http://jsfiddle.net/2SsAk/2/
$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});
var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
JSFIDDLE

Append Jquery plugin to document

I am using a plugin called minicolors for jquery link. I am trying to appened a color picker here (in 2 places, a div and table just for testing) with a button click, it seems though that it only works on the second button click, the first simply returning an empty input box.
<script type="text/javascript">
function addPicker() {
$(document).ready( function() {
$(".colorpick").miniColors({
change: function(hex, rgb) {
}
});
});
var picker = "<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />";
$("#datatable > tbody").append("<tr><td>"+picker+"</td></tr>");
$("#testdiv").append(picker);
}
</script>
<div id="testdiv"></div>
<button onclick =" addPicker();">Button</button>
No Idea why this is not working.
Try :
$(document).ready( function() {
$('.addButton').click(function(){
$("<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />").appendTo("#datatable tbody").wrap('<tr><td></td></tr>');
$('.colorpick').miniColors();
});
});​
Live demo : http://jsfiddle.net/hCVpX/12/

Categories