Develop Reference

Adding HTML form using JavaScript to get a total in text box

So for the final piece of my code, I need to add all the form values together and show a running total in a textbox underneath the 'table'. Is there a way using JavaScript that this can be done? I have my drop down boxes with values in them.
This is a snippet of my code:
function eraseText() {
var out = document.querySelectorAll(".out");
for (var i=0;i<out.length;i++) {
out[i].value="";
}
}
var sections = {
p1 : {sname: "Dynamic Table ", mscore: 20},
p2 : {sname: "IntelliJ Usage ", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form ", mscore: 20},
p5 : {sname: "Object Database ", mscore: 20}
};
document.write("<pre>");
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + (i>0?'<br><br><br><br>':'')
+ o.sname + ' '
+ o.mscore + ' '
+ '<textarea class="out" id="output" rows="4" cols="25"></textarea>'
+ ' '
+ '<select>'
+ '<option value="1">1</option>'
+ '<option value="2">2</option>'
+ '<option value="3">3</option>'
+ '</select>' }, '')
);
document.write("</pre>");

Something like this?
var selects = [].slice.call(document.querySelectorAll('select')); // [].slice.call turns NodeList into an array
var total = selects.reduce(function (previousValue, select) {
previousValue += select.options[select.selectedIndex].value || 0;
}, 0);
// ... then query for textbox, set the value of it to 'total'

You'd want to bind to the onchange event of each select, and recalculate the sum each time.
var output = document.getElementById('output'),
selects = document.querySelectorAll('select');
//helper method
function doToAll(elems, fn) {
var len = elems.length;
while (--len > -1) {
fn(elems[len]);
}
}
//sum values
function sumSelects() {
var sum = 0;
doToAll(selects, function(t) {
sum += parseInt(t.value);
});
return sum;
}
//bind to onchange event
doToAll(selects, function(t) {
t.addEventListener('change', function() {
output.textContent = sumSelects();
});
});
//run once on load
window.addEventListener('load', function() {
output.textContent = sumSelects();
});
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<select>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<p>The current total is
<span id="output"></span>
</p>

How to fetch particular record from XML dataset based on dropdown selection in javascript

XML FILE:
ss.xml
There are 12k records in xml file
<record id="R1">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>3 Row Band</Attribute2>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes>Satin</Finishes>
<SearchStyleNo>GR8138K-SS</SearchStyleNo>
<Month>June</Month>
<Year>2009</Year>
<TotalWeight>1.02</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R2">
<Imgpath>GR8138K-SS.jpg</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Ladies Ring</ProductCategory>
<SubCategory>Wedding Band</SubCategory>
<Attribute2> </Attribute2>
<DiamondWeightRange>0.29 - 0.35 cts</DiamondWeightRange>
<CenterStoneWeightRange> </CenterStoneWeightRange>
<CenterShape> </CenterShape>
<SideShape> </SideShape>
<CenterSetting> </CenterSetting>
<Finishes> </Finishes>
<SearchStyleNo>GMR048F-W</SearchStyleNo>
<Month>July</Month>
<Year>2008</Year>
<TotalWeight>0.3</TotalWeight>
<CenterStWeight> </CenterStWeight>
</record>
<record id="R3">
<Imgpath>GRB728K-W.JPG</Imgpath>
<Exclusives> </Exclusives>
<Collection> </Collection>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<DiamondWeightRange>0.96 - 1.10 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<SearchStyleNo>GRB728K-W</SearchStyleNo>
<Month>August</Month>
<Year>2008</Year>
<TotalWeight>0.97</TotalWeight>
</record>
<record id="R4">
<Imgpath>GRF001D-X.jpg</Imgpath>
<ProductCategory>Mens Ring</ProductCategory>
<SubCategory>Left Hand Mens Ring</SubCategory>
<Attribute2>7 Stone Band, Combination of Metal</Attribute2>
<DiamondWeightRange>0.16 - 0.18 cts</DiamondWeightRange>
<CenterShape>Round</CenterShape>
<Finishes>Satin</Finishes>
<SearchStyleNo>GRF001D-X</SearchStyleNo>
<Month>September</Month>
<Year>2008</Year>
<TotalWeight>0.18</TotalWeight>
</record>
JavaScript:
To load xml data
<script type="text/javascript">
function loadXMLDoc(dname) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
async: false
xhttp.open("GET", dname, false);
xhttp.send();
return xhttp.responseXML;
}
$(document).ready(function () {
try {
xmlDoc = loadXMLDoc("ss.xml");
x = xmlDoc.getElementsByTagName("record");
//For every element, loop
var col = 4;
var total = x.length;
var row = Math.ceil(x.length / 4);
var table = $('<table></table>');
for (r = 0; r <= row; r++) {
var rowtr = $('<tr></tr>');
var t = 0;
if (r == 0) {
t == r;
}
else {
var t = (r * 4) + 1;
}
if (total - t >= col) {
col = 4;
}
else {
col = total - t;
}
for (c = 0; c < col; c++) {
var imgpath = xmlDoc.getElementsByTagName("Imgpath")[t].childNodes[0].nodeValue;
var exc = xmlDoc.getElementsByTagName("Exclusives")[t].childNodes[0].nodeValue;
var coll = xmlDoc.getElementsByTagName("Collection")[t].childNodes[0].nodeValue;
// alert(coll);
var Pcat = xmlDoc.getElementsByTagName("ProductCategory")[t].childNodes[0].nodeValue;
var Scat = xmlDoc.getElementsByTagName("SubCategory")[t].childNodes[0].nodeValue;
var Att = xmlDoc.getElementsByTagName("Attribute2")[t].childNodes[0].nodeValue;
var DiaWtRange = xmlDoc.getElementsByTagName("DiamondWeightRange")[t].childNodes[0].nodeValue;
var CenStoneRange = xmlDoc.getElementsByTagName("CenterStoneWeightRange")[t].childNodes[0].nodeValue;
var CenShape = xmlDoc.getElementsByTagName("CenterShape")[t].childNodes[0].nodeValue;
var SShape = xmlDoc.getElementsByTagName("SideShape")[t].childNodes[0].nodeValue;
var CenSetting = xmlDoc.getElementsByTagName("CenterSetting")[t].childNodes[0].nodeValue;
var Fin = xmlDoc.getElementsByTagName("Finishes")[t].childNodes[0].nodeValue;
var SSNo = xmlDoc.getElementsByTagName("SearchStyleNo")[t].childNodes[0].nodeValue;
var Mon = xmlDoc.getElementsByTagName("Month")[t].childNodes[0].nodeValue;
var Yr = xmlDoc.getElementsByTagName("Year")[t].childNodes[0].nodeValue;
var TotWeight = xmlDoc.getElementsByTagName("TotalWeight")[t].childNodes[0].nodeValue;
var CenStWeight = xmlDoc.getElementsByTagName("CenterStWeight")[t].childNodes[0].nodeValue;
rowtr.append('<td><img src="' + imgpath + '" height="200px" width="200px" class="zoom_img"/><br/> Style No: ' + SSNo + '<br/> Product: ' + Pcat + '<br/> Category: ' + Scat + '<br/> Center stone weight: ' + CenStWeight + '<br/> Total weight: ' + TotWeight + '<br/>' + '<input type="button" value="Add to Selection" style="border-radius: 5px;" onclick="' + AddtoCart(imgpath, exc, coll, Pcat, Scat, Att, DiaWtRange, CenStoneRange, CenShape, SShape, CenSetting, Fin, SSNo, Mon, Yr, TotWeight, CenStWeight) + '"class="cart"/> </td>');
t = t + 1;
};
table.append(rowtr);
};
$('#dvContent').append(table);
} catch (e) {
alert(e.message);
}
});
</script>
Html :
Here is dropdown shape.
when we select value "Oval", it filters xml dataset and display those record having center shape "Oval". similarly for other filters.
simply filters the record based on particular tagname.
<select class="form-control" id="DdlCshape">
<option value=""> Select Center Shape </option>
<option value="Baguette"> Baguette </option>
<option value="Cushion"> Cushion </option>
<option value="Emerald"> Emerald </option>
<option value="Marquise"> Marquise </option>
<option value="Oval"> Oval </option>
<option value="Pear"> Pear </option>
<option value="Princess"> Princess </option>
<option value="Radiant"> Radiant </option>
<option value="Round"> Round </option>
<option value="Tapper"> Tapper </option>
</select>
<select class="form-control" id="DdlCSWeight>
<option value="">Select Center Stone Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
</select>
<select class="form-control" id="DdlWeight_Range">
<option value=""> Select Diamond Weight Range </option>
<option value="0.01 - 0.05 cts">0.01 - 0.05 cts</option>
<option value="0.11 - 0.15 cts">0.11 - 0.15 cts</option>
<option value="0.19 - 0.22 cts">0.19 - 0.22 cts</option>
<option value="0.23 - 0.28 cts">0.23 - 0.28 cts</option>
<option value="0.29 - 0.35 cts">0.29 - 0.35 cts</option>
<option value="0.36 - 0.45 cts">0.36 - 0.45 cts</option>
<option value="0.46 - 0.55 cts">0.46 - 0.55 cts</option>
<option value="0.56 - 0.65 cts">0.56 - 0.65 cts</option>
<option value="0.66 - 0.78 cts">0.66 - 0.78 cts</option>
<option value="0.96 - 1.10 cts">0.96 - 1.10 cts</option>
<option value="1.11 - 1.78 cts">1.11 - 1.78 cts</option>
<option value="1.79 - 2.10 cts">1.79 - 2.10 cts</option>
<option value="2.29 - 2.78 cts">2.29 - 2.78 cts</option>
</select>

Cascading Dropdown is not working using jquery

by the way i just got the js code from one of the questions here but i don't why it will not work on mine. please help me.
.js file
jQuery(function ($) {
var College = {
'College of Engineering': ['Civil Engineering', 'Computer Engineering', 'Electronics and Communication Engineering', 'Electrical Engineering', 'Industrial Engineering'],
}
var $College = $('#college');
$('#department').change(function () {
var department = $(this).val(), clg = College[department] || [];
var html = $.map(clg, function (cl) {
return '<option value="' + cl + '">' + cl + '</option>'
}).join('');
$College.html(html)
});
});
is my code wrong? i dont know why it will not work.
the html code for this is
<select class="form-control" name="college" id="college" runat="server">
<option value="College">Select College</option>
<option value="College of Engineering">College of Engineering</option>
<option value="CAS">College of Arts and Science</option>
<option value="Commerce">College of Commerce</option>
</select>
<select id="department" class="form-control" runat="server" placeholder="Department" >
<option value="Department">Select Department</option>
</select>

You could do something like this: https://jsfiddle.net/rockmandew/12ej2rt3/
Set your HTML Markup like so: (*this example contains a three step dropdown selection)
<select id="main_list">
<option value="default" selected>Select Your List</option>
<option value="mobile">mobile list</option>
<option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>
Then the JS as follows:
$(function() {
var sel, i,
list = ['mobile', 'laptop'],
phone = ['Samsung', 'Nokia'],
laptop = ['HP', 'Dell'],
android = ['4.1', '4.2'],
windows = ['8', '8.1'],
dev_default = '<option value="default" selected>Select your Device brand</option>',
os_default = '<option value="default" selected>Select your OS version</option>';
sel_brand = $('#brand');
sel_version = $('#version');
$('select').change(function() {
switch (this.id) {
case 'main_list':
$('.secondary').hide();
sel_brand.find('option').remove();
sel_brand.append(dev_default);
sel_brand.show();
if (this.value == 'mobile') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + phone[i] + '">' + phone[i] + '</option>'
);
}
}else if (this.value == 'laptop') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
);
}
}
break;
case 'brand':
sel_version.find('option').remove();
sel_version.append(os_default);
sel_version.show();
if (this.value == 'Samsung') {
for (i = 0; i < android.length; i++) {
$("#version").append(
'<option value="' + android[i] + '">' + android[i] + '</option>'
);
}
}else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
for (i = 0; i < windows.length; i++) {
$("#version").append(
'<option value="' + windows[i] + '">' + windows[i] + '</option>'
);
}
}
break;
}
});
}); //END document.ready()
Also, if you need/want more information on how to populate these dropdowns dynamically from either a text file, JSON, or a database - check out this article: https://css-tricks.com/dynamic-dropdowns/

how to get the dropdown selected default values in another div as a simple text

i have dropdown to select current month and year, i am getting the values properly.
now i need to pass that values into some other div
how to get the dropdown selected default values in another div as a simple text??
it should change if selected values change
Fiddle to describe
http://jsfiddle.net/k1v7ga49/1/
Dropdowns
<select name="one" class=" select1" id="ddlYear">
<option value="-1">Select Year</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
</select>
<select name="two" class="select2" id="ddlMonth">
<option value="-1">Select Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
javascript
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = ($("option:selected", $('.select1')).text());
if (selectedYear != "Select Year") {
selectedMonth = ($("option:selected", this).text());
loadData(selectedYear, selectedMonth);
}
});
i want selected values in this div (in #monthValue)
<div class="placer"> Current timeperiod is :
<div id="monthValue"></div>
</div>
MY EXPECTED RESULT: Current timeperiod is :2014 OCTOBER

$('.select2, .select1').on('change', function () {
var selectedYear = $('.select1').val();
if (selectedYear != "Select Year") {
selectedMonth = $('.select2').val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth)
}
}).trigger('change');
And to make the displayed values inline add this to the CSS
#monthValue {
display:inline-block;
}
http://jsfiddle.net/Spokey/k1v7ga49/4/

If i got you right you have to just use .text()
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
Fiddle

I made a jsbin for ya, at http://jsbin.com/kidujoxidoku/1/edit
I feel as if you were making your checking of each select element's value too complicated. Simply using the jQuery's val() function should be all you need.
The code is also below for reference.
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear(),
loadData = function(year, month) {
$('.placer #monthValue').html(year + " " +month);
};
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
var selectedYear = $('.select1').val(), selectedMonth;
if (selectedYear != "Select Year") {
selectedMonth = $(this).val();
loadData(selectedYear, selectedMonth);
}
});

Just use check of existance of selected data. This is working code, so you can just copy/paste ;)
var d = new Date(),
month = d.getMonth() + 1,
year = d.getFullYear();
$('.select2 option:eq(' + month + ')').prop('selected', true);
$('.select1').val(year);
$('.select2').on('change', function () {
if ($(".select1 option:selected") && $(this).find("option:selected"))
var selectedYear = $(".select1").val();
selectedMonth = $(this).val();
$('#monthValue').text(selectedYear + ' ' + selectedMonth);
}
});

Reading data from text file and store it in html table using PHP

I have a text file that contains data that looks like being formatted in a table. But they are just ordered lines of text made to resemble a table. I am trying to read the text file, get data and store in HTML table.
The text file looks like:
Sl.No., Project Name, ChangeDate, Changed By
01, 01, 02, 03
02, 04, 05, 06
03, 07, 08, 09
04, 10, 11, 12
05, 13, 14, 15
06, 16, 17, 18
07, 19, 20, 21
08, 22, 23, 24
09, 25, 26, 27
010, 28, 29, 30
011, 31, 32, 33
012, 34, 35, 36
013, 37, 38, 39
014, 40, 41, 42
015, 43, 44, 45
016, 46, 47, 48
017, 49, 50, 51
018, 52, 53, 54
019, 55, 56, 57
020, 58, 59, 60
I used this code to create the html table, looks like:
<html>
<script>
function makeTable()
{
var row_num = 20;
var cell_num = 4;
var tab = document.createElement('table');
tab.setAttribute('id','newtable');
var tbo = document.createElement('tbody');
tbo.setAttribute('id','tabody');
var cont;
for(var c = 0 ; c < row_num ; c++)
{
var row = document.createElement('tr');
for(var k = 0 ; k < cell_num ; k++)
{
var cell = document.createElement('td');
if (k > 0)
{
cont = document.createElement("input");
cont.setAttribute('type','text');
}
else
{
cont = document.createTextNode("0" + (c+1));
}
cell.appendChild(cont);
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
document.body.appendChild(tab);
tab.setAttribute("align", "top-left");
}
window.onload = function()
{
makeTable();
};
function GetCellValues()
{
var str = '';
var rows = document.getElementsByTagName('tr');
var table=document.getElementById("project");
for (var i=0;i<table.rows[0].cells.length;i++)
{
if (i > 2 )
{
str = str + table.rows[0].cells[3].innerHTML.replace(", ");
}
else
{
str = str + (table.rows[0].cells[i].innerHTML) + ', ' ;
}
}
for (var c = 1 ; c < rows.length ; c++)
{
str += '\n' + "0" + c + ', ';
var row = rows[c];
var inputs = row.getElementsByTagName('input');
for (var k = 0 ; k < inputs.length ; k++)
if (k > 1)
{
str += inputs[k].value.replace(", ");
}
else
{
str += inputs[k].value + ', ';
}
}
document.getElementById('hide').value = str;
}
</script>
</head>
<body>
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<input type="hidden" id="hide" name="hide" value="">
<input type="submit" name="submit" onclick = "GetCellValues()" />
<table id = "project" border = "1" width ="60%" class = "newtable" cellpadding="10" cellspacing="0">
<tr>
<th align="center" width ="200px" id = "Sl.No." >Sl.No.</th>
<th align="center" width ="200px" id = "Project Name" >Project Name</th>
<th align="center" width ="200px" id = "ChangeDate" >ChangeDate</th>
<th align="center" width ="200px" id = "Changed By" >Changed By</th>
</tr>
</form>
</body>
</html>
Now I want to store this text file in this table.
I used this code to retrieve the data from table and store it in txt file:
<?php
$handle = fopen("data.txt", "w");
$hide =$_REQUEST['hide'];
fwrite($handle,$hide);
echo $hide;
?>
I used this code to convert txt file into array:
<?php
$text = file_get_contents("data.csv");
$fixed_text = str_replace("\n", "<br>", $text);
echo '<pre>';
print_r ( explode( ',', $fixed_text ) );
echo '</pre>';
//echo ( explode( ',', $fixed_text ) );
//echo $fixed_text;
?>
Now I want to store this text file data into table.
How can I store this text file data into table?