Develop Reference

How to dynamically create select input using JS

So I am trying to build an app where you can add shifts to a web page. I can add elements and text inputs to the page, however the select inputs are not showing up on the page
What it is supposed to look like
What it actually looks like
As you can see all other elements, besides selects, are working fine...
Code
var newShift = $(
"<div id='Shift" + numOfShifts + "'>" +
"<p class='white-text'>Shift" + numOfShifts + "</p>" +
"<div class='row'>" +
"<div class='col s4 offset-s2'>" +
"<div class='row'>" +
"<p class='white-text'>Shift Starts at:</p>" +
"<div class='input-field col s6'>" +
"<select id='shiftStart'" + numOfShifts + "' class='start-hour front'>" +
"<option value='' disable selected>Hour</option>" +
"<option value='00'>12am</option>" +
"<option value='01'>1am</option>" +
"<option value='02'>2am</option>" +
"<option value='03'>3am</option>" +
"<option value='04'>4am</option>" +
"<option value='05'>5am</option>" +
"<option value='06'>6am</option>" +
"<option value='07'>7am</option>" +
"<option value='08'>8am</option>" +
"<option value='09'>9am</option>" +
"<option value='10'>10am</option>" +
"<option value='11'>11am</option>" +
"<option value='12'>12pm</option>" +
"<option value='13'>1pm</option>" +
"<option value='14'>2pm</option>" +
"<option value='15'>3pm</option>" +
"<option value='16' > 4pm</option >" +
"<option value='17'>5pm</option>" +
"<option value='18'>6pm</option>" +
"<option value='19'>7pm</option>" +
"<option value='20'>8pm</option>" +
"<option value='21'>9pm</option>" +
"<option value='22'>10pm</option>" +
"<option value='23'>11pm</option>" +
"</select>" +
"</div>" +
"<div class='input-field col s6'>" +
"<select class='start-minute front'>" +
"<option value='' disable selected>minutes </option>" +
"<option value='00'>00</option>" +
"<option value='15'>15</option>" +
"<option value='30'>30</option>" +
"<option value='45'>45</option>" +
"</select>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='col s4'>" +
"<p class='white-text'>Shift Ends at:</p>" +
"<div class='row'>" +
"<div class='input-field col s6'>" +
"<select class='start-hour front'>" +
"<option value='' disable selected>Hour</option>" +
"<option value='00'>12am</option>" +
"<option value='01'>1am</option>" +
"<option value='02'>2am</option>" +
"<option value='03'>3am</option>" +
"<option value='04'>4am</option>" +
"<option value='05'>5am</option>" +
"<option value='06'>6am</option>" +
"<option value='07'>7am</option>" +
"<option value='08'>8am</option>" +
"<option value='09'>9am</option>" +
"<option value='10'>10am</option>" +
"<option value='11'>11am</option>" +
"<option value='12'>12pm</option>" +
"<option value='13'>1pm</option>" +
"<option value='14'>2pm</option>" +
"<option value='15'>3pm</option>" +
"<option value='16'>4pm</option>" +
"<option value='17'>5pm</option>" +
"<option value='18'>6pm</option>" +
"<option value='19'>7pm</option>" +
"<option value='20'>8pm</option>" +
"<option value='21'>9pm</option>" +
"<option value='22'>10pm</option>" +
"<option value='23'>11pm</option>" +
"</select>" +
"</div>" +
"<div class='input-field col s6'>" +
"<select class='start-minute front'>" +
"<option value='' disable selected>minutes </option>" +
"<option value='00'>00</option>" +
"<option value='15'>15</option>" +
"<option value='30'>30</option>" +
"<option value='45'>45</option>" +
"</select>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='row'>" +
"<div class='col s8 offset-s2'>" +
"<p class='white-text'>Number Of Employees Needed:</p>" +
"<input id='numOfEmployees' type='text'>" +
"<label for='numOfEmployees'># Of Employees</label>" +
"</div>" +
"</div>" +
"</div>");
$("#add-shift").append(newShift);
Why would I be having trouble adding selects like this??

There's an extra ' after shiftStart in:
"<select id='shiftStart'" + numOfShifts + "' class='start-hour front'>"

Javascript Electron Sqlite insert

I was wondering if someone could shed some light on my code and why it may not be working. I am running nodejs 6+ with an electron wrapper.
dependencies for the sqlite are "sqlite3": "^3.1.8
I am managing to list and display the data in rows without issue but on the insert function or search function it is falling over. I must be doing something wrong.
function insertNewVeh() {
db.all("INSERT INTO vehicles VALUES ('" +
document.getElementById('regNo').value + "','" +
document.getElementById('firstName').value + "','" +
document.getElementById('lastName').value +
"')", function(err, rows) {
console.log.msg;
})
}
insertNewVeh();
function srchReg() {
var regNo = document.getElementById("regNo").value
db.all("SELECT ALL FROM VEHICLES WHERE regNo = " + regNo + ""), function(err, rows) {
var reg = document.getElementById("newVehicle").value
rows.forEach(function (row) {
console.log.msg;
document.getElementById('sReg').innerHTML =
"<div>Total</div>"
})
};
};
srchReg();
and the functions
function srchDiv() {
document.getElementById('rSrch').innerHTML =
"<form>" +
"<input type=\"search\" id=\regNo\" placeholder=\"What are you looking for?\">" +
"<button id=\"subSrch\">Search</button>" +
"</form>";
document.getElementById('subSrch').addEventListener("click", function (e) {
srchReg();
});
}
srchDiv();
window.onload = function addVeh() {
document.getElementById('nVeh1').innerHTML =
"<form>" +
"<div class=\"row\">" +
"<label for=\"firstName\" id=\"firstName\">First Name</label>" +
"<input id=\"firstName\" name=\"firstName\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"lastName\" id=\"lastName\">Last Name</label>" +
"<input id=\"lastName\" name=\"lastName\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"address1\" id=\"address1\">Address 1</label>" +
"<input id=\"address1\" name=\"address1\" type=\"text\" />" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"address2\" id=\"address2\">Address 2</label>" +
"<input id=\"address2\" name=\"address2\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"town\" id=\"town\">Town</label>" +
"<input id=\"town\" name=\"town\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"postcode\" id=\"postcode\">Post Code</label>" +
"<input id=\"postcode\" name=\"postcode\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<label for=\"telephone\" id=\"telephone\">Telephone</label>" +
"<input id=\"telephone\" name=\"telephone\" type=\"tel\"/>" +
"</div>";
document.getElementById('nVeh2').innerHTML =
"<div class=\"row\">" +
"<label for=\"regNo\" id=\"regNo\">regNo</label>" +
"<input id=\"regNo\" name=\"regNo\" type=\"text\"/>" +
"</div>" +
"<div class=\"row\">" +
"<button type=\"submit\" value=\"Add\" id=\"addV\"/>Add</button>" +
"</div>" +
"</form>";
document.getElementById('addV').addEventListener("click", function (e) {
insertNewVeh();
});
}
addVeh();
I am relatively sure it's a syntax error somewhere but can't see it as I am still new to javascript. In either function the search doesnt work, nor does it insert anything to the database.

Note the 'return false', since your are submitting a form
function insertNewVeh() {
const self = this
db.serialize(
function () {
let stmnt = db.prepare('INSERT INTO vehicles VALUES (?, ?, ?)')
stmnt.run(document.getElementById('regNo').value, document.getElementById('firstName').value, document.getElementById('lastName').value, function () {
stmnt.finalize(function () {
// Here goes your callback, if you need one
// self.doSomeThing()
})
})
}
)
return false
}

How can I add javascript touch spin to html when call javascript function

I have button to add new row(s) to table.
In the table row have a column with touch spin.
I want to loop through Array(Items). to make a rows. But below code make a Error Uncaught TypeError: undefined is not a function at function tp0
function showtable() {
$('#showtable').html("");
for(var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch" + i + "' type='text' value='1' name='touch" + i + "' /> "
+ "<script>"
+ "function tp" + i + " () {$(\"input[name=\'touch" + i + "\']\").TouchSpin(); alert('ttt');}"
+ "</scr" + "ipt>"
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
var method_name = "tp";
window[method_name + i]();
}
}
Have any ideas thanks

Instead of adding functions like that with each row, you should just pass the row number as a variable to a predefined function:
function tp(index) {
$("input[name='touch" + index + "']").TouchSpin();
alert('ttt');
}
function showtable() {
$('#showtable').html("");
for (var i in Items) {
var no = parseInt($('#tb tr').length) - 1;
var data = "<tr role='row' class='filter' >"
+ "<td>" + no
+ "</td>"
+ "<td>"
+ "<div class='form-group'>"
+ "<input id='touch"+i+"' type='text' value='1' name='touch"+i+"' /> "
+ "</div>"
+ "</td>"
+ "</tr>";
$('#showtable').append(data);
tp(i);
}
}

Creating new fields inside a form with an incremental index in the name attribute, the variable seems to not be considered

This is a jsfiddle about the problem.
http://jsfiddle.net/BHL3P/1/
var FiltersCount = 0;
var currentMinHeight = 20;
var filterDiv = "" +
"<div style='border: 2px solid #003d4c; margin: 5px'>" +
"<div style='width: 45%' class='input select'>" +
"<label for='ReportFilter" + FiltersCount + "Field'>Select a Filter</label>" +
"<select id='ReportFilter" + FiltersCount + "Field' style='width: 100%' name='data[Report][filter][" + FiltersCount + "][field]'>" +
"<option value='product'>Filter" + FiltersCount + "</option>" +
"</select>" +
"</div>" +
"<div style='width: 45%' class='input text'>" +
"<label for='ReportFilter" + FiltersCount + "Value'>Type a Value</label>" +
"<input type='text' id='ReportFilter" + FiltersCount + "Value' style='width: 100%' name='data[Report][filter][" + FiltersCount + "][value]'>" +
"</div>" +
"</div>";
$(document).ready(function () {
$("#moreFilters").append(filterDiv);
$("#addFilter").click(function () {
FiltersCount = FiltersCount + 1;
$("#moreFilters").append(filterDiv);
});
});
I'm creating a series of filters for a research form. Every field have a progressive number that differentiate the name from the others.
I'm clearly doing something wrong because even if the variable is changed, the created HTML keep using the initial value.

try this. i think because you save earlier on variable on top so it wont change value of filterscount inline on variable filterdiv. im not test it but i think it work.. sorry for my english :P
var FiltersCount = -1;
var currentMinHeight = 20;
$(document).ready(function () {
$("#addFilter").click(function () {
FiltersCount = FiltersCount + 1;
var filterDiv = "" +
"<div style='border: 2px solid #003d4c; margin: 5px'>" +
"<div style='width: 45%' class='input select'>" +
"<label for='ReportFilter" + FiltersCount + "Field'>Select a Filter</label>" +
"<select id='ReportFilter" + FiltersCount + "Field' style='width: 100%' name='data[Report][filter][" + FiltersCount + "][field]'>" +
"<option value='product'>Filter" + FiltersCount + "</option>" +
"</select>" +
"</div>" +
"<div style='width: 45%' class='input text'>" +
"<label for='ReportFilter" + FiltersCount + "Value'>Type a Value</label>" +
"<input type='text' id='ReportFilter" + FiltersCount + "Value' style='width: 100%' name='data[Report][filter][" + FiltersCount + "][value]'>" +
"</div>" +
"</div>";
$("#moreFilters").append(filterDiv);
});
});

New to json and javascript, help?

I have a json file which contains questions and answers like this.
{
"Questions": [
{ "Q": "I enjoy playing video games" },
{ "Q": "I enjoy reading" },
{ "Q": "I enjoy watching tv" }
],
"Answers": [
{
"a": "Strongly Agree",
"b": "Agree",
"c": "Neutral",
"d": "Disagree",
"e": "Strongly Disagree"
}
]
}
The answers are always the same for each question. I am trying to do a loop in javascript to display each questiona the answers under it, something like this
1.I enjoy video games
RadioButton:Strongly agree RadioButton:Agree etc...
2. I enjoy reading
RadioButton:Strongly agree RadioButton:Agree etc...
right now i have this, but it doesn't really work
$.getJSON("questions.json",function(data)
{
$.each(data, function(i,data)
{
var div = document.createElement("div");
div.setAttribute("id", i);
document.createElement("div").setAttribute("id", i);
var div_data = "<div class='questions'><h2>" + data.Questions.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + 1+"' value='"+data.Answers.a+"'/>" +
"<label for='q" + i + 1+"'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + 2+"' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + 2+"'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 3+"' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + 3+"'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 4+"' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + 4+"'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + 5+"' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + 5+"'>" + data.Answers.e + "</label>"
+"</div>" ;
document.getElementById("box").appendChild(div);
div.innerHTML = div_data;
});
});

You have to loop through data.Questions. See the code below. I have also optimized your code, so that the HTML is appended at once, rather than separately for each element.
Another note: You should change the i + 1, 1 + 2, 1 + 3, etc part to something more appropriate. Currently, it's just added, because it's inside a string context. Even if you add parentheses, the logic is still flawed: For i=1, i+2 = 3. For i=2, i+1 is also 3.
I have replaced i + 1 + "' with i + "_1', to give you an idea of the right approach.
$.getJSON("questions.json",function(data)
{
var html = "";
$.each(data.Questions, function(i, question)
{
html += "<div id=" + i + ">" +
"<div class='questions'><h2>" + question.Q +"</h2><br />"+
"<input type='radio' name='q" + i + "' id='q" + i + "_1' value='"+data.Answers.a+"'/>" +
"<label for='q" + (i + "_1'>" + data.Answers.a + "</label>"+
"<input type='radio' name='q" + i + "' id='q" + i + "_2' value='"+data.Answers.b+"'/>" +
"<label for='q" + i + "_2'>" + data.Answers.b + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_3' value='"+data.Answers.c+"'/>" +
"<label for='q" + i + "_3'>" + data.Answers.c + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_4' value='"+data.Answers.d+"'/>" +
"<label for='q" + i + "_4'>" + data.Answers.d + "</label>" +
"<input type='radio' name='q" + i + "' id='q" + i + "_5' value='"+data.Answers.e+"'/>" +
"<label for='q" + i + "_5'>" + data.Answers.e + "</label>"
+ "</div></div>" ;
});
$("#box").append(html);
});

You aren't accessing the JSON properly. data.Questions.Q and data.Answers.a is not correct.
Both data.Questions and data.Answers are arrays. You would have to loop through those arrays and access them like data.Questions[i].Q.
Or change your JSON to match how you want the code to be able to iterate them. You can fix one or the other, but the two must match. It looks to me like you want to fix the code for the questions and fix the JSON for the answers, but that's a design decision that you can make.