How to increase checkbox values ​with jquery? - javascript

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);

Related

ng-model not working for dynamic key of object and ng-repeat not working

i am building a project where we have one url input tag, which have its respective url mappings which needs to accept only URL and a add button to repeat two input tags
from below scenerio: url1 have urla -> urlb, urlc->urld, urle->urlf,....it has add button add as many as mappings. On save we need to send this json format to post API.
required json format :
{
url1: {
urla : urlb,
urlc : urld,
urle : urlf,...
},
url2:{
urlg : urlh,
urli: url,.....
},......
}
ISSUE : i m unable to get the required json format from my code.
`
HTML
<div>
<input id="url" type="text" ng-model="">
</div>
<div id="maprow1" class="row mt-5" ng-repeat="(privateUrl, publicUrl) in urlMappings track by $index">
<input id="privateurl1" type="text" class="form-control input-text http-input" ng-model="urlMappings.privateUrl">
<input id="publicurl1" type="text" class="form-control input-text http-input" ng-model="urlMappings.publicUrl">
<div id="mappingmain1" class="col-md-1 pr-0 text-right">
<button id="btnaddmapping1" class="button-default button-m panel-heading-margin" type="button" ng-click="addUrlMapping();" ng-if="$last">
<i class="di-block icon-add icon20 mr-0 v-sub"></i>
</button>
<button class="button-default button-m panel-heading-margin" type="button" ng-if="!$last" ng-click="slideUpModal();">
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div id="addview" class=" pull-right p-20" ng-show="!displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button" ng-click="addDomain();">Save</button>
</div>
</div>
controller:
$scope.urlMappings = [];
$scope.addUrlMapping = function() {
{
$scope.domainUrl ='';
$scope.privateUrl = '';
$scope.publicUrl = '';
const privateUrl = $scope.privateUrl;
const domainUrl = $scope.domainUrl;
var newUrlMappingField = {
[privateUrl]: $scope.publicUrl
};
$scope.urlMappings = {
[domainUrl] : newUrlMappingField
} };
`

Password visibility icon using fontawesome

I have this login form:
<form class="form-signin" action="${postUrl ?: '/login/authenticate'}" method="POST" id="loginForm" autocomplete="off">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" name="${usernameParameter ?: 'username'}" id="username" autocapitalize="none"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="${passwordParameter ?: 'password'}" id="password"/>
<i id="passwordToggler" title="toggle password display" onclick="passwordDisplayToggle()"> &#128065</i>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="${rememberMeParameter ?: 'remember-me'}" id="remember_me"
<g:if test='${hasCookie}'>checked="checked"</g:if>
/> Remember me
</label>
</div>
<button id="submit" class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
</form>
Currently it using an eye emoji like this:
But I want to change it to font awesome fa-eye also currently when I click on reveal password it showing cross sign and I also want to change that to eye lash icon as well.
Right now the eye and the cross sign icon I use unicode to display it.
Here is my javascript code:
document.addEventListener("DOMContentLoaded", function(event) {
document.forms['loginForm'].elements['username'].focus();
});
function passwordDisplayToggle() {
var toggleEl = document.getElementById("passwordToggler");
var eyeIcon = '\u{1F33D}';
var xIcon = '\u{2715}';
var passEl = document.getElementById("password");
if (passEl.type === "password") {
toggleEl.innerHTML = xIcon;
passEl.type = "text";
} else {
toggleEl.innerHTML = eyeIcon;
passEl.type = "password";
}
}
Any idea how I can switch it to font-awesome fa-eye?
Many thanks
I have to replace it with this jquery code to make it work :
function passwordDisplayToggle() {
var passEl = document.getElementById("password");
var passToggler=$('#passwordToggler');
if (passEl.type === "password") {
passEl.type = "text";
passToggler.removeClass('fa-eye');
passToggler.addClass('fa-eye-slash');
} else {
passToggler.removeClass('fa-eye-slash');
passToggler.addClass('fa-eye');
// passToggler.addClass('d-none');
passEl.type = "password";
}
}

How to get the class property for each HTML component inside a parent div?

Hello to the community.
This is my HTML code, what I want is to get the class property, only those that start with 'col-sm-', and that is inside the parent div, only identifying it by the property 'kyros'
<div id="div_wid_001" class="widget-main">
<div kyros="div_frm_gro_001" class="form-group">
<label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
<div class="col-sm-2">
<input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
<div class="button-wrapper">
<i class="ace-icon fa fa-pencil-square-o"></i>
<i class="ace-icon fa fa-times"></i>
</div>
</div>
<div id="div_sm_003" class="col-sm-8 frm_com ui-droppable"></div>
</div>
</div>
JS:
var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
///
$('div[kyros='+div_parent+']').children('div[class^='+col_sm+']').each(function () {
var kyr_class = $(this).attr('class');
console.log(kyr_class);
});
You should get the following result:
col-sm-2 control-label no-padding-right
col-sm-2
col-sm-8 frm_com ui-droppable
Two changes you need to make:
Use find so you search all descendants, not just children. Not sure why I thought one of your targets was nested inside another, but it isn't; so children is fine if you know they'll be children.
Remove the div restriction from your div[class^=...], because one of the elements you want to find is a label, not a div.
Example:
var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
///
$('div[kyros='+div_parent+']')
.children('[class^='+col_sm+']')
.each(function () {
var kyr_class = $(this).attr('class');
console.log(kyr_class);
});
<div id="div_wid_001" class="widget-main">
<div kyros="div_frm_gro_001" class="form-group">
<label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
<div class="col-sm-2">
<input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
<div class="button-wrapper">
<i class="ace-icon fa fa-pencil-square-o"></i>
<i class="ace-icon fa fa-times"></i>
</div>
</div>
<div id="div_sm_003" class="col-sm-8 frm_com ui-droppable"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But, that's fragile; it requires that the col-sm- be at the beginning of the class attribute. If someone adds a class before it later in development, this will break.
Instead, use a "contains" (*=) as a rough filter and then filter to fine-tune it:
$('div[kyros='+div_parent+']')
.children('[class*='+col_sm+']') // or .find to include descendants
.filter(function() {
// Filter out foo-col-sm-, requiring that col-sm- be at the
// beginning of the string or after a space
return this.className.startsWith(col_sm) || this.className.indexOf(" " + col_sm) != -1;
})
. // ...
Example (I've changed the third match so col-sm- isn't at the beginning of class):
var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
///
$('div[kyros='+div_parent+']')
.children('[class*='+col_sm+']')
.filter(function() {
return this.className.startsWith(col_sm) || this.className.indexOf(" " + col_sm) != -1;
})
.each(function () {
var kyr_class = $(this).attr('class');
console.log(kyr_class);
});
<div id="div_wid_001" class="widget-main">
<div kyros="div_frm_gro_001" class="form-group">
<label id="lbl_001" kyros="lbl_001" class="col-sm-2 control-label no-padding-right">Label 001:</label>
<div class="col-sm-2">
<input id="txt_001" kyros="txt_001" class="form-control bas_com" type="text">
<div class="button-wrapper">
<i class="ace-icon fa fa-pencil-square-o"></i>
<i class="ace-icon fa fa-times"></i>
</div>
</div>
<div id="div_sm_003" class="ui-droppable col-sm-8 frm_com"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You aren't getting the first result you expect because you are only looking for div.
$('div[kyros='+div_parent+']').children('div[class^='+col_sm+']').each(function () {
var kyr_class = $(this).attr('class');
console.log(kyr_class);
});
If you change your selector, it will work as expected
.children('*[class^='+col_sm+']')
This solution will work :
var div_parent = 'div_frm_gro_001';
var col_sm = 'col-sm-';
$('div[kyros='+div_parent+']').find('[class^='+col_sm+']').each(function () {
alert($(this).attr('class'));
console.log($(this).attr('class'));
});
Here is solution done : https://jsfiddle.net/txmmboxf/
I've updated it for lebel selection, now it will select any element start with class name.

Combining filters Jquery Isotope

I am trying to combine filters like this example: http://codepen.io/desandro/pen/JEojz/?editors=101 but I can't.
Codepen: http://codepen.io/anon/pen/gpbypp
HTML:
<div id="filters">
<label class="pull-left">Seats: </label>
<div class="btn-group" data-toggle="buttons" data-filter-group="seats">
<label class="btn btn-default active">
<input type="radio" data-filter="*">All
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".seats-4">4
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".seats-5">5
</label>
</div>
<br>
<br>
<label class="pull-left">Transmission: </label>
<div class="btn-group" data-toggle="buttons" data-filter-group="transmission">
<label class="btn btn-default">
<input type="radio" data-filter=".manual">Manual
</label>
<label class="btn btn-default">
<input type="radio" data-filter=".auto">Auto
</label>
</div>
</div>
<div id="isotope-container">
<div class="col-sm-3 item seats-5 auto">
<h3>Volkswagen Polo</h3>
<p>5 seats auto</p>
</div>
<div class="col-sm-3 item seats-4 auto">
<h3>Suzuki Jimny</h3>
<p>4 seats auto</p>
</div>
<div class="col-sm-3 item seats-4 manual">
<h3>Volkswagen Caddy</h3>
<p>4 seats manual</p>
</div>
<div class="col-sm-3 item seats-5 manual">
<h3>Opel Zafira</h3>
<p>5 seats manual</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Isotope website
Starting with the codepen from Pixelsmith, I swapped out the JS to match the example that you posted. I believe this is what you were looking for. The is-checked formatting is a little wonky, but the functionality is there.
This is the new JS. Working example
$('.filters').on( 'click', '.btn', function() {
var $this = $(this);
var $buttonGroup = $this.parents('.btn-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
filters[ filterGroup ] = $this.attr('data-filter');
var filterValue = concatValues( filters );
$container.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.btn-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
There's an error in your JS that's stopping the function from running, and then quirks in your code that seem to break the function.
In the function you need to change the line $('#filters input').on('click', '.btn', function() { to $('#filters').on('click', '.btn', function() {, otherwise you're asking the browser to watch all inputs in the #filters div for a click on .btn and that won't ever happen.
Second, I couldn't get the filters to work with the label/radio combination that you'd created, but I did get it to work with buttons. Is there a reason you're choosing radio buttons? If so you'll need to work with the code a bit more to make it happen, and you may want to move away from click and use attr('checked') instead.
Working Codepen
Good luck!

Jquery - find next element in each loop

I have a question like so.
I have HTML structure:
<form id="form">
<div class="row">
<div class="item-input">
<label for="A1">A1</label>
<input type="text" name ="A1" />
<span class="input-require">(*)</span>
<span class="info">(Enter A1)</span>
</div>
<div class="item-input">
<label for="A2">A2</label>
<input type="text" name ="A2" />
<span class="input-require">(*)</span>
<span class="info">(Enter A2)</span>
</div>
</div>
<div class="row">
<div class="item-input">
<label for="B1">B1</label>
<input type="text" name ="B1" />
<span class="input-require">(*)</span>
<span class="info">(Enter B1)</span>
</div>
<div class="item-input">
<label for="B2">B2</label>
<input type="text" name ="B2" />
<span class="input-require">(*)</span>
<span class="info">(Enter B2)</span>
</div>
</div>
...
</form>
Now I want to selected 'span' has class "info" behind input[type=text] each.
I try:
<script type="text/javascript">
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest("item-input").next().find('span.info');
console.log(spanInfo.text()); // Result is empty
});
});
</script>
Why is empty? Help me please. How do I, thanks
var spanInfo = $(this).closest("item-input").next().find('span.info');
Should be
var spanInfo = $(this).closest(".item-input").next().find('span.info');
You are missing the . (dot, class)
Your mean is show "(Enter A2)" and "(Enter B2)" or show all 4 element value: (Enter A1), (Enter A2), (Enter B1), (Enter B2)
If only show 2 value then CODE HERE
else You want to show 4 value, you can code:
$(document).ready(function() {
$("#form input[type=text]").each(function(){
var spanInfo = $(this).closest(".item-input").find('span.info');
console.log(spanInfo.text());
});
});

Categories