We Keep Coding

Type to search from input box

I have a form where a user can choose their Occupation. The list of occupations are in a seperate .js file like so:
var occupationSelect = "<select id='occupationSelect' onchange='selectChange()' ><option value=''></option><option value='v10173' >AA Patrolman</option><option value='v10174' >Abattoir Inspector</option>
Now in my form I want the input box (as the occupation list is very long) , for the user to type A, B etc and then the relevant occupations come up. Something like the following jsfiddle
Similar JS Fiddle
This fiddle is fine if I put all the Occupations into an array.
However the options in my .js file have values attached for use later in the web application (eg. option value='v10173')
What is the best option to get the Occupation by typing but also to make sure the value is attached.

Edited the js fiddle:
<input name="car" list="anrede" />
<input name="car-val" hidden />
<ul id="anrede"></ul>
var mycars2 = [
['Herr', 'herr'],
['thomas', 'v2345'],
];
var list = $('#anrede');
listHtml = '';
mycars2.forEach(function(item){
var option = '<li data-val="' + item[1] + '">' + item[0] + '</li>';
listHtml += option;
});
list.html(listHtml);
$('#anrede li').on('click', function(){
$('input[name="car"]').val($(this).html());
$('input[name="car-val"]').val($(this).attr('data-val'));
});
This needs jquery, and the names/values are stored in pairs inside the list.
A hidden input is used for the value.

I would suggest using data-value attribute for the "value" of selected item and array of objects, like so:
var mycars = [
{
title: 'Herr',
value: 'Herr Value'
},
{
title: 'Frau',
value: 'Frau Value'
}
];
var list = document.getElementById('anrede');
var input = document.getElementById('carList');
mycars.forEach(function(item) {
var option = document.createElement('option');
option.value = item.title;
option.dataset.value = item.value;
list.appendChild(option);
});
input.onchange = function() {
alert(document.querySelector('option[value="' + this.value + '"]').dataset.value)
}
here is the jsfiddle - https://jsfiddle.net/0jvt05L0/302/

How to create a enhanced HTML TransferBox with an attribute

I need to create an enhanced transferbox, using HTML, JavaScript and JQuery.
I have a set of options a user can select from and associate with an attribute. The selection and deselection must be accomplished with two SELECT HTML elements (i.e., a transferbox). For example, these options can be a list of skill names.
When the 'add' button is clicked, the option(s) selected in the first SELECT element, along with an attribute (e.g. number of years from a text box) must be transferred from the source SELECT element to selected/destination SELECT element. The attribute must be displayed along with the item text in this second SELECT element (for example, the item displays the skill and the number of years).
When the 'remove' button is clicked, the selected option(s) in the second SELECT element must be moved back to the first SELECT element (in the original format .. without the attribute).
JSON should be the data format for initial selection setup and saving latest selections.
I want an initial set of selections and attributes to be set via JSON in an a hidden input field. I want the final set of selections to be saved to JSON in the same hidden input field.
Example HTML:
<input type="hidden" id="SelectionsId" value='[{ "id": "2", "attribute":"15"},{ "id": "4", "attribute":"3" }]' />
<!--<input type="hidden" id="SelectionsId" value='[]' />-->
<div>
<select class="MultiSelect" multiple="multiple" id="SelectFromId">
<option value="1">.NET</option>
<option value="2">C#</option>
<option value="3">SQL Server</option>
<option value="4">jQuery</option>
<option value="5">Oracle</option>
<option value="6">WPF</option>
</select>
<div style="float:left; margin-top:3%; padding:8px;">
<div>
<span>Years:</span>
<input id="YearsId" type="number" value="1" style="width:36px;" />
<button title="Add selected" id="includeBtnId">⇾</button>
</div>
<div style="text-align:center;margin-top:16%;">
<button title="Remove selected" id="removeBtnId">⇽</button>
</div>
</div>
<select class="MultiSelect" multiple="multiple" id="SelectToId"></select>
</div>
<div style="clear:both;"></div>
<div style="margin-top:40px;margin-left:200px;">
<button onclick="SaveFinalSelections();">Save</button>
</div>
Example CSS:
<style>
.MultiSelect {
width: 200px;
height: 200px;
float: left;
}
</style>
Visual of requirement:

Here's a solution to the challenge. The variables being setup at the start make this solution easy to configure and maintain.
When the page gets displayed, the SetupInitialSelections method looks at the JSON data in the hidden input field and populates the selected items.
When the 'Save' button clicked, the current selections are converted to JSON and placed back in the hidden input field.
Invisible character \u200C is introduced to delimit the item text and the attribute during display. This comes in to use if the item has to be removed and the original item text has to be determined so it can be placed back in the source SELECT element.
The selectNewItem variable can be set to true if you would like the newly added item to be selected soon after adding it to the SELECT element via the 'add' or 'remove' operations.
This solution supports multiple item selections. So multiple items can be added at once ... and similarly multiple items can be removed at once.
<script src="jquery-1.12.4.js"></script>
<script>
var savedSelectionsId = 'SelectionsId';
var fromElementId = 'SelectFromId';
var toElementId = 'SelectToId';
var includeButtonId = 'includeBtnId';
var removeButtonId = 'removeBtnId';
var extraElementId = 'YearsId';
var extraPrefix = " (";
var extraSuffix = " years)";
var noItemsToIncludeMessage = 'Select item(s) to include.';
var noItemsToRemoveMessage = 'Select item(s) to remove.';
var selectNewItem = false;
var hiddenSeparator = '\u200C'; // invisible seperator character
$(document).ready(function () {
SetupInitialSelections();
//when button clicked, include selected item(s)
$("#" + includeButtonId).click(function (e) {
var selectedOpts = $('#' + fromElementId + ' option:selected');
if (selectedOpts.length == 0) {
alert(noItemsToIncludeMessage);
e.preventDefault();
return;
}
var attribute = $("#" + extraElementId).val();
selectedOpts.each(function () {
var newItem = $('<option>', { value: $(this).val(), text: $(this).text() + hiddenSeparator + extraPrefix + attribute + extraSuffix });
$('#' + toElementId).append(newItem);
if (selectNewItem) {
newItem.prop('selected', true);
}
});
$(selectedOpts).remove();
e.preventDefault();
});
//when button clicked, remove selected item(s)
$("#" + removeButtonId).click(function (e) {
var selectedOpts = $('#' + toElementId + ' option:selected');
if (selectedOpts.length == 0) {
alert(noItemsToRemoveMessage);
e.preventDefault();
return;
}
selectedOpts.each(function () {
var textComponents = $(this).text().split(hiddenSeparator);
var textOnly = textComponents[0];
var newItem = $('<option>', { value: $(this).val(), text: textOnly });
$('#' + fromElementId).append(newItem);
if (selectNewItem) {
newItem.prop('selected', true);
}
});
$(selectedOpts).remove();
e.preventDefault();
});
});
// Setup/load initial selections
function SetupInitialSelections() {
var data = jQuery.parseJSON($("#" + savedSelectionsId).val());
$.each(data, function (id, item) {
var sourceItem = $("#" + fromElementId + " option[value='" + item.id + "']");
var newText = sourceItem.text() + hiddenSeparator + extraPrefix + item.attribute + extraSuffix;
$("#" + toElementId).append($("<option>", { value: sourceItem.val(), text: newText }));
sourceItem.remove();
});
}
// Save final selections
function SaveFinalSelections() {
var selectedItems = $("#" + toElementId + " option");
var values = $.map(selectedItems, function (option) {
var textComponents = option.text.split(hiddenSeparator);
var attribute = textComponents[1].substring(extraPrefix.length);
var attribute = attribute.substring(0, attribute.length - extraSuffix.length);
return '{"id":"' + option.value + '","attribute":"' + attribute + '"}';
});
$("#" + savedSelectionsId).val("[" + values + "]");
}
</script>

How to set events in HTML built from string?

I have used a Bootstrap dialog box to get a file input, where the user first selects the type and then selects the file - I want to limit the files by extension with regard to the type selected.
Bootstrap dialog is built by a string and I was thinking of adding an onchange event to the selector as in the following, which I hoped would update the extension in accept in file input - but it gives an error setType is not defined.
How can I correctly dynamically capture the selected type and set it in the accept in the input where the HTML is built from string?
JSFiddle
var HTMLmessage = 'Type: <select onchange="setType(this)"> ..Option list </select> <br> <input type="file" accept=' + getType() + '>';

You can simply use jQuery for this. and use on(change) event of jQuery.
Here is the FIDDLE.
Piece of code
$(document).on("change", '#load-file-type', function(event) {
getType = $(this).find('option:selected').attr('data-ext');
$('#load-file').attr('accept',getType); // simply using this you can set it in the `accept` in file input.
});
Which allow you to trigger event on change.

you need event delegation https://jsfiddle.net/0c3d0885/1/ . As you are modifing/adding element after DOMload
document.getElementById('load-file-type').onchange = function setType(op) {
console.log(op);
getType = op.dataset.dataExt;
}

You could use event bubbling to be able to capture elements that are created at runtime. Similar to jQuerys event delegation.
Here is what you could do.
var optionList = [{
name: "XML",
id: "xmlVAL",
extension: ".xml"
}, {
name: "JSON",
id: "jsonVAL",
extension: ".json"
}, {
name: "CSV",
id: "csvVAL",
extension: ".csv"
}];
var typeOptions = (function(arr) {
var str = "";
arr.map(function(type) {
var op = "<option value=" + type.id + " data-ext=" + type.extension + " >" + type.name + "</option>";
str += op;
});
return str;
})(optionList);
var getType = ".xml";
function setType(op) {
// console.log(op);
getType = op.dataset.dataExt;
}
var message = ' Type: <select id="load-file-type" >' + typeOptions + ' </select> <br> File: <input id="load-file" type="file" style="display:inline" accept=' + getType + ' >'
document.getElementById("result").addEventListener("change", function(event) {
var target = event.target;
if (target.tagName.toLowerCase() !== "select") {
return;
};
console.log(target.options[target.selectedIndex].dataset.ext);
});
document.getElementById("result").innerHTML = message;
<div id="result">
</div>

HTML5 Local Storage store form data for select box where multiple values are selected

I have a form which saves a users preferance in local storage, it can be seen in this fiddle or below.
With what I have so far there are 2 main problems.
On clicking the save button you are meant to empty the myStorage then append what you have just selected in there, so they can see the live result of what they have clicked. It only remembers if you re-run the fiddle.
My biggest problem is that what I have is great for select fields with one option but in this case the user can select multiple, so what do I need to add to it so that the user can save multiple values to local storage so next time they load the page there multiple selections will be saved?
<form name="Filter">
<select multiple="1" id="filter">
<option value="111">Andrew</option>
<option value="222">Bill</option>
<option value="333">Charles</option>
<option value="444">Dikembe</option>
<option value="555">Edward</option>
</select>
</form>
<div id="store">click to store</div>
<br>
<h3>People I have stored</h3>
<div id="myStorage"></div>
JS
var iSelectedTitle = localStorage.getItem('title');
var iSelectedVal = localStorage.getItem('value');
console.log("iSelectedTitle: " + iSelectedTitle);
console.log("iSelectedVal: " + iSelectedVal);
$("#filter option").each(function () {
if ($(this).val() == iSelectedVal) {
$(this).attr("selected", "selected");
}
});
$("#store").click(function () {
var mytitle = $("#filter option:selected").text();
var storedTitle = localStorage.setItem("title", mytitle);
console.log("mytitle: " + mytitle);
console.log("storedTitle: " + storedTitle);
var myValue = $("#filter option:selected").val();
var storedValue = localStorage.setItem("value", myValue);
console.log("myValue: " + myValue);
console.log("storedValue: " + storedValue);
if (iSelectedTitle != "undefined") {
$('#myStorage').empty().append(iSelectedTitle);
}
});
if (iSelectedTitle != "undefined") {
$('#myStorage').append(iSelectedTitle + ' - <a target= "_blank "href="http://www.example.com/' + iSelectedVal + '">View profile</a>');
}

You can add multiple options to an array using map of jQuery :
var optArray = $("#filter option:selected").map(function () {
return {
"title": this.innerHTML,
"value": this.value
}
}).get();
This will give you a nice array like this :
[
{ "title": "Andrew", "value": "111" },
{ "title": "Bill", "value": "222" },
{ "title": "Charles", "value": "333" }
]
For adding to localStorage :
$("#store").click(function () {
//get the selected options in the form of an array
var optArray = $("#filter option:selected").map(function () {
return {
"title": this.innerHTML,
"value": this.value
}
}).get();
console.log(optArray);
//set that to localStorage
localStorage["optArray"] = JSON.stringify(optArray);
//refresh myStorage
getFromStore();
});
For refreshing the myStorage container with your newly added people, you'll have to call this handler as the last event inside the `click event (above).
var getFromStore = function () {
//check if store values are null, if null, make store =[]
var store = [undefined, null].indexOf(localStorage["optArray"]) != -1 ? [] : JSON.parse(localStorage["optArray"]);
console.log(store);
//empty container before u put values
$('#myStorage').html('');
//check if store is empty
if (store.length != 0) {
//loop over store if it aint empty and append the content into myStorage div
for (var k in store) {
var str = '<div>' + store[k]["title"] + ' - <a target= "_blank" href="http://www.example.com/' + store[k]["value"] + '">View profile</a></div>';
console.log(store[k]);
$('#myStorage').append(str);
}
} else {
//do this if no data is found in localStorage
$("#myStorage").html("No people found in store");
}
}
Then, in DOM ready, call getFromStore to refresh myContainer on load of the page:
$(function() {
getFromStore();
})
Demo : http://jsfiddle.net/hungerpain/hqVGS/9/
EDIT
To select the checkboxes by default, add the folowing line in the getFromStore function :
$("[value=" + store[k]["value"] + "]","#filter").prop("selected", true); //find the option with the corresponding value and select it
Updated demo : http://jsfiddle.net/hungerpain/hqVGS/10/

You could save multiple values in an array,
var myValuesArr = ['one','two','three'];
The array would need to be serialized before it is saved to localStorage
var serialVals = JSON.stringify(myValuesArr);
localStorage.setItem('numbers',serialVals);
Likewise, the stored data will have to be unserialized after it is read back
var serialVals = localStorage.getItem('numbers');
var myValuesArr = JSON.parse(serialVals);

Passing variable name as id

I am appending the checkboxes in a particular class using some function.. I have a function to run everytime the checkbox is selected.. So I need to get the name and id of the Checkboxes..
Heres the part of the code where I am appending the checkbox dynamically.. Here value is the one I want the id and name attribute to be..

$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' onclick='selectMainBrand(\"" + value + "\");' />" + value + "</label>");
});

set the id using
$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append('<label class="checkbox"><input type="checkbox" id="' + value + '" onclick="selectMainBrand("' + value + '");" />' + value + '</label>');
});

function selectMainBrand(ids) {
$('#Brands').on("change", "input", function () {
console.log("called");
var selected = this.name;
console.log(selected);
});
}
I'm assuming your UL tag has id="brands". If not change the above code as follows
$('.fpblocks').on("change", "input", function () {

$.each(brandNameg, function(key, value) {
$(".fpblocks .fpblocksBrands_inner ul").append("<label class='checkbox'><input type='checkbox' id ='someID' name ='someName' />" + value + "</label>");
});
and on checkbox click..
$(".fpblocks .fpblocksBrands_inner ul :checkbox").live('click', function(){
var id = $(this).attr('id'); //get id of checked checkbox
var name = $(this).attr('name'); //get name of checked checkbox
})

remove onclick='selectMainBrand(value);' from inputs' generation code
After checkboxes are generated, you can select name and
$('#Brands input').on("change", function () {
var name=$(this).attr("name");
var id=$(this).attr("id");
alert(name);
alert(id);
console.log(selected);
});
see the DEMO http://jsfiddle.net/BbtEG/

Your dynamically created html (<input type='checkbox' onclick='selectMainBrand(value);' />) does not have a name, or an id. You cannot pass what doesn't exist. To solve this, generate a name and an id to use.
Also in your selectMainBrand function you don't appear to be using the ids parameter that you're passing in. All that function is doing is binding a handler to the input which, since you're using on to bind it, seems silly.
Why not use on to delegate the handler instead? If you delegate the handler, you can grab the name or id from within the handler thereby obviating the need to pass those in as parameters (working demo).
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key //set the id, appending the key to make it unique
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
//delegate the change handler
$('.fpblocks .fpblocksBrands_inner').on("change", '#Brands input', function (e) {
var selectedName = this.name,
selectedId = this.id,
isChecked = this.checked;
console.log(JSON.stringify({
"called": true,
"selectedName": selectedName,
"selectedId": selectedId,
"isChecked": isChecked
}));
});
If you truly have your heart set on passing in the parameters, there are ways to do that, such as binding the handler within the loop where you create the inputs (working demo):
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key //set the id, appending the key to make it unique
}).click(function (e) {
var self = $(this), // capture the input as a jQuery object (typically very useful)
actualHandler = function (id, name) {
// do stuff
console.log(JSON.stringify({
"called": "actualHandler",
"selectedName": id,
"selectedId": name,
"isChecked": self.prop('checked')
}));
};
actualHandler(this.id, this.name);
// or
actualHandler(self.attr('id'), self.attr('name'));
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
or you could set the onchange attribute in the loop where you create the inputs (working demo):
window.inputHandler = function (id, name) { // must be added to the global scope, otherwise it won't be visible.
// do stuff
console.log(JSON.stringify({
"called": "inputHandler",
"selectedName": id,
"selectedId": name
}));
};
$.each(brandNameg, function (key, value) {
var label = $('<label />').addClass('checkbox'),
input = $('<input />').attr({
"type": "checkbox",
"name": "mainBrand" + key, //set the name, appending the key to make it unique
"id": "mainBrand" + key, //set the id, appending the key to make it unique
"onchange": "inputHandler('" + "mainBrand" + key + "', '" + "mainBrand" + key + "')"
});
$(".fpblocks .fpblocksBrands_inner ul").append(label.append(input).append(value));
});
and there are other ways to go about it.
Personally, I would use the delegation.