This code is a part of my function that creates selectbox and put the index to each option value.My question is how can i add all these fields (textboxes and selectboxes) value into a specific input type hidden based on submit the form ?
here is my code :
$(function() {
var createChildDropdown = function(i) {
var $childDropdown = $('<div />', {
'class': 'childs'
});
$childDropdown.append($('<label />', {
'for': 'childDropdown-' + i
}).text('Child age ' + i));
$childDropdown.append($('<select />', {
'name': 'childDropdown'
}));
var options = [' 1 years old', '2 years old', '3 years old'];
options.forEach(function(option, index) {
$childDropdown.find('select').append($('<option />').text(option).attr('value', `,${index}`));
});
return $childDropdown;
};
var destroyChildDropdown = function($el, i) {
$el.find('div.childs').get(i).remove();
};
$(".button-click-child a").on("click", function() {
var button = $(this);
var oldVal = parseInt(button.closest("ul").prev().val());
var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
var total_value = "";
if(newVal >= 5) return;
button.closest("ul").prev().val(newVal);
$(".cat_textbox").each(function() {
var cat = $(this).prev('span').text();
});
if (oldVal < newVal) {
$('.childDropdowns').append(createChildDropdown(newVal));
} else if (oldVal > newVal) {
destroyChildDropdown($('.childDropdowns'), newVal);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="">
<input type="text" class="cat_textbox" name="child" value="0" />
<ul class="button-group button-click-child">
<li><span class="hide">+</span></li>
<li>-</span></li>
</ul>
<div class="childDropdowns"></div>
<button type="submit">SEND</button>
</form>
From your question, I assume you wanted to give an individual ID to each select box. If that's the case, you can just add a unique ID value for each selectbox like this:
$childDropdown.append($('<select />', {
'id': 'childDropdown-' + i
'name' : 'childDropdown-' + i
}));
Related
On click of a button the code will check that "select all" is selected or individually selected. Now the problem is if one selects any "select all" checkbox and if then unchecked any option, then these unchecked values are passed instead of checked ones.
$("#next").click(function () {
debugger
$(".show").show();
$("#next").hide();
if ($('.checkbox2 ul.dropdown-content li input[type=checkbox]').first().is(':checked') == true){
$.each(budata, function (key, value) {
arr.push(key);
});
}else {
debugger
arr = $('option[name=BU]:checked').map(function () {
return this.value;
}).get();
}
var bu = arr.join(',');
HTML CODE
<div class="checkbox2">
<div class="input-field col s6">
<select id="dropdown1" multiple>
<option value="" disabled selected>Select BU</option>
</select>
<label>BU</label>
</div>
</div>
AJAX CALl for BU values(Checkbox values)
var data = {};
data.dateFrom = $("#dateFrom").val();
data.BU = $("#dropdown1").val();
data.Location = $("#Location").val();
data.Type = $("#dropdown").val();
$.ajax({
type: 'POST',
url: ServiceURL + 'MaterialClearance/getBU/',
async: false,
success: function (data) {
$('#dropdown1').html('<option id="selectall" name="selectall" value="selectall" ">(Select All)</option>');
if (data.length > 0) {
for (i = 0; i < data.length; i++) {
budata[data[i].BU] = 0;
$('#dropdown1').append('<option name="BU" value="' + data[i].BU + '">' + data[i].BU + '</option>')
}
}
$('#dropdown1').material_select();
}
});
CODE for select all nd individual checked checkbox
$('.checkbox2 ul.dropdown-content li').click(function () {
debugger
if ($('.checkbox2 ul.dropdown-content li').first().is(".selected")) {
$('.checkbox2 ul.dropdown-content li:not(:first-child)').each(function (index) {
$(this).find("input[type=checkbox]").prop("checked", $('.checkbox2 ul.dropdown-content li').first().find("input[type=checkbox]").prop("checked"));
});
}
else {
alert($('option[name=BU]:checked'));
$('.checkbox2 ul.dropdown-content li input[type=checkbox]').first().prop("checked", false);
alert($('option[name=BU]:checked'));
}
});
good day to all, i have this script where i am appending checkbox when the add button is click. now my problem is that when i add two checkbox, when i click the second checkbox it triggers the first checkbox not the second checkbox.
here's my code.
$(document).ready(function () {
var TempCounter = parseInt($('input[name^="TempID"]').val());
var count = TempCounter;
var ajaxCount = count + 1;
var reqCount = TempCounter;
$('#addButton').click(function(e) {
$("#ApprovalRequestor").append('<div><input style="margin-left:20px;" type="checkbox" id="requestorManagerChecked'+count+'" name="requestorManager['+count+']" > </input>'
+ '<span>'+document.getElementById(document.getElementById('selectOtherRequestor').value).innerHTML+'</span>Delete <input type="hidden" value="'+$('#selectOtherRequestor').val()+'" id="ApproversID" name="ApproversID['+count+']"> </input>'
+ '<input type="hidden" id="TempCount" name="TempCount" value="'+count+'"/>'
+ '<input type="hidden" id="levelID" name="levelID['+count+']" value="1"> </input> </div>');
$('#requestorManagerChecked'+count+' ').change(function() {
if($('#requestorManagerChecked'+reqCount+' ').is(":checked") ) {
$('#requestorManagerChecked'+reqCount+' ').val(1);
alert('requestorManagerChecked'+reqCount+' ');
alert($('#requestorManagerChecked'+reqCount+' ').val() );
}
else {
$('#requestorManagerChecked'+reqCount+' ').val(0);
alert($('#requestorManagerChecked'+reqCount+' ').val() );
}
});
$.ajax({
type: 'post',
url: 'mis.php/fileApproversListController/getCounter',
data: 'variable='+ajaxCount,
success: function(data) {
$('#Count').html(data);
}
});
reqCount = count;
ajaxCount++;
count++;
});
here's my controller
function SaveApprovers() {
$this->load->model('new_development_model');
$requestType = $this->input->post('requestTypeID');
$ApproversLists = $this->input->get_post('Approvers');
for($ctr = 0; $ctr <= $this->input->get_post('counter'); $ctr++) {
$ApproversLists[$ctr]['ApproversLevel'];
$ApproversLists[$ctr]['Required'];
$ApproversLists[$ctr]['ApproversID'];
$Remark = $this->input->get_post('Remarks');
$this->new_development_model->ApproversList($ApproversLists[$ctr]['ApproversLevel'], $ApproversLists[$ctr]['Required'],$ApproversLists[$ctr]['ApproversID'],$Remark);
}
}
I'm having trouble filtering resulting div's with jQuery via two different inputs. Users can decide to filter by office, specialty or both office and specialty. The filtering is set from data attributes on the div that correspond to the select inputs values.
<div>
<label for="officeSearch">Search by office:</label>
<select name="Office Search" id="officeSearch">
<option value="all"></option>
<option value="communication">Communication</option>
<option value="internal medicine">Internal Medicine</option>
</select>
</div>
<div>
<label for="specialtySearch">Search by specialty:</label>
<select name="Specialty Search" id="specialtySearch">
<option value="all"></option>
<option value="Bone Cancer">Bone Cancer</option>
<option value="Breast Cancer">Breast Cancer</option>
<option value="Oral Cancer">Oral Cancer</option>
</select>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Oral Cancer">
<p>Person A</p>
</div>
<div class="module-sm profile" data-office="communication" data-specialty="Breast Cancer">
<p>Person B</p>
</div>
<div class="module-sm profile" data-office="internal medicine" data-specialty="Bone Cancer">
<p>Person C</p>
</div>
Here's the jQuery I'm using that fires on change of the selects:
$(document).ready(function() {
$("#officeSearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var office = $('.profile[data-office="' + selectedOffice +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(office).addClass('out').fadeOut(500);
office.removeClass('out').fadeIn(500);
}
});
$("#specialtySearch").on('change', function(){
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var person = $('#filterList .profile').not('.out');
var allPersons = $('#filterList .profile');
var allPersonsOffice = $('#filterList .profile').data('office');
var allPersonsOut = $('#filterList .profile.out');
var specialty = $('.profile[data-specialty="' + selectedSpecialty +'"]');
alert(''+ selectedOffice + ' ' + selectedSpecialty +'');
if (selectedOffice == 'all' && selectedSpecialty == 'all'){
$(allPersons).removeClass('out').fadeIn(500);
}
else {
$(person).not(specialty).addClass('out').fadeOut(500);
specialty.removeClass('out').fadeIn(500);
}
});
});
If it helps, I've made a codepen to demonstrate what I'm trying to do and where I'm at so far.
I've done some searching and have been scratching my head on how to get this working for weeks. Any help making this code more concise or examples to how others have solved this problem are greatly appreciated!
Call a single update from either selection changing.
Create a filter based on the selections (appended).
Hide the ones not in the matches
show the matches.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/2u7NY/
$(document).ready(function () {
var onChange = function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var filter = "#filterList .profile";
var allPersons = $(filter);
if (selectedOffice != "all")
{
filter += '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all")
{
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
}
$("#officeSearch, #specialtySearch").on('change', onChange );
});
Update: http://jsfiddle.net/TrueBlueAussie/2u7NY/2/
The filter can be made slightly more efficient as "#filterList .profile" is not needed to filter allPersons based on attributes.
I also removed the function variable and placed the function inline on the change event.
$(document).ready(function () {
$("#officeSearch, #specialtySearch").on('change',
function () {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
var allPersons = $("#filterList .profile");
var filter = "";
if (selectedOffice != "all") {
filter = '[data-office="' + selectedOffice + '"]'
}
if (selectedSpecialty != "all") {
filter += '[data-specialty="' + selectedSpecialty + '"]'
}
var $matching = allPersons.filter(filter);
$(allPersons).not($matching).removeClass('out').fadeOut(500);
$matching.removeClass('out').fadeIn(500);
});
});
OK. Try something like this....
var match = function(office, specialty, profile) {
var show = ((office == 'all' || office == $(profile).data('office')) &&
(specialty == 'all' || specialty == $(profile).data('specialty')));
if (show && !$(profile).is(':visible')) {
$(profile).fadeIn();
}
if (!show && $(profile).is(':visible')) {
$(profile).fadeOut();
}
}
var filter = function() {
var selectedOffice = $('#officeSearch').val();
var selectedSpecialty = $('#specialtySearch').val();
$.each($('#filterList .profile'), function(i, profile) {
match(selectedOffice, selectedSpecialty, profile);
});
};
$("#officeSearch").on('change', function(){
filter();
});
$("#specialtySearch").on('change', function(){
filter();
});
working fiddle here.... http://jsfiddle.net/6Q8FF/
I'm looking for jQuery code which will list all classess from inputs and display how many times every class (in this case class=value) is selected.
html schema:
<input type="checkbox" name="t1" class="a1" value="a1">
<input type="checkbox" name="t1" class="a2" value="a2">
<input type="checkbox" name="t1" class="a3" value="a3">
<input type="checkbox" name="t2" class="a1" value="a1">
<input type="checkbox" name="t2" class="a2" value="a2">
<input type="checkbox" name="t2" class="a3" value="a3">
...
<input type="checkbox" name="t9" class="a99" value="a99">
example of expected result:
a1 - 2
a2 - 0
a3 - 0
a99 - 0
Try
var map = {};
$('input[type=checkbox]').each(function () {
if (this.checked) {
map[this.className] = (map[this.className] || 0) + 1;
} else {
map[this.className] = map[this.className] || 0;
}
});
console.log(map)
Demo: Fiddle
You could try something like this:
var checked = new Array();
$("input[type=checkbox]").each( function() {
var cl = $(this).attr('class');
if (typeof(checked[cl]) == "undefined") checked[cl] = 0;
if ($(this).is(':checked')) checked[cl]++;
});
After this, you will have variable checked containing all checkbox classes, with number of checked boxes for each class.
Let me know if this works for you.
Fiddle: http://jsfiddle.net/smBSw/1/
var resultList = {}
$('input:checkbox').each(function () {
var result = resultList[this.className] || 0;
if (this.checked) {
result++;
}
resultList[this.className] = result;
});
console.log(resultList)
console.log(JSON.stringify(resultList));
You can use like :
var className = [];
$("#btn").click(function () {
$("#result").html("");
$("input[class^=a]").each(function () {
className.push($(this).attr("class"));
});
className = jQuery.unique(className);
for (i = 0; i < className.length; i++) {
var count = 0;
$("." + className[i]).each(function () {
if (this.checked) {
count++;
}
});
$("#result").append(
"<br/><span> " +
"className: " + className[i] + ", " +
"count :" + count +
"</span>"
);
}
});
demo fiddle
Basically you will need to iterate through these inputs.. but you will need a place to save the counts
$(".checkboxes").on("change", "input", function() {
var results = {"a1": 0, "a2": 0, "a3": 0};
$(".checkboxes input").each(function(i, checkbox) {
if (!$(checkbox).prop("checked")) {
return;
}
results[$(checkbox).val()] = results[$(checkbox).val()] + 1;
});
var resultsToAppend = '';
$.each(results, function(key, value) {
resultsToAppend += '<li>' + key + ' : ' + value + '</li>';
});
$(".results").html(resultsToAppend);
});
Here's a fiddle
I want after add a input and remove it, arrange the numbers in input name element array by jQuery but don't work for me after remove input. How can fix it?
DEMO: http://jsfiddle.net/mUMdW/
My Code:
Html:
<div class="ch">
Add
</div>
<p class="ffdd"></p>
jQuery:
function removeidx(clss, type){
var remove = $(this).closest(clss);
remove.fadeOut('slow', function () {
$(this).remove(); // or change next line to $('.RowCheck:visible')
$(clss).each(function (idx) {
var checkBoxes = $('input[type="'+type+'"]',this);
checkBoxes.each(function(i) {
var str = $(this).attr('name');
var currentIdx = parseInt(str.match(/\d+/)[0], 10);
$(this).attr('name', str.replace(currentIdx,idx));
})
});
});
}
$(document).on('click change', 'a.adding', function(e) {
e.preventDefault();
var idx = $('.Row').length;
$('.ffdd').append('<div class="Row"> <input name="arr['+idx+'][]" type="text" value=""> Remove</div>');
});
$('.ffdd').on('click','a', function(e){
$(this).closest('.Row').remove();
removeidx('.ffdd', 'text');
})
I guess that you want to re-number the inputs after a remove, so that the array is made of contiguous numbers.
I have rewritten some things, among which the renumbering function, using an index contextual to the parent function.
function removeidx(context, clss, type) {
var remove = $(context).closest(clss);
remove.fadeOut('slow', function () {
$(this).remove();
var idx = 0;
$(clss).each(function () {
var checkBoxes = $('input[type="' + type + '"]', this);
checkBoxes.each(function () {
var name = $(this).attr('name');
name = name.replace(/\d+/, idx);
$(this).attr('name', name);
idx = idx + 1;
});
});
});
}
$(document).on('click change', 'a.adding', function (e) {
e.preventDefault();
var idx = $('.Row').length;
$('.ffdd').append('<div class="Row"> <input name="arr[' + idx + '][]" type="text" value=""> Remove</div>');
});
$('.ffdd').on('click', 'a', function (e) {
removeidx(this, '.Row', 'text');
})
You can see a working version there : http://jsfiddle.net/8sVWp/