"Undefined" shown in last column while populating JSON data

"Undefined" shown in last column while populating JSON data - javascript

I have converted a csv to JSON object and have populated it on a html table. Rest of the columns are fine but the last column of the table shows 'Undefined'. CSV file -
The table displayed as-
What is the problem here?
HTML file-
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<title>Japan Automation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"> </script>
<!--<script type="text/javascript" src="JavaScript.js"></script>-->
<script type="text/javascript" src="JavaScript4.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
th {
text-align: left;
}
table {
border-spacing: 5px;
}
.guide {
text-decoration: underline;
text-align: center;
}
.odd {
color: #fff;
background: #666;
}
.even {
color: #666;
}
.hot {
border: 1px solid #f00;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Global Order Visibility</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Japan Automation Tool</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">
<form id="form1" runat="server" class="form-horizontal">
<div class="form-group">
<div class="col-sm-5">
<div class="col-sm-6">
<input type="file" accept=".csv" id="fileUpload" />
</div>
<div class="col-sm-6">
<input type="button" id="upload" class="btn btn-primary" value="Upload" />
</div>
</div>
<div class="col-sm-7">
<div class="col-sm-2">
<input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" />
</div>
<div class="col-sm-2">
<input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" />
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default" style="align-self: center">
<div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;">
<div class="row">
<div class="col-sm-12">
<center>
<div class="input-append" id="filterDev" style="visibility:hidden">
<input name="search" id="inputFilter" placeholder="Enter ID to filter" />
<input type="button" value="Filter" id="filter" class="btn btn-primary" />
</div></center>
</div>
<br />
<br />
</div>
<div class="row">
<div class="col-sm-12" id="dvCSV">
<table id="my-table">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p id="download" style="color: cornflowerblue; visibility: hidden"><strong>Please click the below links to download the processed file..</strong></p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3">
<p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File1 Download</p>
</div>
<div class="col-sm-3">
<p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden">File2 Download</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$("#cancel").on("click", function () {
$('input:checked').each(function () {
$(this).closest("tr").remove();
});
});
$(function () {
$("#process").bind("click", function () {
document.getElementById("File1").style.visibility = "visible";
document.getElementById("File2").style.visibility = "visible";
document.getElementById("download").style.visibility = "visible";
});
});
$("#filter").click(function () {
ids = $("#inputFilter").val();
if (ids != "") {
idsArray = ids.split(",");
$("#my-table tr:gt(0)").hide();
$.each(idsArray, function (i, v) {
$("#my-table tr[data-id=" + v + "]").show();
})
} else {
$("#my-table tr").show();
}
});
</script>
JavaScript4.js
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
//var table = $("<table id='name'/>");
var lines = e.target.result.split("\n");
var result = [];
var headers = lines[0].split(",");
//alert(headers);
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
populateTable(result);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
}
reader.readAsText($("#fileUpload")[0].files[0]);
}
}
});
});
$(function () {
$("#process").bind("click", function () {
document.getElementById("File1").style.visibility = "visible";
document.getElementById("File2").style.visibility = "visible";
});
});
function populateTable(finalObject) {
var obj = finalObject;
var table = $("<table id='my-table' />");
table[0].border = "1";
var columns = Object.keys(obj[0]);
var columnCount = columns.length;
var row = $(table[0].insertRow(-1));
for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html([columns[i]]);
row.append(headerCell);
}
$.each(obj, function (i, obj) {
//row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
table.append(row);
});
var dvTable = $("#dvCSV");
dvTable.html("");
dvTable.append(table);
}

UPDATE ...
Line breaks where messing up with the ADDRESS property. Just remove all line breaks before using the strings and you will be fine:
var headers = lines[0].split(",");
for (var i = 1; i < headers.length; i++) {
var header = headers[i];
header = header.replace(/(\r\n|\n|\r)/gm,"");
headers[i] = header;
}
DEMO: http://jsbin.com/hatasaf/3/edit?js,output
I really could not find out why the ADDRESS property was being wrapped around quotes and being inaccessible, but an array fixed the problem ...
I'll investigate more to isolate the issue but for your purposes just use the code in the demo http://jsbin.com/hatasaf/2/edit?js,output
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileUpload").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var lines = e.target.result.split("\n");
var result = [];
for (var i = 0; i < lines.length; i++) {
var arr = [];
var currentline = lines[i].split(",");
for (var j = 0; j < currentline.length; j++) {
arr.push(currentline[j]);
}
result.push(arr);
}
populateTable(result);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
}
reader.readAsText($("#fileUpload")[0].files[0]);
}
}
});
function populateTable(finalArray) {
var table = $("<table id='my-table' />");
table[0].border = "1";
var columns = finalArray[0];
var columnCount = columns.length;
var row = $(table[0].insertRow(-1));
for (var j = 0; j < columns.length; j++) {
var headerCell = $("<th>").text([columns[j]]);
row.append(headerCell);
}
for (var i = 1; i < finalArray.length; i++) {
var item = finalArray[i];
row = '<tr data-id="' + item[0] + '"><td>' + item[0] + '</td><td>' + item[1] + '</td><td>' + item[2] + '</td><td>' + item[3] + '</td></tr>';
table.append(row);
};
var dvTable = $("#dvCSV");
dvTable.html("");
dvTable.append(table);
}

Related

form with dynamic time intervals and depending disabledTimeIntervals-settings

Using eonasdan/bootstrapdatetimepicker, I try to solve this:
How to set disabledTimeIntervals, minDate and maxDate for each dynamically created time-input-field? minDate and maxDate has to be set to the corresponding field, while disabledTimeIntervals has to be set to all fields, except the edited fields - also on every edit.
I do not have any glue to get this done.
Has anyone a solution for this?
$(document).ready(function() {
$("#timeday0from").datetimepicker({
format: "LT",
allowInputToggle: true,
ignoreReadonly: true
});
$("#timeday0until").datetimepicker({
format: "LT",
allowInputToggle: true,
ignoreReadonly: true
});
$("#timeday0from").on("dp.change", function(e) {
$("#timeday0until")
.data("DateTimePicker")
.minDate(e.date);
});
$("#timeday0until").on("dp.change", function(e) {
$("#timeday0from")
.data("DateTimePicker")
.maxDate(e.date);
});
});
var i = 0;
var day = "day_";
var original = document.getElementById(day + i);
function duplicateElement() {
var clone = original.cloneNode(true);
i++;
clone.id = day + i; // there can only be one element with an ID
clone.childNodes;
for (var input of $(".timeday0from", clone)) {
input.id = "time" + clone.id + "from";
}
for (var input of $(".timeday0until", clone)) {
input.id = "time" + clone.id + "until";
}
for (var select of $(".timeday0type", clone)) {
select.id = "time" + clone.id + "info";
}
for (var input of $(".timeday0from", clone)) {
input.name = "time[" + day + "][" + i + "][from]";
}
for (var input of $(".timeday0until", clone)) {
input.name = "time[" + day + "][" + i + "][until]";
}
for (var select of $(".timeday0type", clone)) {
select.name = "time[" + day + "][" + i + "][type]";
}
for (var input of $(".timeday0from", clone)) {
input.value = "";
}
for (var input of $(".timeday0until", clone)) {
input.value = "";
}
for (var select of $(".timeday0type", clone)) {
select.value = "";
}
original.parentNode.appendChild(clone);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 col-md-12">
<div class="well">
<h3>Day</h3>
<div class="row" id="day_0">
<div class="form-group col-sm-4 col-xs-6">
<label for="timeday0from" class="control-label">Interval starts</label>
<div class='input-group date' id='timeday0from'>
<input type="text" class="form-control datepicker timeday0from" name="time[day][0][from]" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="form-group col-sm-4 col-xs-6">
<label for="timeday0until" class="control-label">Interval ends</label>
<div class='input-group date' id='timeday0until'>
<input type="text" class="form-control datepicker timeday0until" name="time[day][0][until]" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="form-group col-sm-4 col-xs-12">
<label for="timeday0info" class="control-label">Interval-Option</label>
<select name="time[day][0][info]" class="form-control timeday0type" id="timeday0info">
<option>Bitte auswählen</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" onclick="duplicateElement();"><span class="glyphicon glyphicon-plus"></span></button>
Creating works. But I do not have any idea, how to set maxDate, minDate and disabledTimeIntervals (overlapping of ranges should prevented) on clone/remove of elemen and update of a time-field.

What a mess - but it works!
$.fn.datetimepicker.defaults.tooltips = {
today: 'Heute',
clear: 'Auswahl leeren',
incrementMinute: 'später',
decrementMinute: 'früher',
incrementHour: 'später',
decrementHour: 'früher',
pickHour: 'Stunde wählen',
pickMinute: 'Minute wählen'
};
$.fn.datetimepicker.defaults.useCurrent = false;
$.fn.datetimepicker.defaults.ignoreReadonly = true;
$.fn.datetimepicker.defaults.allowInputToggle = true;
$.fn.datetimepicker.defaults.locale = 'de';
$.fn.datetimepicker.defaults.showClear = true;
$(document).ready(function() {
initDateTimePair('day',0);
updateMin('day',0);
updateMax('day',0);
});
var i = 0;
var original = document.getElementById('day' +'_'+ i);
function initDateTimePair(day, item){
$("#time"+day+item+"from").datetimepicker({
format: "LT",
allowInputToggle: true,
ignoreReadonly: true
});
$("#time"+day+item+"until").datetimepicker({
format: "LT",
allowInputToggle: true,
ignoreReadonly: true
});
}
function updateMax(day, item){
$("#time"+day+item+"from").on("dp.change", function(e) {
$("#time"+day+item+"until").data("DateTimePicker").minDate(e.date);
if($('#time'+day+item+'until').data("DateTimePicker")){
updateDisabledTimes(day, item);
}
});
}
function updateMin(day, item){
$("#time"+day+item+"until").on("dp.change", function(e) {
$("#time"+day+item+"from").data("DateTimePicker").maxDate(e.date);
if($('#time'+day+item+'from').data("DateTimePicker")){
updateDisabledTimes(day, item);
}
});
}
function initDisabledTimes(day, item){
var arr = collectDisabledTime(day, null);
$('#time'+day+item+'from').data("DateTimePicker").disabledTimeIntervals(arr);
$('#time'+day+item+'until').data("DateTimePicker").disabledTimeIntervals(arr);
}
function updateDisabledTimes(day, item){
for(l=0; l<=i; l++) {
var arr = collectDisabledTime(day, item);
if(l!=item){
$('#time'+day+l+'from').data("DateTimePicker").disabledTimeIntervals(arr);
$('#time'+day+l+'until').data("DateTimePicker").disabledTimeIntervals(arr);
}
}
}
function collectDisabledTime(day, item){
var arr = [];
for(j=0; j<=i; j++){
if(j!=item){
var from = $('#time'+day+j+'from').data("DateTimePicker");
var until = $('#time'+day+j+'until').data("DateTimePicker");
if(until !== undefined && until.date() !== null && from !== undefined && from.date() !== null){
arr.push([$('#time'+day+j+'from').data("DateTimePicker").date().add(1,'minute'), $('#time'+day+j+'until').data("DateTimePicker").date().add(-1,'minute')]);
}
}
}
return arr;
}
function duplicateElement(day) {
var clone = original.cloneNode(true);
i++;
clone.id = day + '_' + i; // there can only be one element with an ID
clone.childNodes;
for (var input of $(".time"+day+"from", clone)) {
input.id = "time" + day + i + "from";
}
for (var input of $(".time"+day+"until", clone)) {
input.id = "time" + day + i + "until";
}
for (var select of $(".time"+day+"type", clone)) {
select.id = "time" + day + i + "info";
}
for (var input of $(".time"+day+"from", clone)) {
input.name = "time[" + day + "][" + i + "][from]";
}
for (var input of $(".time"+day+"until", clone)) {
input.name = "time[" + day + "][" + i + "][until]";
}
for (var select of $(".time"+day+"type", clone)) {
select.name = "time[" + day + "][" + i + "][type]";
}
for (var input of $(".time"+day+"from", clone)) {
input.value = "";
}
for (var input of $(".time"+day+"until", clone)) {
input.value = "";
}
for (var select of $(".time"+day+"type", clone)) {
select.value = "-1";
}
original.parentNode.appendChild(clone);
initDateTimePair(day, i);
updateMin(day, i);
updateMax(day, i);
initDisabledTimes(day, i);
updateDisabledTimes(day, i);
console.log($('#timeday'+i+'from').data("DateTimePicker").disabledTimeIntervals())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/de.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-6 col-md-12">
<div class="well">
<h3>Day</h3>
<div class="row" id="day_0">
<div class="form-group col-sm-4 col-xs-6">
<label for="timeday0from" class="control-label">Interval starts</label>
<div class='input-group date' id='timeday0from'>
<input type="text" class="form-control datepicker timedayfrom" name="time[day][0][from]" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="form-group col-sm-4 col-xs-6">
<label for="timeday0until" class="control-label">Interval ends</label>
<div class='input-group date' id='timeday0until'>
<input type="text" class="form-control datepicker timedayuntil" name="time[day][0][until]" readonly="readonly"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<div class="form-group col-sm-4 col-xs-12">
<label for="timeday0info" class="control-label">Interval-Option</label>
<select name="time[day][0][info]" class="form-control timedaytype" id="timeday0info">
<option value="-1">Bitte auswählen</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default" onclick="duplicateElement('day');"><span class="glyphicon glyphicon-plus"></span></button>

Generate Header for txt file

I am generating a default header for a given file and I want the sender ID to have 4 characters and the sender Name to have 45 characters. if they are less than 4 and 45 respectfully, I need to enter spaces to have the 4 or 45 characters. How can I do this?
In the figure below as you can see there are not filled in the necessary spaces for when I do blank file. And even if I write something on the sender ID or the sender Name nothing is added.
What am I doing wrong?
function download(fileName, text) {
let element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', fileName);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
document.getElementById("generate").addEventListener("click", function(){
// Generate .txt file header
//force 4 chars
let id = document.getElementById("senderID");
if (id.textContent.length < 4) {
id.textContent += ' ';
}
//force 45 chars
let name = document.getElementById("senderName");
if (name.textContent.length < 45) {
name.textContent += ' ';
}
let header = "HDRPB" + id.textContent + name + "01.10";
let body = document.getElementById("fileContents").textContent;
let text = header;
let fileName = document.getElementById("fileName").value + ".txt";
download(fileName, text);
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/site.css">
<title>Generator</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2 p-0 mt-2">
<label for="senderID" class="font-weight-bold">Sender ID:</label>
<input id="senderID" type="text" maxlength="4" size="4"/>
</div>
<div class="col-6 p-0 mt-2">
<label for="senderName" class="font-weight-bold">Sender Name:</label>
<input id="senderName" type="text" maxlength="45" size="45"/>
</div>
</div>
<div class="row mt-5">
<div class="col-10">
<label for="fileName" class="font-weight-bold">File Name:</label>
<input id="fileName" type="text"/>
</div>
<div class="col-2">
<button id="generate" type="button" class="btn btn-light font-weight-bold mx-auto">Generate File</button>
</div>
</div>
<div id="fileContents" class=""></div>
</div>
<script src="js/app.js"></script>
</body>
</html>

Consider the following code:
function genId(seed) {
var result = new Array(4);
for (var i = 0; i < 4; i++) {
result[i] = seed[i] || " ";
}
return result.join("");
}
function genName(seed) {
var result = new Array(45);
for (var c = 0; c < 45; c++) {
result[c] = seed[c] || " ";
}
return result.join("");
}
document.getElementById("genHead").addEventListener("click", function() {
var i = document.getElementById("hid").value;
var n = document.getElementById("hname").value;
var header = genId(i) + genName(n);
document.getElementById("results").innerHTML = header;
});
#results {
font-family: monospace;
border: 1px solid #ccc;
display: inline-block;
}
<p>ID: <input type="text" id="hid" /></p>
<p>Name: <input type="" id="hname" /></p>
<button id="genHead">Generate Header</button>
<div id="results"></div>
In this example, I am creating an Array of the specific number of characters. String is considered an Array of Characters anyway. I am using $nbsp; to represent spaces in HTML but you can use ' ' or " ".
There will always be a result due to result[c] = seed[c] || " "; If seed has a character in that position, it will be entered into result at the same position. Otherwise it will enter the No Break Space or the character you want.
You can also do this:
function formatText(t, n, c) {
if(t == undefined){
return "";
}
if(n == undefined){
n = 45;
}
if(c == undefined){
c = " ";
}
var r = new Array(n);
for (var i = 0; i < n; i++) {
r[i] = t[i] || c;
}
return r.join("");
}
Then use like so:
var i = formatText("12", 4, " ");
var n = formatText("test", 45, " ");
Hope this helps.

How can I make the user add a new field using a button using javascript?

I have a script posted down below, and I want the user to add a new field, when the new field gets added I want a new var to be added.
Live example:
User clicks on the "add new field"
var gets added below var Reason2 called Reason3, Reason4, etc.
"Reason Three: " +Reason3+ gets added below Reason Two on line 51.
I don't have an idea of how to do the above honestly.
<!DOCTYPE html>
<html lang="en">
<form name="TRF" method="post">
<p style="color:white">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1 class="text-center">Accepted Format</h1>
<hr>
<div class="row">
<h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
<table style="width:100%" id="theTable">
<tr>
<td>Applicant's Name:</td>
<td><input type="text" name="accname" size="75" placeholder="" required></td>
</tr>
<tr>
<td>Reason 1:</td>
<td><input type="text" name="R1" size="75" placeholder="" required></td>
</tr>
<tr>
<td id="bla">Reason 2:</td>
<td><input type="text" name="R2" size="75" placeholder="" required></td>
</tr>
</table>
<h3>CODE:</h3>
<textarea id="box" cols="100" rows="10"></textarea>
<p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>
</div>
<button id="newField">
add new field
</button>
</center>
</div>
</div>
</div>
</div>
<html>
<head>
<script>
function generateCode2() {
var AccoutName = document.forms["TRF"]["accname"].value;
var Reason1 = document.forms["TRF"]["R1"].value;
var Reason2 = document.forms["TRF"]["R2"].value;
document.getElementById("box").value =
"[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]"+
"[hr]"+
"\n"+
"[b]Dear[/b] "+AccoutName+
"\n"+
"After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. "+
"\n"+
"Reason One: " +Reason1+
"\n"+
"Reason Two: " +Reason2+
"\n"+
"Welcome to the Family. "+
"\n"+
""
}
var newField = document.getElementById("newField");
var counter = 3;
function createNewField() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "Reason " + counter + ":";
var inp = document.createElement("input");
inp.type = "text";
inp.size = "75";
inp.name = "R" + counter;
inp.value=document.getElementById("box").value;
td2.appendChild(inp);
document.getElementById("theTable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
counter++;
}
newField.addEventListener("click", createNewField);
(function () {
var onload = window.onload;
window.onload = function () {
if (typeof onload == "function") {
onload.apply(this, arguments);
}
var fields = [];
var inputs = document.getElementsByTagName("input");
var textareas = document.getElementsByTagName("textarea");
for (var i = 0; i < inputs.length; i++) {
fields.push(inputs[i]);
}
for (var i = 0; i < textareas.length; i++) {
fields.push(textareas[i]);
}
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
}
if (typeof field.onpaste == "function") {
var oninput = field.oninput;
field.oninput = function () {
if (typeof oninput == "function") {
oninput.apply(this, arguments);
}
if (typeof this.previousValue == "undefined") {
this.previousValue = this.value;
}
var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");
if (pasted && !this.onpaste.apply(this, arguments)) {
this.value = this.previousValue;
}
this.previousValue = this.value;
};
if (field.addEventListener) {
field.addEventListener("input", field.oninput, false);
} else if (field.attachEvent) {
field.attachEvent("oninput", field.oninput);
}
}
}
}
})();
</script>
</head>
</color>
</font>
</div>
</div>
</div>
</html>
User clicks on the "add new field"
var gets added below var Reason2 called Reason3, Reason4, etc.
"Reason Three: " +Reason3+ gets added below Reason Two on line 51.

In Javascript it's possible to create html elements at runtime using the createElement() function. In your case we need to create quite a lot of individual elements to replicate the structure of the table. Those are <tr> <td> <input>.
The tr element needs to be added to the table, the td containing the text 'Reason #:' as well as the td holding the input element are childs of tr. To add a dynamically created element to the DOM, the appendChild() function is used.
The input element needs some special treatment because it contains an unique id. The two html-made elements you have are 'R1' and 'R2' - so a new one should follow that pattern and start with 3. This is done by setting up a global variable , appending it to the name and increment it afterwards.
Finally we need to add a 'Create new field' button.
Take a look at this example (you have to scroll down to see the button):
var newField = document.getElementById("newField");
var counter = 3;
function createNewField() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "Reason " + counter + ":";
var inp = document.createElement("input");
inp.type = "text";
inp.size = "75";
inp.name = "R" + counter;
td2.appendChild(inp);
document.getElementById("theTable").appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
counter++;
}
newField.addEventListener("click", createNewField);
function generateCode2() {
var AccoutName = document.forms["TRF"]["accname"].value;
var reasons = "";
for (var a = 1; a < counter; a++) {
reasons += "Reason " + a + ": " + document.forms["TRF"]["R" + a].value + "\n";
}
document.getElementById("box").value =
"[center][img width=500 height=500]https://i.imgur.com/FuxDfcy.png[/img][/center]" +
"[hr]" +
"\n" +
"[b]Dear[/b] " + AccoutName +
"\n" +
"After reading your Application, Imperials staffs have decided to [color=green][b]Accept[/b][/color] you. " +
"\n" + reasons +
"Welcome to the Family. " +
"\n" +
""
}
<form name="TRF" method="post">
<p style="color:white">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1 class="text-center">Accepted Format</h1>
<hr>
<div class="row">
<h6 class="text-uppercase"><strong><center>Accepted Format</center></strong></h6>
<table style="width:100%" id="theTable">
<tr>
<td>Applicant's Name:</td>
<td><input type="text" name="accname" size="75" placeholder="" required></td>
</tr>
<tr>
<td>Reason 1:</td>
<td><input type="text" name="R1" size="75" placeholder="" required></td>
</tr>
<tr>
<td id="bla">Reason 2:</td>
<td><input type="text" name="R2" size="75" placeholder="" required></td>
</tr>
</table>
<h3>CODE:</h3>
<textarea id="box" cols="100" rows="10"></textarea>
<p><a class="btn btn-success btn-lg" onclick="generateCode2()" role="button">GENERATE CODE</a></p>
</div>
<button id="newField">
add new field
</button>
</center>
</div>
</div>
</div>
</div>

Why do I keep getting ReferenceError: * is not defined?

New to Javascript and I can't get the error message ReferenceError: calculateOrder is not defined to go away no matter what I try. I've moved my var out and back in tried different statements. Nothing of the knowledge I have so far is working. How can I get rid of this error message? Would appreciate any help or pointers I can get.
var cost = 750;
var pasta_prices = new Array();
pasta_prices["spaghetti"] = 0;
pasta_prices["fettucine"] = 50;
pasta_prices["fusilli"] = 75;
var sauce_prices = new Array();
sauce_prices["pomodoro"] = 0;
sauce_prices["bolognese"] = 50;
sauce_prices["alfredo"] = 100;
function getPastaPrice() {
var pastaPrice = 0;
var form = document.forms["myForm"];
var selectedPasta = myForm.elements["pastatype"];
for (var i = 0; i < selectedPasta.length; i++) {
if (selectedPasta[i].checked) {
pastaPrice = pasta_prices[selectedPasta[i].value];
break;
}
}
return pastaPrice;
}
function getSaucePrice() {
var saucePrice = 0;
var myForm = document.forms["myForm"];
var selectedSauce = myForm.elements["sauce"];
saucePrice = sauce_prices[selectedSauce.value];
return saucePrice;
}
function extrasPrice() {
var extraPrice = 0;
var myForm = document.forms["myForm"];
var includeSalad = myForm.elements["salad"];
var includeSticks = myForm.elements["sticks"];
if (includeSalad.checked == true) {
extraPrice = 200;
}
if (includeSticks.checked == true) {
extraPrice = 100;
}
return extraPrice;
}
function calculateOrder() {
var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();
console.log((ordCost / 100).toFixed(2));
return ordCost;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Costello Improved">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Costellos Pasta and Pizza</title>
<script language="JavaScript" type="text/javascript" src="costello.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col-md-12{
text-align: center;
font-size: 3em;
background-color: red;
}
.msg{
text-align:center;
font-size: 1.3em;
color: red;
}
.row{
margin-top: 10px;
border: 5px solid white;
background-color: silver;
padding: 10px;
}
.label{
text-align:center;
vertical-align:top;
}
#submitMessage{
transition: opacity 10s;
}
#cancel{
text-decoration: underline;
}
</style>
</head>
<body>
<form name="myForm" action="https://costello-pasta.glitch.me/order" id="myForm" method="POST" onsubmit="return calculateOrder()">
<div class="container">
<div class="row">
<div class="col-md-12" id="debug">Costello's Online Orders</div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta Bowl</div>
<div class="col-md-4" > (basic price: $7.50)</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Pasta</div>
<div class="col-md-4" >
<div><input type="radio" name="pastatype" value="0" id="spaghetti"/>Spaghetti (no extra cost)</div>
<div><input type="radio" name="pastatype" value="50" id="fettucine"/>Fettucine (add 50 cents)</div>
<div><input type="radio" name="pastatype" value="75" id="fusilli"/>Fusilli (add 75 cents)</div>
</div>
<div class="col-md-4 msg" id="radioLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Sauce</div>
<div class="col-md-4" >
<select name="sauce" >
<option value="0" id="pomodoro">Pomodoro (no extra cost)</option>
<option value="50" id="bolognese">Bolognese (add 50 cents)</option>
<option value="100" id="alfredo">Alfredo (add $1.00)</option>
</select>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Extras</div>
<div class="col-md-4" >
<div><input type="checkbox" name="extras" value="200" id="salad"/>Side salad (add $2.00)</div>
<div><input type="checkbox" name="extras" value="100" id="sticks"/>Bread sticks (add $1.00)</div>
</div>
<div class="col-md-4" ></div>
</div>
<div class="row">
<div class="col-md-4 label">Name</div>
<div class="col-md-4" ><input type="text" id="name" name="client_name" /></div>
<div class="col-md-4 msg" id="nameLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label">Phone</div>
<div class="col-md-4" ><input type="text" id="phone" value="" /></div>
<div class="col-md-4 msg" id="phoneLabel"></div>
</div>
<div class="row">
<div class="col-md-4 label"><input type="submit" value="Order" /></div>
<div class="col-md-4" id="totalcost"></div>
<div class="col-md-4 msg" id="submitMessage"></div>
</div>
</div>
</form>
</body>
</html>

selectedPasta[i].value will give you "0" or "50" accordingly. And they are not present in pastaPrices, hence the return value from getPastaPrice is undefined. Let me modify your jsBin and share the results.
Working JSBin here: https://jsbin.com/qokaboj/edit?html,js,console,output
Here is your working JS code:
enter code here
function getPastaPrice(){
var pastaPrice=0;
var form = document.forms["myForm"];
var selectedPasta = myForm.elements["pastatype"];
for(var i = 0; i < selectedPasta.length; i++) {
if(selectedPasta[i].checked) {
pastaPrice = pasta_prices[selectedPasta[i].id];
break;
}
}
return pastaPrice;
}
function getSaucePrice() {
var saucePrice=0;
var myForm = document.forms["myForm"];
var selectedSauce = myForm.elements["sauce"];
for(var i=0; i<selectedSauce.length; i++){
if(selectedSauce[i].selected){
saucePrice = sauce_prices[selectedSauce[i].id];
break;
}
}
return saucePrice;
}
function extrasPrice() {
var extraPrice=0;
var myForm = document.forms["myForm"];
var includeSalad = myForm.elements["salad"];
var includeSticks = myForm.elements["sticks"];
if(includeSalad.checked) {
extraPrice = 200;
}
if (includeSticks.checked) {
extraPrice += 100;
}
return extraPrice;
}
function calculateOrder() {
var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();
console.log((ordCost/100).toFixed(2));
return calculateOrder;
}

the calculateOrder function is attempting to return itself:
function calculateOrder() {
[...]
return calculateOrder;
}

This might help
You created a function called calculateOrder
function calculateOrder() {
var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();
console.log((ordCost / 100).toFixed(2));
return calculateOrder; // <--- problem here.
}
Instead of returning calculateOreder you should return ordCost.
How will this help? Well we can do some checks in your function to see that calculateOrder is...not defined! The calculateOrder that is not defined is that undefined variable I noted up there.
Go ahead a try this in your code too to see what is and is not defined in your function
function calculateOrder() {
var ordCost = cost + getPastaPrice() + getSaucePrice() + extrasPrice();
console.log((ordCost / 100).toFixed(2));
console.log('calculateOrder: ', calculateOrder);
console.log('ordCost', ordCost)
return ordCost; //<--- the value you might be looking for
}

jQuery previous button when clicked goes back to Q.) 1 rather then going backward one by one

jQuery previous button not working as expected.
Basically the best way to explain it is if I'm on question 5 and I click the previous button, it defaults to question 1 rather than going to question 4.
So it's defaulting to question 1... That's a problem.
What to do?
jQuery is in the bottom in script tags.
if (i.Question_Type == "DROPDOWN")
{
<div class="container text-center">
<div class="row idrow" data-questions="#counter">
#{
counter++;
}
<div id="question1" class="form-group">
<label class="lab text-center" for="form-group-select">
#i.Question_Order #Html.Raw(#i.Question)
</label>
<select class="form-control" id="form-group-select">
#for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<option> #i.qOps.options[t]</option>
}
else
{
<option> #x</option>
}
}
</select>
</div>
</div>
</div>
}
if (i.Question_Type == "RADIO")
{
<div class="container">
<div class="row idrow" data-questions="#counter">
#{counter++;
}
<div class="form-group">
<label class="lab" for="questions">
#i.Question_Order #i.Question
</label>
<div class="row">
<div class="col-xs-12">
<div id="question1" class="radio-inline">
#for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<label class="radio-inline"><input type="radio" name="question"> #i.qOps.options[t]</label>
}
else
{
<label class="radio-inline"><input type="radio" min="0" max="#x" name="question"></label>
}
}
</div>
</div>
</div>
</div>
</div>
</div>
}
if (i.Question_Type == "CHECKBOX")
{
for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
{
#*<div class="container">
<div class="row">
<label>#y</label> <input type="checkbox" name="question">
</div>
</div>*#
}
}
}
<div class="azibsButtons">
<button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>
<button type="button" id="next" class="btn btn-primary pull-right">Next</button>
</div>
<script>
$(document).ready(function () {
$(".idrow").each(function (i) {
var inner = $(this).data('questions');
if (inner == 0) {
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
$("#next").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal++;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
$("#previous").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal--;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});
});
});
</script>

Hey guys I got the solution Thanks to Daniel.
The next event closing braces were wrapped around the previous event, which caused the problem to default to question 1 when clicked previous.
$("#next").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal++;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});
$("#previous").click(function () {
$(".idrow").each(function (i) {
var inp = $(this);
if (!inp.hasClass('hidden')) {
var dataVal = inp.data("questions");
dataVal--;
inp.addClass('hidden');
$('[data-questions=' + dataVal + ']').removeClass('hidden');
return false;
}
});
});

Develop Reference

JavaScript is the programming language of the Web.

"Undefined" shown in last column while populating JSON data - javascript

Related

form with dynamic time intervals and depending disabledTimeIntervals-settings

Generate Header for txt file

How can I make the user add a new field using a button using javascript?

Why do I keep getting ReferenceError: * is not defined?

jQuery previous button when clicked goes back to Q.) 1 rather then going backward one by one

Categories

Resources