Question

我试图从这里添加到我的网页静态html表单：https://github.com/dwyl/html-form-send-email-via-google-script-without-server 我已将他们的模板html表单和javascript添加到我的页面。在Google Chrome中，它的工作没有任何问题。 但在Firefox javascript中创建空对象 http://i.stack.imgur.com/Q3WkV.png

屏幕截图上使用的表单html：

<form id="gform" style="color: black" method="POST" class="pure-form pure-form-stacked"

行动=＆＃34; HTTPS：//script.google.com/macros/s/AKfycbzBtXgChY91XCaz8e0UzkHR0FTrT5qzLyL0DSi-3VG2Dqu8ly9h/exec"＆GT;

<fieldset class="pure-group">
  <label for="name">Name: </label>
  <input id="name" name="name" placeholder="What your Mom calls you" />
</fieldset>

<fieldset class="pure-group">
  <label for="message">Message: </label>
  <textarea id="message" name="message" rows="10"
  placeholder="Tell us what's on your mind..."></textarea>
</fieldset>

<fieldset class="pure-group">
  <label for="email"><em>Your</em> Email Address:</label>
  <input id="email" name="email" type="email" value=""
  required placeholder="your.name@email.com"/>
  <span id="email-invalid" style="visibility:hidden">
    Must be a valid email address</span>
</fieldset>

<fieldset class="pure-group">
  <label for="color">Favourite Color: </label>
  <input id="color" name="color" placeholder="green" />
</fieldset>

<button class="button-success pure-button button-xlarge">
  <i class="fa fa-paper-plane"></i>&nbsp;Send</button>
</form>

屏幕截图上使用的Javascript：

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);
}
// get all data in form and return object
function getFormData() {
  var elements = document.getElementById("gform").elements; // all form elements
  var fields = Object.keys(elements).filter(function(k){
    return k.length > 1 && elements[k].name && elements[k].name.length > 0 ;
  });
  var data = {};
  fields.forEach(function(k){
    data[k] = elements[k].value;
  });
  console.log(data);
  return data;
}

function handleFormSubmit(event) {  // handles form submit withtout any jquery
  event.preventDefault();           // we are submitting via xhr below
  var data = getFormData();         // get the values submitted in the form
  if( !validEmail(data.email) ) {   // if email is not valid show error
    document.getElementById('email-invalid').style.display = 'block';
    return false;
  } else {
    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
        document.getElementById('thankyou_message').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);

我在函数getFormData（）中遇到了问题，但我不知道为什么以及如何修复它。

表单数据仅在firefox中为空

0 个答案: