how to find out how many items are selected in select box - javascript

I have a select box which has more than 200 items.
Below the select box is the submit button which submits the form using javascript.
I want to restrict the user to only select 100 items from the select box. If they select box and try to submit the form then it will say Select 100 Only
How can I do this in Javascript?

You can either:
Loop through all of the options elements and check the selected attribute:
var cnt = 0;
for (var i = 0; i < selectbox.options.length; i++) {
if (selectbox.options[i].selected === true) {
cnt++;
}
}
return cnt;
Or you can get the value of the select element and split the value by comma and base it on the number of items in the array.
var vlu = selectbox.value;
var vlus = vlu.split(',');
return vlus.length;

Related

Set value/text to dropdown list

I am using the following jquery postcode lookup and I am trying to push values and hard code the process in javascript.
I am using the following to give the postcode textbox a valid postcode, and then forcing the button click to find the addresses.
document.getElementById("idpc_input").value = "LL17 0PN";
document.getElementById('idpc_button').click();
This so far works, after this a dropdownlist appears with the id of 'idpc_dropdown', I am trying to (in javascript or jquery) select an option
Here is what I have done but it does not work
var select = document.getElementById("idpc_dropdown");
document.getElementById("idpc_dropdown").text = '2 Elwy Cottages Heol Esgob';
And also:
var desiredValue = "2 Elwy Cottages Heol Esgob"
var el = document.getElementById("idpc_dropdown");
for(var i=0; i<el.options.length; i++) {
if ( el.options[i].text == desiredValue ) {
el.selectedIndex = i;
break;
}
}
UPDATE:
Let me explain the process and order, 1- Type in postcode and press the button to find my address 2- a dropdownlist then renders and appears .. I Think this is why it is not working for my desired dropdownlist as its not loaded when the page is loaded, it is when the button has been pressed
Provided that i is the same as the index of the item you wish to select, I'd set the dropdown's value attribute to that index:
let el = document.getElementById("idpc_dropdown");
for(let i = 1; i <= el.options.length; i++) {
if ( el.options[i].text == desiredValue ) {
el.value = i; // here
break;
}
}

Check existing selections in dropdownlist during record edit

I have some rows in a grid that are editable by a user. When the user clicks the edit button in a grid row, i'm displaying a multi-select dropdownlist
("ddlEditRegionList") with options to choose from. When this dropdownlist is shown i want to keep the already saved selections checked.
I'm trying with the code snippet below but that does get my existing selections.
//Get currently selected options into array regionArr
var region = $.trim($tr.find(".tdRegion").html());
$("#hidRegionList").val($.trim($tr.find(".tdRegion").html()));
var regionArr = region.split(',');
$tr.find(".tdRegion").html($("#divRegionList"));
//keep selected options checked in edit mode - this isn't working
$('#ddlEditRegionList option').map(function () {
for (var i = 0; i < regionArr.length; i++) {
if ($.trim($(this).text()) == $.trim(regionArr[i])) {
return this;
}
}
}).attr('selected', 'selected');
Note that i'm using jquery-3.2.1
Try .val() instead of .text(), Like:
if ($.trim($(this).val()) == $.trim(regionArr[i])) {
return this;
}

jQuery Chose plugin how to remove selected item from drop down

I im using jquery choose plugin that is using two input boxes when page loads...and a need like in this example when i select number 1 in first box that this number is removed from second input box....this works fine...but problem is when i add dynamically input box i can't get item number 1 removed from added dynamic input box.
So question is: how can i remove selected values from input box when selecting other input boxes that is added dynamically and selected items in each select box is not visible in all selected box that exists and is added dynamically?
Here is jsfiddle:
[http://jsfiddle.net/dq97z/640/][1]
And here is picture what i need:
Maybe this will help you out
http://jsfiddle.net/s9r73qjm/
//an array to save selections
var selectedVals = [];
//push to the array when we have selected
selectedVals.push(selectedValue);
//check on the values when building the drop down
$( "#btn_newrow" ).click(function() {
var newList = document.createElement("select");
newList.dataset.placeholder = "Number row 3";
newList.style.width = "350px";
var newListData = new Option("placeholder", "placeholder");
for (var i = 0; i < 6; i++){
if (selectedVals.indexOf(i.toString()) == -1){
//then it hasn't been selected
newListData = new Option(i.toString(), i.toString());
newList.appendChild(newListData);
}
$( ".wrapper" ).append(newList);
}
});

Create Unique Hidden Field IDS from Select Menu options

I have a modal that displays stock information for a specific item that has multiple locations within a warehouse. The user selects the locations and quantities from each menu and clicks confirm, the information from this modal needs to then be imported on a pick list which is printed out.
To do this I was planning to use arrays to transport the data to the pick list.
I have a hidden field for each row, containing the values of the Location and the Qty Picked from there.
Location 1 + Qty 1 = Hidden Field 1
Location 2 + Qty 2 = Hidden Field 2
I now want to be able to put those hidden fields into an array once a button is clicked.
Hidden Field 1 + Hidden Field 2 = Array.
I can create the hidden fields just fine, its when I go to make the final array that contains all the data, it only seems to want to add the newest hidden field to be created into it.
Dialog - Pick Quantity Button (Used to confirm the selections):
//PICK QUANTITY Button
'Pick Quantity': function() {
jQuery('.ui-dialog button:nth-child(1)').button('disable');
//Disables the current selection, so that it cannot be editted
$('#AddLocQtyPick'+Picker).prop ('disabled', true);
//Disables the current selection, so that it cannot be editted
$('#LocationPickerSelect'+ Picker).prop ('disabled', true);
//Adds Unique Number to the ID of the input fields
Picker++;
//For Loop that helps to total up the quanities being selected in each picker
total=0;
for (i = 0; i<Picker; i++) {
total= total + $('#AddLocQtyPick'+i).val() * 1.0;
}
//Variable decides max value of pick on appends using previous selection
QtyReqTot= QtyReq - total;
//"Pick Another location" button is enabled whilst Qty Req has not been met
if (total !== QtyReq){
jQuery('.ui-dialog button:nth-child(2)').button('enable');
}
//"Pick Quantity", "Pick Another Location" are disabled, whilst "Confirm" button is enabled when total reaches Qty Req
if (total == QtyReq){
jQuery('.ui-dialog button:nth-child(2)').button('disable');
jQuery('.ui-dialog button:nth-child(1)').button('disable');
jQuery('.ui-dialog button:nth-child(3)').button('enable');
}
//Pick Another Location button is disabled if no more locations to pick from
if (length == 1){
jQuery('.ui-dialog button:nth-child(2)').button('disable');
}
if (total !== QtyReq && length == 1){
jQuery('.ui-dialog button:nth-child(1)').button('disable');
$(":button:contains('Cancel')").focus();
}
//Create Hidden Field - Location
//for loop that creates the fields
for (i = 0; i<Picker; i++){
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'" value='+HiddenSelection+'>';
$('#AddLocationPicker').append(appendHiddenSelection);
alert(appendHiddenSelection +'This is SelectionField'+i);
}
},
Confirm Button - Used to Generate the Final Array containing previous arrays:
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Checks "Multiple Location" icon for existence and adds Pick List button when all hidden.
$('img[id^=icon]:visible').length || $('#ProcessPickList').show();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
//Create Total Array
TotalHiddenArray = [HiddenSelection]
alert (TotalHiddenArray);
$(this).dialog('close');
},
I think I need to be able to create unique IDS for the input fields and show how get them to all be added to the array.
You can try replacing
HiddenArray = [appendHiddenQty, appendHiddenLocation]
By
HiddenArray[HiddenArray.length] = [appendHiddenQty, appendHiddenLocation]
This way, instead of overwriting HiddenArray within the loop, you just add [appendHiddenQty, appendHiddenLocation] at the end of HiddenArray.
EDIT1:
Replace
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
by
HiddenSelection[HiddenSelection.length] = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
Or, you also can use push :
HiddenSelection.push([$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()]);
Please see this quickly made Fiddle
EDIT2:
Ok, so let's try to replace the whole loop by:
var HiddenSelection = new Array;
for (i = 0; i<Picker; i++){
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'" value='+HiddenSelection+'>';
$('#AddLocationPicker').append(appendHiddenSelection);
alert(appendHiddenSelection +'This is SelectionField'+i);
TotalHiddenArray.push([HiddenSelection]);
}
You just have to remove this from your confirm function :
//Create Total Array
TotalHiddenArray = [HiddenSelection]
You also have to delcare TotalHiddenArray as new array outside any function (at the very top of your JS code for exemple, because I guess you are trying to access TotalHiddenArray from another function than the loop) like this :
var TotalHiddenArray= new Array;
Another Fiddle

Disable input after submit and count array element

function limitofTags(){
var tags = $('div').find('.tag').map(function(){
return $(this).text();
}).get();
var elem = [];
for (var i = 0; i < tags.length; ++i){
//store array elements
elem.push(tags[i]);
if(elem.length < 2){
$("#tags").prop('disabled',false);
}
else{
$("#tags").prop('disabled',true);
}
}
}
As for html, it is small div with button. When I type tags in input textfield, it will be appended to div area. When tags are more than 2, input textfield will be disabled to prevent more tags from being added. After submit the form, div showed the same number of tags but input textfield won't stay disabled. So how to make input textfield stay disabled if tags are more than 2 in div?
Appreciate the insight or help. I have been searching for online answers but seem not to find what I need the input text disable after submit.
You should probably check the length after the array is populated, and you're creating an elem array that is exactly the same as the tags array you have :
function limitofTags(){
var tags = $('div').find('.tag').map(function(){
return $(this).text();
}).get();
$("#tags").prop('disabled', tags.length >= 2);
}

Categories