Automating Javascript form creation from user input - javascript

I am trying to create a form which will generate different levels of forms based on the user input.
An example of this is
"How many levels are there?" -User input 3-
Three separate levels will be generated each with the same questions. In this there will be a question asking "How many objects are there?" the same will happen here in that multiple options will be generated.
Rough sketch of how the form would be displayed
The problem I've been having with this is allocating ids and then being able to fetch them after so that they can be referenced for use and MySQL later down the line.
function generateForm(){
var number = document.getElementById('number_of_levels').value;
var div = document.getElementById('levels');
// div.innerHTML += " " +number;
var heading = document.createElement("P");
heading.innerHTML = "Level " + number;
document.getElementById('levels').appendChild(heading);
var objects = document.createElement("P");
objects.innerHTML = "How many objects is the badge comprised of?";
document.getElementById('levels').appendChild(objects);
var num_objects_input = document.createElement("input");
num_objects_input.type = "number";
num_objects_input.id = "number_objects" +number;
document.getElementById('levels').appendChild(num_objects_input);
//num_objects.onchange = function(){addObject(num_objects.id)};
//div for the following levels
var ind_levels_div = document.createElement("div");
ind_levels_div.id = "level_" +number;
document.getElementById('levels').appendChild(ind_levels_div);
num_objects_input.onchange = function(){additionalObject()};
}
function additionalObject(){
var number = document.getElementById("number_objects" +number).value;
var objects_number = document.createElement("P");
objects_number.innerHTML = "Object " + number;
document.getElementById("level_" +number).appendChild(objects_number);
}
The result I'm getting is the form won't generate any Object form elements but will make the Levels.

Store all of the form objects in an array then convert the array to a more readable format..
var objectArray = [];
function createObject() {
var obj = document.createElement('div');
objectArray.push(obj);
obj.id = objectArray.length;
number = objectArray.length;
/* put your code here to append obj to the proper level etc*/
}
Now you can just convert the array when you want to send it to mysql
var sqlArray = JSON.Stringify(objectArray);

Related

google script - send table by email with values from a loop

I have a web app which take some inputs and I need to write those inputs in a sheet and then send an email with those inputs.
My code is below, I removed some lines in the code because they are not relevant. Assume pnArray and qArray are two arrays with values (strings and numbers).
The problem statement is how to create a HTML table in the loop below and then send that table by email.
function submitInfo() {
var table = "<table><tbody><tr><td>Part Number</td><td>Packs</td></tr>";
var pnArray = ["string1","string2"];
var qArray = [1,2];
for(var i =0;i<pnArray.length;i++){
var pn = pnArray[i];
var q = qArray[i];
table += Utilities.formatString('<tr><td>%s</td>', pn);
table += Utilities.formatString('<td>%s</td></tr>', q);
}
table+="</tbody></table>";
GmailApp.sendEmail("email#email.com", "test", null, {htmlBody:table});
}
function submitInfo() {
var html = "<table><tr><td>Part Number</td><td>Packs</td></tr>";
var pnArray = ["string1","string2"];
var qArray = [1,2];
pnArray.forEach(function(pn,i){html+=Utilities.formatString('<tr><td>%s</td><td>%s</td></tr>'pn,qArray[i]);});
table+="</table>";
GmailApp.sendEmail("email#email.com","test",null,{htmlBody:html});
}

Can I gather multiple variables from text boxes in a quicker fashion?

In code.org, I'm trying to gather data from text boxes where they can enter numbers. I want to assign the numbers entered into the text boxes into different variables.
Right now, I am individually grabbing each variable by itself.
I am currently creating variables at the beginning of my code like this.
var player1 = "player1";
var player2 = "player2";
var player3 = "player3";
var player4 = "player4";
var player5 = "player5";
Then after I used the onEvent handler function, I grab each of the numbers individually using the getText function.
onEvent("team2Button", "click", function () {
player1 = getText("player1");
player2 = getText("player2");
player3 = getText("player3");
player4 = getText("player4");
player5 = getText("player5");
});
Since I have many around 30 sets of data to collect, is there a quicker way to assign these values into a variable?
You can use an Object:
const players = {};
for(let i = 1; i <= 30; i++) {
players[`player${i}`] = `player${i}`
}
onEvent('button', 'click', function(){
for(let key in players){
players[key] = getText(key)
}
})
You could use the "design" tab to create a text input, and then write some code to add a new entry to a list every time you type something in and press enter:
var players = [];
onEvent("text_input1", "change", function(event) {
var name = getText("text_input1");
appendItem(players, name);
setText("text_input1", '');
console.log("added player: " + name);
});
If you want to keep this text input separate from the rest of your app, you could put it on a different screen. For example: https://studio.code.org/projects/applab/3vINC-jX6LHkiARJCoCmUQ

How do I overwrite object properties in an array?

I would like to overwrite a certain allOrders[i] with data, similar to how I create a new one. For some reason I can't figure out what to search on.
I have an array of objects allOrders.
I have an object BusinessCard. I take the form fields, serialize() them, clean up the data with a regex, then push the them into an array.
allOrders.push(new BusinessCard(currentOrder.quantity, currentOrder.FullName, currentOrder.Title, currentOrder.CellNumber, currentOrder.OfficeNumber, currentOrder.FaxNumber, currentOrder.EmailAddress, currentOrder.Address, currentOrder.website, currentOrder.price));
I've tried searching for overwriting existing object properties in an array and the likes and haven't figured out what to do here.
My best guess was allOrders[i].push -- but it seems to me that I have to write a new function to replace each property in the object.
Right now I am using(because using serialize() on the form inputs doesn't help me at all:
allOrders[i].quantity = $('#bcQuantity').val();
allOrders[i].fullname = $('#fullName').val();
allOrders[i].title = $('#Title').val();
allOrders[i].cell = $('#CellNumber').val();
allOrders[i].office = $('#OfficeNumber').val();
allOrders[i].fax = $('#FaxNumber').val();
allOrders[i].email = $('#EmailAddress').val();
allOrders[i].address = $('#Address').val();
allOrders[i].website = $('#website').val();
allOrders[i].price = $('#bcCostBeforeCart').text();
There has to be a smarter way to do this. Thank you.
EDIT:
function getFormData(formId) {
var currentForm = '#' + formId;
var currentPrice = $('#bcCostBeforeCart').text();
var currentFormData = $(currentForm).serialize();
var currentFormDataFinal = currentFormData + '&price=' + currentPrice;
return JSON.parse('{"' + decodeURI(currentFormDataFinal.replace(/\+/g, " ").replace(/&/g, "\",\"").replace(/=/g, "\":\"")) + '"}');
}
MEANING i could be using
currentOrder = getFormData('businessCardForm');
then
allOrders[i] = currentOrder;
Seems odd that you would be updating all items with the selector's you're using, but I would wrap up getting the updated order information then, you can run thru a loop.
Depending on your output, as long as it's outputing the respective properties and values of an order object you could just do:
for(int i =0; i < allOrders.length; i++){
var currentFormId = '' // update this for each iteration.
allOrders[i] = getFormData(currentFormId);
}
allOrders[i] = getUpdatedOrder();
function getUpdatedOrder() {
var order = {};
order.quantity = $('#bcQuantity').val();
order.fullname = $('#fullName').val();
order.title = $('#Title').val();
order.cell = $('#CellNumber').val();
order.office = $('#OfficeNumber').val();
order.fax = $('#FaxNumber').val();
order.email = $('#EmailAddress').val();
order.address = $('#Address').val();
order.website = $('#website').val();
order.price = $('#bcCostBeforeCart').text();
return order;
}

Javascript / JQuery comma separated value find last in list and build array

I have a list of options in a select field and each one of these has a comma separated list in the value, I need to loop through these and get the last item in the list and build an array to set into some input fields.
I need to do this in reverse as the ',' separated value I am getting is from a web service which will parse either 5 or 6 items of data which build into an address.
I have started on JSFiddle but I am a bit stuck.
http://jsfiddle.net/justinerswell/feDTU/1/
Any help would be great, I know that this is no the best way of processing data but its all I have to work with.
I have reposted this as it warrants it as the question has evolved.
Thanks
From the question I assume that you are looking to parse the value from either 5 or 6 comma separated value in your option and then separate them into array and want to do something with them (like putting it somewhere else). Below is the modification of your script that I made. I am not getting the question clearly, but I am assuming this is what you want.
$(document).ready(function () {
$('select').click(function () {
var selected = $(this).find(':selected').text();
var substr = selected.split(',');
var country = "";
var postcode = "";
var county = "";
var city = "";
var addthree = "";
var addtwo = "";
var addone = "";
if(substr.length == 5) {
country = substr[4];
postcode = substr[3];
county = substr[2];
city = substr[1];
addone = substr[0];
} else if (substr.length == 6) {
country = substr[5];
postcode = substr[4];
county = substr[3];
city = substr[2];
addtwo = substr[1]
addone = substr[0];
}
// do something here with the array
});
});

How to get total number of variables in an array in Javascript?

Google wasn't my friend on this one... maybe I wasn't searching for the right terms.
I have a javascript array randomTagLine[0], randomTagLine[1], etc. How do I get the total number of variables in the array? For instance, I can physically see there are 23, but I need to pull that out via JS code...
Thanks in advance..
EDIT
Example of code:
var randomTagline = new Array();
randomTagline[0] = "TEXT0";
randomTagline[1] = "TEXT1";
randomTagline[2] = "TEXT2";
//...
randomTagline[23] = "TEXT23";
var randomTaglineLength = randomTagLine.length;
var randomTaglineNum = randomXToY(0,randomTaglineLength,0);
alert(randomTaglineNum + " " + randomTaglineLength);
It's :
var length = randomTagLine.length;

Categories