We Keep Coding

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

no of input fields according to user input

I have a form that will ask number of input fields from user, and then append inputs to the form. I have developed the function using JavaScript.
The problem is for the first time it will work fine. If I again select another number from the select tag, it will append the number of input fields to the previous inputs.
Example:
If I first select 4 input fields it will show 4 input fields.
If I again select 2 from the select tag it will add another two input
fields.
So altogether 6 input fields. I don't want that. If I select 4 it should be 4. If I again select 2 it should be 2, not 6. Here is my code:
function obj(){
var a=document.getElementById('no_of_obj').value; //select tag value(1 to 6)
var b=document.getElementById('objBlock') //this is the container
var i=0;
while(i<a){
var txt=document.createElement('input');
txt.type="text";
txt.id="obj"+i;
txt.style.height="30px";
b.appendChild(txt);
i++;
}
}

You could clear down the objBlock container before appending the new input elements, using:
b.innerHTML = '';

Try this
function obj(){
var a=document.getElementById('no_of_obj').value;//select tag value(1 to 6)
var b=document.getElementById('objBlock')//this is the container
var i=0;
while(b.children.length < a){
var ct = document.createElement('div');
var txt=document.createElement('input');
txt.type="text";
txt.id="obj"+i;
txt.style.height="30px";
ct.appendChild(txt);
b.appendChild(ct)
}
while(b.children.length > a){
b.removeChild(b.children[b.children.length - 1]);
}
}
Demo: Fiddle
Using jQuery
$(function(){
var $ct = $('#objBlock');
$('#no_of_obj').change(function(){
var count = $(this).val(), counter = count - $ct.children().length;
while(counter-- > 0){
$('<div><input class="input-xlarge"/></div>').appendTo($ct);
}
$ct.children(':gt(' + (count - 1) + ')').remove();
});
})
Demo: Fiddle

changing text for a selected option only when its in selected mode

I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks

You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/

You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});

remove items from HTML dropdownList at checkbox un-check event

I have a list of check-boxes and a drop-down list.I managed to add elements dynamically to dropdown list when I check the checkboxes.
How can I remove corresponding Items dynamically from drop-down list when I un-check particular checkbox.
Here is my code
//<input type="checkbox" name="docCkBox" value="${document.documentName}" onclick="handleChange(this)"/>
// check box onclick event will call this function
function handleChange(cb) {
if (cb.checked)
{
// Create an Option object
var opt = document.createElement("option");
// Add an Option object to Drop Down/List Box
document.getElementById("query_doc").options.add(opt);
// Assign text and value to Option object
opt.text = cb.value;
opt.value = cb.value;
}
else{
//I want to remove a particuler Item when I uncheck the check-box
//by below method it will always remove the first element of the dropdown but not the corresponding element
var opt = document.createElement("option");
opt.text = cb.value;
opt.value = cb.value;
document.getElementById("query_doc").remove(opt);
}
}

You need to get access to the option that is already in the select tag, not create a new one. I would do this by getting all of the options then checking each one to see if it has the value of the checkbox. The code would look something like this inside the else block:
var opts = document.getElementById("query_doc").getElementsByTagName('option');
for(var i = 0; i < opts.length; i++){
if(opts[i].value == cb.value){
opts[i].parentNode.removeChild(opts[i]);
}
}
I haven't tested the code, but the general idea is there.

You will have to find the index of the desired option and remove it by index.

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

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;