If checkbox selected append his textValue into another span - javascript

I have a dropdown checkbox for which I want to get checkbox value and append a <span> when checkbox is checked after <input type="text" class="form-control">. When checkbox is unchecked I want to remove appended span.
this is what I've tried:
$ ('.chkb:checkbox').click(function(){
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})
It is not working so great my script because if I select more checkbox options the append is for every checked element once again and remove only when I uncheck last checkbox.
Here is a small fiddle example:

//keep dropdown open
$('.dropdown-menu').on('click', function(e) {
if($(this).hasClass('drop-down-stay')) {
e.stopPropagation();
}
});
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
if ($(this).prop('checked')){
var textName = $(this).next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
//build again the checked ones
$( ".vss" ).remove();
$ ('.chkb:checkbox:checked').each(function(){
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + $(this).next( '.txt' ).text()+'</span>');
});
}
})

Just append in your code the next line in click:
$( ".vss" ).remove();
http://jsfiddle.net/D2RLR/5737/
//find checkbox span name and insert into appended span
$ ('.chkb:checkbox').click(function(){
$( ".vss" ).remove();
if ($(".chkb").prop('checked') == true){
var textName = $('.chkb:checked').next( '.txt' ).text();
$( ".input-append" ).append('<span class="input-group-addon vss"> ' + textName +'</span>');
//alert(textName);
}
else{
$( ".vss" ).remove();
}
})

Try
$('.chkb:checkbox').click(function () {
var items = $('.chkb:checkbox:checked').map(function () {
return '<span class="input-group-addon vss"> ' + $(this).next('.txt').text() + '</span>'
}).get();
$(".input-append .vss").remove()
$(".input-append").append(items.join(''));
})
Demo: Fiddle

replace $(".chkb") with $(this) inside click event callback function. Currently you check all of the checkboxes values in the click event callback function. $(this) refers to the clicked checkbox. So $(this).prop('checked') will refer to the last clicked checkboxes value. You can go from there to solve the problem that you have :)

Related

How to replace inner html onClick on each loop

I'm trying to loop each thru of the attribute and if it matches, it will replace the inner HTML of the DOM. For this example, I'm trying to replace the data-product="momentum-shorts-2-0" inner HTML DOM which is the <h2>Momentum Shorts 2.0 NEW</h2> contents into the <div> class="compare-main" </div> that I've highlighted in the screenshot..
This is what I have with my code now but i'm stuck.. it keeps returning to me singular value of the last item..
<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = $(this).attr("data-product");
$(".compare-all .compare-products [data-product='" + selected_data_product + "']").each(function(){
new_html = $(this).html();
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).html(new_html);
})
});
});
})
</script>
Issue:
<script>
jQuery( document ).ready(function() {
$( ".compare-filter-item" ).click(function() {
var selected_data_product = "momentum-shorts-2-0";
$(".compare-main .compare-products [data-product='" + selected_data_product + "']").each(function(){
$(this).find("h2").text("Momentum Shorts 2.0");
});
});
})
</script>
I tried to understand your requirement and here is the solution see if it help.

JQuery: Loading content into dynamic tabs with load()

I have a main menu, where if I click on any of the options a tab is dynamically created in a div. So I can create up to nine tabs of different options out there in the main menu.
The javascript code I use to create and delete tabs is as follows:
$(document).ready(function () {
$("#tabs").tabs();
var tabCounter = 1;
var cont =1;
var num_tabs = $("#tabs ul li").length +1,
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabs = $( "#tabs" ).tabs();
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
cont++;
}
// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
cont--;
});
tabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
$(".menuitem a").click(function(event) {
event.preventDefault();
if(cont<=9)
{
tabTitle = $(this).attr("title"),
addTab();
$("#tabs-"+tabCounter).load($(this).attr('href'));
tabCounter++;
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
}
else
{
$( "#dialog-message" ).dialog({
modal: true,buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});
});
I wanted to get it by adding a tab is activated and show your content, so I added:
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
Until there all right, I could show up to 9 tabs, but missing your content, it would be a path Symfony,for example:
<li class ="menuitem">test</li>
Then I added the following code to load this route into the div:
$("#tabs-"+tabCounter).load($(this).attr('href'));
And the result is that the content for each tab appears, but it only appears automatically activates the first tab does not show me the warning dialog that can not display more than 9 tabs. The code above is something that affects others and I can not get a solution to this problem.
Besides this problem, I need to know how to get that pressing an option from the main menu, if there is an open tab with that content to put the active tab and display its contents, instead of opening another like (there can be two tabs of the same content).
If there is a better way to do this, I would like to know.
I'm a newbie, so I apologize for how to explain it.

How do I make elements in jQuery Selectable deselected?

How do I make elements in jQuery Selectable deselected? At this Link it is well documented how to use jQuery Selectable but it is never mentioned how to deselect selected elements again. Any ideas?
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
<ol id="selectable">
<?php
for($i=1;$i<=9;$i++) {
echo "<li id=\"field_$i\" class=\"ui-state-default\">$i</li>";
}
?>
</ol>
Hold ctrl and click on the elements. It can also be used to make multiple selections.

comparison of multiple input fields with same class name but not same id using jQuery

I want to make jquery/javascript function which compare multiple values with each other if one of them comes out different then echo "Values are different" next to every field present in html body.
<input name="flag2" type="text" id="flag2" class="flags">
<input name="flag3" type="text" id="flag3" class="flags">
<input name="flag4" type="text" id="flag4" class="flags">
<input name="flag5" type="text" id="flag5" class="flags">
<input name="flag6" type="text" id="flag6" class="flags">
Note: I use a button with jquery function to add new field on press, is using appendTo to add more fields. sometimes i have more or less fields, the jquery function must be dynamic, to apply on the number of input fields set.
Try each() function
$(".flags").each(function(){
alert(this.value);
});
Link for references
You can accomplish the job with a help of two each functions in Jquery below,
Get the selector common for all the input tags say .flags, then create a loop to get all the DOM objects
var temp; var start=0; var boolN=true;
$( "input.flags" ).each(function( index ) {
if (start==0) {
temp = $( this ).text();
} else if (temp = $( this ).text()) {
temp = $( this ).text();
} else {
boolN = false;
}
});
Now loop the span or your custom tag to show the message. I have used a span tag here,
$( "span" ).each(function( index ) {
if (boolN) {
$( this ).html("Values are Simillar");
} else {
$( this ).html("Values are Different");
}
});
Now couple both the above methods in a custom method and bind a click event of a button like
$("button").click(function () {
var temp; var start=0; var boolN=true;
$( "input.flags" ).each(function( index ) {
if (start==0) {
temp = $( this ).text();
} else if (temp = $( this ).text()) {
temp = $( this ).text();
} else {
boolN = false;
}
});
$( "span" ).each(function( index ) {
if (boolN) {
$( this ).html("Values are Simillar");
} else {
$( this ).html("Values are Different");
}
});
});
Working Example at JS Fiddle

How to add element in element using jquery

I have some code like this:
<p>Nuno</p>
<p>Eimes</p>
How can I manipulate it like this:
<p>Nuno</p>
<p>Eimes</p>
I've tried:
var name=$(this).text();
$( "p" ).each(function() {
$(this).prepend('<a href="id/'+ $(this).text() +'"> ');
$(this).append("</a>");
});
but it results:
<p> Nuno</p>
<p> Eimes</p>
the <a> is not inside $('p').text(); also if i change to name. it didn't show the value.
$( "p" ).each(function() {
var text = $(this).text();
$(this).wrapInner('');
});
Live Demo
Simple and .wrapInner()
$('p').wrapInner(function(){
return '<a href="name/' + $(this).text() + '" />' // even this.innerHTML instead of $(this).text() will do
})
Demo: Fiddle
Once you've extracted the name, I would just rewrite the whole code within the <p></p> tags again:
var name=$(this).text();
$( "p" ).each(function() {
$(this).html('' + $(this).text() + '');
});
You just need to grab the inner stuff, then replace everything in the tag with the new HTML:
var name=$(this).text();
$( "p" ).each(function() {
old = $(this).html();
$(this).html(''+old+'');
});
Fiddle
Demo
$('p').html(function () {
return '' + this.innerHTML + '';
});
.html()

Categories

Resources