We Keep Coding

How do I change this Contact Form's Javascript so that IF a key is something else, perform different action?

I have a Contact Form that utilizes Google Scripts. It successfully sends the email and formats it decently to my inbox, but there are 2 problems:
-I need it so that IF var key is equal to 'Action', then do not display it in the email it sends. Because right now, "Action send_message" is getting included in the email and I don't like that.
For this, I have unsuccessfully tried things like:
for (var idx in order) {
var key = order[idx];
//Skip this entry into the email output if it is the Action
if( key === 'Action') {
continue
}
It seems to not react to this code at all.
-I also need it so that if a city is selected, e.g. Alachua, that the email says 'Alachua' instead of 'Florida_Alachua'. But I can't add a NAME to an option since apparently options don't have that property. I also can't do the quick fix of changing the VALUE of the <option> to resolve this step, because of other code I have that conflicts with this route.
Google Scripts Code:
/******************************************************************************
* This tutorial is based on the work of Martin Hawksey twitter.com/mhawksey *
* But has been simplified and cleaned up to make it more beginner friendly *
* All credit still goes to Martin and any issues/complaints/questions to me. *
******************************************************************************/
// if you want to store your email server-side (hidden), uncomment the next line
var TO_ADDRESS = "myemail#email.com";
// spit out all the keys/values from the form in HTML for email
// uses an array of keys if provided or the object to determine field order
function formatMailBody(obj, order) {
var result = "";
if (!order) {
order = Object.keys(obj);
}
// loop over all keys in the ordered form data
for (var idx in order) {
var key = order[idx];
result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + sanitizeInput(obj[key]) + "</div>";
// for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value,
// and append it to the `result` string created at the start.
}
return result; // once the looping is done, `result` will be one long string to put in the email body
}
// sanitize content from the user - trust no one
// ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
function sanitizeInput(rawInput) {
var placeholder = HtmlService.createHtmlOutput(" ");
placeholder.appendUntrusted(rawInput);
return placeholder.getContent();
}
function doPost(e) {
try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);
// shorter name for form data
var mailData = e.parameters;
// names and order of form elements (if set)
var orderParameter = e.parameters.formDataNameOrder;
var dataOrder;
if (orderParameter) {
dataOrder = JSON.parse(orderParameter);
}
// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;
// send email if to address is set
if (sendEmailTo) {
MailApp.sendEmail({
to: String(sendEmailTo),
subject: "Contact form submitted",
// replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
htmlBody: formatMailBody(mailData, dataOrder)
});
}
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e) {
var lock = LockService.getDocumentLock();
lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing
try {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
// select the 'responses' sheet by default
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheetName = e.parameters.formGoogleSheetName || "responses";
var sheet = doc.getSheetByName(sheetName);
var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var newHeader = oldHeader.slice();
var fieldsFromForm = getDataColumns(e.parameters);
var row = [new Date()]; // first element in the row should always be a timestamp
// loop through the header columns
for (var i = 1; i < oldHeader.length; i++) { // start at 1 to avoid Timestamp column
var field = oldHeader[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
// mark as stored by removing from form fields
var formIndex = fieldsFromForm.indexOf(field);
if (formIndex > -1) {
fieldsFromForm.splice(formIndex, 1);
}
}
// set any new fields in our form
for (var i = 0; i < fieldsFromForm.length; i++) {
var field = fieldsFromForm[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
newHeader.push(field);
}
// more efficient to set values as [][] array than individually
var nextRow = sheet.getLastRow() + 1; // get next row
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// update header row with any new data
if (newHeader.length > oldHeader.length) {
sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
}
}
catch(error) {
Logger.log(error);
}
finally {
lock.releaseLock();
return;
}
}
function getDataColumns(data) {
return Object.keys(data).filter(function(column) {
return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
});
}
function getFieldFromData(field, data) {
var values = data[field] || '';
var output = values.join ? values.join(', ') : values;
return output;
}
Contact Form HTML
<section id="contact-form">
<form id="gform"
class="contact-form" method="post"
action="(Google Scripts URL)"
enctype="text/plain">
<p>
<label for="name">Your Name <font face="Arial" color="red">*</font></label>
<input type="text" style="height:35px;" class="heighttext required" name="name" id="name" class="required" title="* Please provide your name">
</p>
<p>
<label>Your Location <font face="Arial" color="red">*</font></label>
<select name="Location" id="column_select" style="height:35px;" class="required" title=" * Please provide your location">
<option selected value="col00">-- State --</option>
<option value="Alabama">Alabama</option>
<option value="California">California</option>
<option value="Florida">Florida</option>
</select>
<select name="City" id="layout_select" style="height:35px;">
<option disabled selected value="Florida">-- City --</option>
<option name="Alachua" value="Florida_Alachua">Alachua</option>
<option name="Alford" value="Florida_Alford">Alford</option>
</select>
</p>
<p>
<input type="submit" value="Send Message" id="submit" class="pp-btn special">
<img src="images/ajax-loader.gif" id="contact-loader" alt="Loading...">
<input type="hidden" name="action" value="send_message">
</p>
</form>
</section><!-- #contact-form -->
Form Handler Javascript
(function() {
function validEmail(email) { // see:
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}
function validateHuman(honeypot) {
if (honeypot) { //if hidden form filled up
console.log("Robot Detected!");
return true;
} else {
console.log("Welcome Human!");
}
}
// get all data in form and return object
function getFormData() {
var form = document.getElementById("gform");
var elements = form.elements;
var fields = Object.keys(elements).filter(function(k) {
return (elements[k].name !== "honeypot");
}).map(function(k) {
if(elements[k].name !== undefined) {
return elements[k].name;
// special case for Edge's html collection
}else if(elements[k].length > 0){
return elements[k].item(0).name;
}
}).filter(function(item, pos, self) {
return self.indexOf(item) == pos && item;
});
var formData = {};
fields.forEach(function(name){
var element = elements[name];
// singular form elements just have one value
formData[name] = element.value;
// when our element has multiple items, get their values
if (element.length) {
var data = [];
for (var i = 0; i < element.length; i++) {
var item = element.item(i);
if (item.checked || item.selected) {
data.push(item.value);
}
}
formData[name] = data.join(', ');
}
});
// add form-specific values into the data
formData.formDataNameOrder = JSON.stringify(fields);
formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
formData.formGoogleSendEmail = form.dataset.email || ""; // no email by default
console.log(formData);
return formData;
}
function handleFormSubmit(event) { // handles form submit without any jquery
event.preventDefault(); // we are submitting via xhr below
var data = getFormData(); // get the values submitted in the form
/* OPTION: Remove this comment to enable SPAM prevention, see README.md
if (validateHuman(data.honeypot)) { //if form is filled, form will not be submitted
return false;
}
*/
if( data.email && !validEmail(data.email) ) { // if email is not valid show error
var invalidEmail = document.getElementById("email-invalid");
if (invalidEmail) {
invalidEmail.style.display = "block";
return false;
}
} else {
disableAllButtons(event.target);
var url = event.target.action; //
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
// xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
console.log( xhr.status, xhr.statusText )
console.log(xhr.responseText);
//document.getElementById("gform").style.display = "none"; // hide form
/*
var thankYouMessage = document.getElementById("thankyou_message");
if (thankYouMessage) {
thankYouMessage.style.display = "block";
}
*/
return;
};
// url encode form data for sending as post data
var encoded = Object.keys(data).map(function(k) {
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k])
}).join('&')
xhr.send(encoded);
}
}
function loaded() {
console.log("Contact form submission handler loaded successfully.");
// bind to the submit event of our form
var form = document.getElementById("gform");
form.addEventListener("submit", handleFormSubmit, false);
};
document.addEventListener("DOMContentLoaded", loaded, false);
function disableAllButtons(form) {
var buttons = form.querySelectorAll("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
}
}
})();
finally, this is the extra code that would break if I simply tried changing the value of option to, e.g., 'Alachua' instead of 'Flordia_Alachua'. https://jsfiddle.net/hmatt843/504dgmqy/19/
Thanks for any and all help.

Try console.log(key) before if( key === 'Action'). I think you'll find that key never equals 'Action', exactly. Looks like you'll need if( key === 'action'), instead.
If you wish to remove part of string value, try the replace method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
It also looks like you're trying to work with elements[k].name when you mean to be working with elements[k].value.
I believe your code should look something like...
function(k) {
if(elements[k].value !== undefined) {
return elements[k].value.replace('Florida_', '');
// special case for Edge's html collection
} else if(elements[k].length > 0){
return elements[k].item(0).value.replace('Florida_', '');
}
}
... or something to that effect.
In the future, you may want to make it easier for folks trying to help you by posting only the portions of code your having trouble with, and breaking your questions into different posts. A lot to sift through up there.
Hope this helped.

The split() method splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split.
Var splitValue = elements[k].item(0).value.split("");
splitValue[1] will give you a string of characters after the delimeter () in this case.

After selecting datalist item , the dropdown remains. How can i make sure it disappears?

<input class="c-search__textbox c-form__textbox" id="top-query" list="top-json-datalist" onkeyup="suggest(this)" autocomplete="off" type="text" name="q" value="" placeholder="Type something . . .">
<datalist id="top-json-datalist"></datalist>
function suggest(elem) {
if(elem.id == "query") {
document.getElementById("query").disabled = false;
var dataList = document.getElementById('json-datalist');
var input = document.getElementById('query');
} else if (elem.id == "top-query") {
document.getElementById("top-query").disabled = false;
var dataList = document.getElementById('top-json-datalist');
var input = document.getElementById('top-query');
}
var request = new XMLHttpRequest();
// Handle state changes for the request.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
var data = JSON.parse(request.responseText);
var jsonOptions = data.hits;
dataList.innerHTML = '';
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item["query"];
dataList.appendChild(option);
});
}
}
};
request.open('GET','https://api.lite.s4p.jp/v1/suggest&query='+input.value,true);
request.send();
As you can see I am able to load datalist items from ajax call.
I am able to see the items in the dropdown list. However, the problem is that when the item is selected, the drop-down still remains.
Thank You!

I'm wondering whether you are doing something in your suggest function that is causing a problem, does it work if you remove onkeyup="suggest(this)"?
The other thing is that support for datalist seems quite buggy according to caniuse. Have you tried in other browsers?
Sorry, would have just commented but I don't have enough rep yet.

List of buttons and JavaScript

I have a list of buttons in HTML. Depending on the button which is clicked, an AJAX call is supposed to be made and the data displayed. However JavaScript is not able to read the button. Here is the code in HTML
<ul>
<li><input type = "button" name = "lab" id = "map" value = "Computer Lab" onClick = "openPage(this)"></li>
<li><input type = "button" name = "lib" id = "map" value = "Library" onClick = "openPage(this)"></li>
<li><input type = "button" name = "mlib" id = "map" value = "Manuscript Library" onClick = "openPage(this)"></li>
<li><input type = "button" name = "radio" id = "map" value = "Agra ki Aawaz" onClick = "openPage(this)"></li>
</ul>
And here is the javascript code
function openPage(page){
try {
xmlHttp = new XMLHttpRequest ();
}
catch (e) {
try {
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (el) {
try {
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (el1) {
alert ("Your browser does not support AJAX! Please use a compatible browser!!");
}
}
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.state == 200) {
var sp = documet.getElementByID ("mainText");
sp.innerHTML = xmlHttp.responseText;
}
};
var target = "";
var parent = "";
var page = "";
switch(page.name){
case 'lab':
target = "get_content.jsp";
parent = "kmi";
page = "lab";
break;
case 'lib':
targt = "get_content.jsp";
parent = "kmi";
page= "gen_lib";
break;
case 'mlib':
targt = "get_content.jsp";
parent = "kmi";
page= "man_lib";
break;
case 'radio':
targt = "get_content.jsp";
parent = "kmi";
page= "radio";
break;
}
xmlHttp.open("POST", target, false);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("parent=" + parent + "&page=" + page);
Now the problem is that page.name is coming as undefined.
I don't understand what is wrong with it and is it possible to create such a list of buttons and navigate using these?

Just above your switch statement, you have this:
var page = "";
since your function definition looks like this:
function openPage(page){
JavaScript drops the var (variable is declared already), and merely assigns "" (an empty string) to what used to be a reference to a DOM element. Fix the name conflict and you should be on your way

JSP drop down list with 3 choices linked to each other

i am new to jsp. i am working on drop down menu. here the problem is -
there will be a 3 dropdown menu as "choice1, choice2, and choice3".
Initially "choice1" has 3 options. "choice2 and choice3" will be none.
Based on the choice selected by the "choice1" dropdown list, "choice 2" needs to be triggered with some 2 options.
And based on the choice selected by the "choice2" dropdown list, "choice 3" needs to be triggered with some 2 options.
How can i implement this. Solution with sample code would be fine.

using AJAX you do the same
See the following links for examples :
http://jsfprimefacesblog.blogspot.in/2006/02/ajax-jsp-to-populate-dependent-dropdown.html
http://stackoverflow.com/questions/8643096/jsp-ajax-populate-drop-down-list-based-on-the-selected-value
http://www.roseindia.net/answers/viewqa/Ajax/15250-DropDown-in-ajax+jsp.html

var xmlHttp;
function getPort(){
var companyId= document.formName.companyId.value;
var str= document.formname.team.options[document.formname.team.selectedIndex].value;
var userId = document.formname.userId.value;
if (str=="all"){
for (var i = 1; i < document.formname.team.options.length ; i++) {
document.formname.team.options[i].selected = true;
}
document.formname.team.options[0].selected = false;
}
var opt = document.formname.team;
var TeamValue = new Array;
var j = 0;
for (i=0; i<document.formname.team.length; i++){
if (opt[i].selected == true){
TeamValue[j] = "'"+opt[i].value+"'";
//TeamValue[j] = opt[i].value;
j++;
}
}
TeamValue = TeamValue.join(",");
//alert(TeamValue);
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
//alert("Browser does not support XMLHTTP Request")
return;
}
var url="GetPortList.jsp?teamId="+TeamValue+"&companyId="+companyId+"&userId="+userId;
//alert(url);
xmlHttp.onreadystatechange = changeValue;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function changeValue(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
result = xmlHttp.responseText;
//alert(result);
document.getElementById("portnum").innerHTML="<select name='collectorCode' size='4' style='width:155px;><option value='select'>Select All</option>"+result+"</select>";
}
}
using the html code...
<html:select style="width:155px;" property="team" value="" onchange="getPort()" />
above ajax code modifies the values of below checkbox and place it in a div tag like...
<div id="portnum">
<html:select property="collectorCode" value="" style="width:155px;">
</div>
It is for 2 checkboxes...
2nd checkbox values changed based on 1st checkbox selected value

innerHTML for <script> works in FF, not IE

I am trying to populate a <select> element via Ajax. It works great in FF, but I get an unknown runtime error in IE.
HTML:
<select id="emp_select" name="emp_select">
<option value=" ">Please enter a store</option>
</select>
Javascript:
$("#store").blur(function() {
populateDropdowns();
});
...
function populateDropdowns() {
var store = $("#store").val();
if (store.length != 4) {
alert("Store # must be 4 digits!");
$("#store").focus();
return false;
}
var xhrJSON = new XMLHttpRequest();
var xhrEmpSelect = new XMLHttpRequest();
var xhrMgrSelect = new XMLHttpRequest();
var jsonDone = false;
var empSelectDone = false;
var mgrSelectDone = false;
$("#processing-dialog").dialog({
width: 300,
height: 150
});
xhrJSON.onreadystatechange = function() {
if (xhrJSON.readyState == 4) {
if (xhrJSON.status == 200) {
var js = document.createElement('script');
js.type = 'text/javascript';
js.innerHTML = xhrJSON.responseText;
var scr = document.getElementsByTagName('script')[1];
scr.parentNode.insertBefore(js,scr);
jsonDone = true;
if (jsonDone && empSelectDone && mgrSelectDone) {
$("#processing-dialog").dialog("close");
$("#processing-dialog").dialog("destroy");
return true;
}
} else {
return false;
}
}
}
xhrEmpSelect.onreadystatechange = function() {
if (xhrEmpSelect.readyState == 4) {
if (xhrEmpSelect.status == 200) {
$("#emp_select").html(xhrEmpSelect.responseText);
empSelectDone = true;
if (jsonDone && empSelectDone && mgrSelectDone) {
$("#processing-dialog").dialog("close");
$("#processing-dialog").dialog("destroy");
return true;
}
} else {
return false;
}
}
}
xhrMgrSelect.onreadystatechange = function() {
if (xhrMgrSelect.readyState == 4) {
if (xhrMgrSelect.status == 200) {
$("#mgr_select").html(xhrMgrSelect.responseText);
mgrSelectDone = true;
if (jsonDone && empSelectDone && mgrSelectDone) {
$("#processing-dialog").dialog("close");
$("#processing-dialog").dialog("destroy");
return true;
}
} else {
return false;
}
}
}
var url = "ajax.cgi";
var JSONdata = "action=generateJSON&store=" + store;
var EmpSelectData = "action=generateEmpSelect&store=" + store;
var MgrSelectData = "action=generateMgrSelect&store=" + store;
xhrJSON.open("POST",url);
xhrJSON.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhrJSON.send(JSONdata);
xhrEmpSelect.open("POST",url);
xhrEmpSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhrEmpSelect.send(EmpSelectData);
xhrMgrSelect.open("POST",url);
xhrMgrSelect.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhrMgrSelect.send(MgrSelectData);
}
The blur handler calls a function to populate (all) the different select elements, plus a JavaScript object that holds an associative array of all the employees to match up a name with an employee id that is returned as the values of the options in both select elements.
XHR Text returned (for xhrJSON, content-type=application/json):
var empArray = new Array({ id:"12345678", title:"The Title", code:"C123", name:"John Doe"},...);
XHR Text returned for (xhrEmpSelect, content-type=text/html):
<option value=" ">Select One</option>
<option value="John Doe">John Doe</option>
<option value="Joe Blow">Joe Blow</option>
...
<option value="other">Other...</option>
</select>
Similar text is returned for xhrMgrSelect, content-type=text/html
So in FF everything works great, the JS Object comes across and is inserted into the DOM and both <select> elements are populated as well. BUT in IE, I get an unknown runtime error in the xhrJSON.onreadystatechange handler where I try and set the js.innerHTML to the xhrJSON.responseText.
What am I doing wrong?

Try using js.text = xhrJSON.responseText; instead of innerHTML. I believe the issue you are encountering has to do with the fact that you can't insert HTML into a <script> block.

Since you are setting the script you should use innerText instead of innerHTML. Try this.
js.innerText = xhrJSON.responseText;
//Since FF do not sussport innerText but it does support textContent
js.textContent = xhrJSON.responseText;
I would advice you to migrate your code to jQuery which will be much simpler, readable, and easy to maintain without any worries of cross browser support. jQuery does everything for you.

To set the contents of a HTMLScriptElement object, (created using document.createElement('script');) you should use the setText method of the object instead of trying to set the innerHTML of the script.
js.setText(xhrJSON.responseText);
See the W3 specification from the link above.