We Keep Coding

How to increase checkbox values ​with jquery?

When the button is pressed, we clone the email field. Checkbox values ​​conflict. How can I solve this problem? I would be glad if you help. I hope I can.
$('.add-extra-email-button').click(function() {
$('.clone_edilecek_email').clone(true, true).appendTo('.clone_edilen_email');
$('.clone_edilen_email .clone_edilecek_email').addClass('single-email remove-email');
$('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
$('.clone_edilen_email > .single-email').attr("class", "remove-email");
$('.clone_edilen_email input').each(function() {
if ($(this).val() == "") {
$(".add-extra-email-button").attr("disabled", true);
} else {
$(".add-extra-email-button").attr("disabled", true);
}
$(".remove-email:last").find('.email-address').val('');
});
});
<div class="col-md-6">
<div class="clone_edilecek_email">
<div class="form-group">
<label for="name">E-posta</label>
<div class="input-group">
<input type="email" class="form-control email-address" name="email[]" placeholder="E-Posta giriniz">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="checkbox" name="ban[]" value="1" autocomplete="off">
<span class="fas fa-ban"></span>
</label>
<label class="btn btn-secondary">
<input type="checkbox" name="circle[]" autocomplete="off">
<span class="fas fa-exclamation-circle"></span>
</label>
</div>
</div>
</div>
</div>
<div class="text-left">
<button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
</div>
<div class="clone_edilen_email"></div>
</div>

you must set the index between the brackets, like this:
<input type="checkbox" name="circle[0]" autocomplete="off"> <span class="fas fa-exclamation-circle"></span>
Why? otherwise only the selected checkboxes will be send and the backend. The browser will only send that 2 checkboxes are checked to the backend/server. the server than has no idea which of the checkbox indexes where checked. thats why in the frontend you need to provide an index for each checkbox.
Warning: not all backends understand these kind of form names (but most do).
you could do this like this::
var index =1;
$('input').each(function(inputElement) {
// execute the function for each input element. (might want to do the same for select elements.
// take the name of that element
var name = $(inputElement).prop('name');
// replace [] with the index you want// (warning this only works if you dont use multi dimensional arrays.
var newName = name.relace('[]','['+index+']');
// replace the old name with the new name.
$(inputElement).prop('name',newName);
});
note you can use a function like this:
function setIndeces(container, index){
$('input',container).each(function(inputElement){
var name = $(inputElement).prop('name');
var newName = name.relace('[]','['+index+']');
$(inputElement).prop('name',newName);
});
}
setIndeces($('newAddedDiv', 1);

Change color of multiple elements using a color picker

I am trying to figure out how I can change the color of all elements with the class of "change" using the Really Simple Bootstrap Color Picker. Here is the JS code.
$(function() {
var $inputs = $('input.color');
$inputs.colorPicker({pickerDefault: '#99CCFF'});
$inputs.each(function(idx, item) {
var $input = $(item);
var $target = $input.parents('.control-group:first').find('label:first');
$target.css('color', $input.val());
$input.on('colorPicker:preview colorPicker:change', function(e, value) {
$target.css('color', value);
});
$input.on('colorPicker:addSwatch', function(e, value) {
//do something with custom color (e.g. persist on the server-side)
});
});
});
HTML (I dont plan on using a form for all my elements. None of the elements below have a class of "change". I just included the code I had originally.)
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color addSwatch" />
</div>
</div>
<div class="control-group">
<label class="control-label">Pick a Color</label>
<div class="controls input-prepend">
<input type="text" name="color" class="color input-small" />
</div>
</div>
</form>

getting a default value to display in a div

currently when the page loads the defualt value of 10 displays which is what I want like so:
the custom amount shows:
but if I type something in the custom area and then delete it no default value is displayed. As shown here:
How can I get 10 to show up even if the user deletes their custom amount. I basically want 10 to always show if the user doesn't enter an amount or click a another button
here is my js:
$(document).ready(function() {
$('#donation-amount').keyup(function() {
$('#display-amount').text($(this).val());
});
$( ".selectvalue" ).click(function() {
$('#display-amount').text($(this).val());
});
$(".buttons .btn").click(function(){
$(".buttons .btn").removeClass('active');
$(this).toggleClass('active');
});
$('#display-amount').text($('#default').val());
});
and my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="10">10</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="15">15</button>
<button type="button" class="btn btn-default selectvalue hover-color" value="20">20</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
any help would be appreciated!

You can do this
store default in global and then apply when value is empty.
var defaultValue = 10;
$('#donation-amount').keyup(function() {
if($(this).val()) {
$('#display-amount').text($(this).val());
} else {
$('#display-amount').text(defaultValue );
}
});
See in action here http://jsbin.com/guxukodace/edit?html,js,output

Knockout Checkbox does not update UI when clicked, but viewModel is updated

I have a set checkboxes:
<div class="panel panel-default" style="margin-right:10px;">
<div class="panel-heading">
<span class="glyphicon glyphicon-cog"> Configurações Abreviar</span>
</div>
<div class="panel-body">
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Nome</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaNome" id="AbreviaNome">
<input type="checkbox" data-bind="checked: AbreviaFantasia" id="AbreviaFantasia">
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Endereço</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaLogradouro" id="AbreviaLogradouro">
<input type="checkbox" data-bind="checked: AbreviaComplemento" name="type" id="AbreviaComplemento">
<input type="checkbox" data-bind="checked: AbreviaBairro" id="AbreviaBairro">
<input type="checkbox" data-bind="checked: AbreviaCidade" id="AbreviaCidade">
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-lg-2">
<span><strong>Extra</strong></span>
</div>
<div class="col-lg-10">
<div class="btn-group btn-group-sm well" data-toggle="buttons">
<input type="checkbox" data-bind="checked: AbreviaExtra" id="AbreviaExtra">
</div>
</div>
</div>
</div>
And the following ViewModel:
function JobDetailsViewModel() {
var self = this;
var baseUri = '/Api/Pedidos/';
self.AbreviaNome = ko.observable(false);
self.AbreviaFantasia = ko.observable(false);
self.AbreviaLogradouro = ko.observable(false);
self.AbreviaComplemento = ko.observable(false);
self.AbreviaBairro = ko.observable(false);
self.AbreviaCidade = ko.observable(true);
self.AbreviaExtra = ko.observable(true);
var updatableData = {
AbreviaNome: self.AbreviaNome,
AbreviaFantasia: self.AbreviaFantasia,
AbreviaLogradouro: self.AbreviaLogradouro,
AbreviaComplemento: self.AbreviaComplemento,
AbreviaBairro: self.AbreviaBairro,
AbreviaCidade: self.AbreviaCidade,
AbreviaExtra: self.AbreviaExtra
};
self.update = function (formElement) {
alert('BOOM');
$.ajax({
type: "PUT",
url: baseUri,
data: ko.toJSON(updatableData),
dataType: "json",
contentType: "application/json"
})
.done(function (data) {
})
.error(function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
alert("fail");
});
};
}
$(document).ready(function () {
var viewModel = new JobDetailsViewModel();
ko.applyBindings(viewModel);
viewModel.AbreviaNome.subscribe(function (newValue) {
alert(newValue);
viewModel.update();
});
});
It seem that it works just fine, the subscription works, the value is being updated, and the PUT resquest is being sent, and no console errors.
But the checkbox UI does not change its state to reflect the Model when I click it. Any checkbox I add within the panel does not work, they have the same behavior, even when they are not bound to the view model.
<input type="checkbox" name="type">
What is wrong with my code, should I be doing an array or something like that, why cant I just use simple properties and bind them where I want?
I have fiddle with the formatted code: JSFIDDLE

This has nothing to do with Knockout. It's caused by Bootstrap. When you include data-toggle="buttons", Bootstrap intercepts the click event to update the Bootstrap buttons. But you don't actually have any buttons, which causes the event to just be cancelled.
The easiest fix is to just remove data-toggle="buttons" as I've done to the last checkbox in your example: http://jsfiddle.net/mbest/RK96d/2/
Reference: http://getbootstrap.com/javascript/#buttons

According to all the HTML specs, the name and value attributes for checkboxes are required. It's possible that some browsers act strangely when they aren't supplied.

Popover doesn't show up on dynamically generated div

I'm trying to display a custom bootstrap popover:
popover:
<div id="popover-head" class="hide">Add new tab</div>
<div id="popover-content" class="hide">
<form class="form-inline" id="pop-form" method="POST" action="../admin/FLT_add_tab.do">
<div class="form-group">
<!-- my form -->
<input type="text" name="newTab" id="newTab" required="required" pattern="^[\S\s]{3,25}[A-z]+$" title="Only accept alphabet characters and length is minimum of 3 and max of 25 " placeholder="Tab name.."/>
<button class="btn btn-primary" type="submit" ><i class="icon-white icon-ok"></i></button>
<button class="btn" type="button" onClick="popRemove();" ><i class="icon-remove"></i></button>
</div>
<p></p>
<p style="color:red" id="error-message"></p>
</form>
</div>
My div is dynamically generated from the jQuery UI from draggable to sortable this is the structure of the sortable:
<div class="question-constructor multiple-choice-problem">
<label for="textbox" class="question-label"> #. Edit this to define question: </label>
<input type="radio" name="test" id="option-1-1" class="question-radio" style="float:left;"><label for="option-1-1">Thing 1</label>
<input type="radio" name="test" id="option-1-2" class="question-radio" style="float:left;"><label for="option-1-2">Thing 1</label>
<input type="radio" name="test" id="option-1-3" class="question-radio" style="float:left;"><label for="option-1-3">Thing 1</label>
<input type="radio" name="test" id="option-1-4" class="question-radio" style="float:left;"><label for="option-1-4"> Thing 1</label>
</div>
But for some reason the popover doesn't show:
$(function() {
$(document).on('click', '#preview .question-constructor', function( event ) {
var id = $('#preview .question-constructor').index(this);
$('#preview .question-constructor').each( function() {
if( $('#preview .question-constructor').index(this) == id ) {
$(this).popover('show');
console.log('true' +$('#preview .question-constructor').index(this) );
} else {
console.log('not' +$('#preview .question-constructor').index(this) );
}
});
event.preventDefault();
});
$('#preview .question-constructor').each( function() {
$(this).popover({
html : true,
trigger : 'manual',
title : function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
});
});
The #preview id is the id of the sortable div, and the .question-constructor class is the div inside the sortable where the popover should show up. My guess is the initialization of the popover is wrong but I couldn't get it right.
What I want to do is:
When an item ( i.e item 1 ) is clicked show popover
But when another item ( i.e item 2 ) is clicked hide all other popover and show the popover beside this item.
UPDATE:
Here is a fiddle when I put the initialization on the onClick event it shows the popover but not to my desire behavior.

does this help ?
http://jsfiddle.net/Rusln/AWF82/
…
$("#preview").on('click', '.question-constructor', function(e) {
e.preventDefault();
$(".question-constructor").not(this).popover('hide');
});
…
receive: function (ev, ui) {
//init popover
$(this).data().sortable.currentItem.popover({
content: "hallo world"
});
}