Develop Reference

Suggest a way to store the value form csv into dropdown with javascript variable perform operations on it

<script> //script loading the csv and reading the files to out into an array of variables which are used in dropdown
var $csvData = [],
$colNames = [];
function _ReadCSV($a) {
var $f = $a.files[0];
if($f) {
var reader = new FileReader();
reader.onerror = function($e) {
div.innerHTML = 'The file can\'t be read! Error ' + $e.target.error.code;
}
reader.onload = function($e) {
var $data = $e.target.result.split("\n");
$colNames = $data[0].split(","); //split to separate the column inside the csv
$data.splice(0, 1);
for(var $b = 0; $b < $data.length; $b++) {
var $tmpJSON = {},
$colData = $data[$b].split(",");
for(var $c = 0; $c < $colData.length; $c++) $tmpJSON[$colNames[$c]] = $colData[$c];
$csvData.push($tmpJSON);
document.getElementById("try").innerHTML = "Value: "+ $colData; //just to check the value
}
_CreateDropdown();
}
reader.readAsText($f);
}
}
function _CreateDropdown() {
var $tmpHTML = '<select onchange="_UpdateFields(this.value)">';
for(var $a = 0; $a < $csvData.length; $a++) $tmpHTML += '<option value="' + $a + '">' + $csvData[$a][$colNames[0]] + '</option>';
$tmpHTML += '</select>';
document.getElementById("dropdown").innerHTML = $tmpHTML;
_UpdateFields(0);
}
function _UpdateFields($a) {
var $values = '';
for(var $b = 0; $b < $colNames.length; $b++) {
console.log($colNames[$b], $csvData[$a][$colNames[$b]]);
if($csvData[$a][$colNames[$b]] != "") $values += $colNames[$b] + ': <input id="' + $colNames[$b] + '" name="' + $colNames[$b] + '" type="text" value="' + $csvData[$a][$colNames[$b]] + '" /><br />';
}
document.getElementById("fields").innerHTML = $values;
}
window.onload = function() {
document.getElementById('fileBox').onchange = function(){ _ReadCSV(this); }
}
</script>
Currently I have two columns in csv and need to pick the value of one of the column item. Which is selected upon the dropdown selected by the user and then need to modify the value. The $values variable stores both the columns values.

Get the correspoding values from CSV

I need to solve one issue regarding csv. I have read all the values from csv (I have three fields like region,state,acc_name) and loaded into corresponding dropdown list.but my issue is if i select the region i need to get the corresponding state values from csv I have done something but not even get any single line code please help me to do that task.
My code is:
$(document).ready(function() {
// AJAX in the data file
$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function(data) {
processData(data);
}
});
// Let's process the data from the data file
function processData(data) {
var table = $("<table />");
var rows = data.split(/\r\n|\n/);
for (var i = 1; i < rows.length - 1; i++) {
var row = $("<tr />");
var cells = rows[i].split(/,(?=(?:[^\"]*\"[^\"]*\")*(?![^\"]*\"))/);
for (var j = 0; j < rows.length; j++) {
var cell = $("<td />");
cell.html(cells[j]);
row.append(cell);
}
var usedNames = {};
$("select[name='company1'] > option").each(function() {
if (usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
$("select[name='company2'] > option").each(function() {
if (usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
$("select[name='company3'] > option").each(function() {
if (usedNames[this.text]) {
$(this).remove();
} else {
usedNames[this.text] = this.value;
}
});
var newvalue = cells[1].replace("\"", "");
//var newvalue=cells[1].trim();
var final1 = newvalue.replace("\"", "");
var pandu = cells[0];
$("#region").append("<option value =" + cells[0] + "> " + cells[0] + " </option>");
$("#state").append("<option value =" + final1 + "> " + final1 + "</option>");
$("#accname").append("<option value =" + cells[2] + ">" + cells[2] + "</option>");
table.append(row);
}
}
});
function getstate()
{
...
}
HTML:
Region:
<select id="region" class="select" name="company1" onchange="getstate()"></select>
<br> State:
<select id="accname" class="select" name="company3"></select>
<br> Acct_Name:
<select id="state" class="select" name="company2"></select>
<br>

js wrong string output

I need to get correct valeu from this string, what I done wrong ?
var i = 0;
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';
var count = $($.parseHTML(pre)).filter('option').length;
console.log(pre);
for(i=0; i < count; i++){
var val_drop = $($.parseHTML(pre)).filter("option[value*='" + i + "']").val();
var text_drop = $($.parseHTML(pre)).filter("option[value*='" + i + "']").text();
console.log(val_drop);
}
the output is :
<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option><option value="0">NON</option>
20
19
20
but the correct output should be:
19
20
0

You dont need any function to do that
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';
$(pre).each(function(){
$('#result').append($(this).val()+" <-----> "+$(this).html()+"<br>");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">

Same approach:
var i = 0;
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">NON</option>';
var count = $($.parseHTML(pre)).filter('option').length;
$.each($.parseHTML(pre),function(i,item){
console.log($(item).val());
});
Working fiddle: https://jsfiddle.net/vhapd1un/

i did it with split(); see if it helps.
<script>
var i = 0;
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var pre = ret + '<option value="0">MON</option>';
var count = $($.parseHTML(pre)).filter('option').length;
console.log(count);
console.log(pre)
for(i=0; i < count+1; i++){
var val_drop = pre.split('<option value="');
val_drop = val_drop[i].split('"')[0];
console.log(val_drop);
}
</script>

First add elements option to a select`.
var ret = '<option value="19">Dep_01_01</option><option value="20">Dep_01_02</option>';
var options = ret + '<option value="0">MON</option>';
var elem_txt = '<select>' + options + '</select>'
// Get a DOM object
var elem = $.parseHTML(elem_txt)
var options = elem.find('option')
// for loop
for(var i=0; i<options.length; i++) {
console.log($(options[0]).val());
}
//jQuery each
options.each(function () {
console.log($(this).val());
})
You don't have to recreate DOM objects everytime using parseHTML.
In your test, the matching of [value*=...] seems to be matching the index as a string so you have:
this:
index: 0 -> 20 (0 is present)
index: 1 -> 19 (1 is present)
index: 2 -> 20 (2 is present)
I'm pretty sure that if you do from 0 to 3, you'll have problems with the 3 as nothing will match the css rule.

Total required in javascript

I have a query in javascript.. Please check the below image
In Above image :
First Input Box is Description
2nd Input Box is Qty
3rd is Value
I have got total qty using below script onchange of textbox :
function findTotal(){
var total = 0;
var $changeInputs = $('input.qtyValue');
$changeInputs.each(function(idx, el) {
total += Number($(el).val());
});
$('.total').text(total);
$("#totalvval").val(total);
}
I have got total Value using below :
function qfindTotal(){
var total = 0;
var $changeInputs = $('input.qqtyValue');
$changeInputs.each(function(idx, el) {
total += Number($(el).val());
});
$('.qtotal').text(total);
$("#totalqval").val(total);
if(total>10000){
alert("Amount should not be greater than 10000");
}
}
My query is that we need total of qty x value + qty x value + qty x value =total

You can try something like this:
Fiddle
Code
function createHTML() {
var html = "";
for (var i = 0; i < 3; i++) {
html += "<input type='text' class='qty' id='txtQty_" + i + "' onblur='updateTotal()' />";
html += "<input type='text' class='cost' id='txtQty_" + i + "' onblur='updateTotal()'/>";
html += "<br/>"
}
html += "Qty Total: <span id='qty_total'>0</span>";
html += "Cost Total: <span id='cost_total'>0</span>";
document.getElementById("content").innerHTML = html
}
function updateTotal() {
var qty = document.getElementsByClassName("qty");
var cost = document.getElementsByClassName("cost");
var total_qty = 0;
var total_cost = 0;
for (var i = 0; i < qty.length; i++) {
if (qty[i].value && cost[i].value) {
total_cost += qty[i].value * cost[i].value;
total_qty += parseInt(qty[i].value);
}
}
document.getElementById("qty_total").innerHTML = total_qty;
document.getElementById("cost_total").innerHTML = total_cost;
}
(function() {
createHTML();
})()
<div id="content"></div>

Creating a loop that populates a select tag

function buildOrder(data) {
var $fragment;
$fragment = $('<div/>');
for (var i = 0; i < data.length; i++) {
$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
}
$('#review-section').append($fragment);
}
I essentially want to add a tag with 50 options being dynamically created using a for loop. But I'm not sure what the syntax would be to add it to the <div class="row-container"/> I know in php I would just throw the loop in the middle and echo the options, however that doesnt work in javascript.
EDIT:
It would look like this:
$fragment.append('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><select><option value="1">1</option> etc...</select><div class="clear"></div></div>');

You could pass a function to .append and do your loop there:
$("<div>").append(function() {
var $select = $("<select>");
for(var i = 1; i <= 50; i++) {
$("<option>").text(i).val(i).appendTo($select);
}
return $select;
});
// returns a jQuery object with one div element (with children):
// <div>
// <select>
// <option value="1">1</option>
// ...
// </select>
// </div>
Mixed into your code it would be along the lines of:
var $fragment = $("<div>");
for (var i = 0; i < data.length; i++) {
var $container = $("<div>").addClass("row-container")
.appendTo($fragment);
$("<div>").addClass("row cupcake-row")
.text(data[i].name)
.appendTo($container);
$("<div>").append(function() {
var $select = $("<select>");
for(var i = 1; i <= 50; i++) {
$("<option>").text(i).val(i).appendTo($select);
}
return $select;
}).appendTo($container);
$("<div>").addClass("clear")
.appendTo($container);
}
$("#review-section").append($fragment);

Try something like this
function buildOrder(data) {
var $fragment = $('<div></div>');
var options = [];
for (var i = 0; i < data.length; i++) {
options.push('<div class="row-container"><div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div></div>');
}
$fragment.html(options.join("\n"));
$('#review-section').append($fragment);
}

According to your posted code:
function buildOrder(data) {
var $fragment;
$fragment = '<div><div class="row-container">';
for (var i = 0; i < data.length; i++) {
$fragment += '<div class="row cupcake-row">' + data[i].name + '</div><div class="clear"></div>';
}
$fragment += '</div></div>';
$('#review-section').append($fragment);
}
But in your posted code doesn't match with your post title, where you mentioned about select tag and in your code you're trying with div.
If you want to create a select, then something like:
function buildOrder(data) {
var $fragment;
$fragment = '<div class="row-container"><select>'; // taking select within your div
for (var i = 0; i < data.length; i++) {
// adding options to select
$fragment += '<option value="'+ data[i].name +'">' + data[i].name + '</option>';
}
$fragment += '</select></div>'; // end select and div
$('#review-section').append($fragment);
}