javascript - 如何更改此联系表单的 Javascript，以便如果 key 是其他内容，则执行不同的操作？

Question

我有一个使用 Google 脚本的联系表单。它成功发送电子邮件并将其格式化到我的收件箱，但有 2 个问题:

-我需要它，以便 IF var key 等于“Action”，然后不在它发送的电子邮件中显示它。因为现在，“Action send_message”包含在电子邮件中，但我不喜欢这样。

为此，我尝试过以下方法但没有成功:

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
    } 

它似乎对这段代码根本没有反应。

-我还需要它，以便如果选择了一个城市，例如Alachua，该电子邮件显示“Alachua”而不是“Florida_Alachua”。但我无法将 NAME 添加到选项，因为显然选项没有该属性。我也无法快速修复更改 <option> 的 VALUE解决此步骤，因为我有其他代码与此路线冲突。

Google 脚本代码:

/******************************************************************************
     * 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;
}

联系表单 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 -->

表单处理程序 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;
    }
  }
})();

最后，如果我只是尝试将选项的值更改为“Alachua”而不是“Flordia_Alachua”，那么这些额外的代码就会被破坏。 https://jsfiddle.net/hmatt843/504dgmqy/19/

感谢您的所有帮助。

Answer 1

1. 尝试 console.log(key)之前if( key === 'Action') 。我想你会发现key永远不等于'Action' ， 确切地。看起来您需要 if( key === 'action') ，相反。

2. 如果您想删除部分字符串值，请尝试 replace方法:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

您似乎也正在尝试使用 elements[k].name当您打算与 elements[k].value 合作时.

我相信你的代码应该看起来像......

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_', '');
    }
}

...或类似的东西。

将来，您可能希望仅发布您遇到问题的代码部分，并将您的问题分解为不同的帖子，从而让那些试图帮助您的人变得更容易。有很多东西需要筛选。

希望这有帮助。