jQuery：jQuery .val（）无法在移动版Safari和Chrome中使用

Question

我偶然发现了一个小问题。 我正在尝试使用$.ajax发布一个表单，但似乎它不适用于moblie Safari或Chrome。

这是我的HTML：

<form class="signup-form"  method="POST" action="">
  <input type="hidden" name="u" value="03d275307f32a6e64103c71c4">
  <input type="hidden" name="id" value="5425de82c5">
  <input type="text" class="signup-input email pull-left" 
                     name="EMAIL" placeholder="Enter your email" value="">
  <button class="btn btn-signup">GET EARLY ACCESS</button>
</form> 
<!-- second form -->
<form class="signup-form"  method="POST" action="">
  <input type="hidden" name="u" value="03d275307f32a6e64103c71c4">
  <input type="hidden" name="id" value="5425de82c5">
  <input type="text" class="signup-input email pull-left" 
                     name="EMAIL" placeholder="Enter your email" value="">
  <button class="btn btn-signup">GET EARLY ACCESS</button>
</form> 

这是我的jQuery：

$(document).ready(function() {
var SIGNUP_FORM = $('.signup-form');
var EMAIL_FIELD = $('.email');

SIGNUP_FORM.submit(function() {
  var submitBtn = $(this).children('button');
  submitBtn.text('SENDING...');
  if (EMAIL_FIELD.val().length) {
    var data = $(this).serialize();
    var url = 'MY_URL';
    $.ajax({
      url: url,
      type: 'GET',
      data: data,
      dataType: 'json',
      contentType: 'application/json; charset=utf-8',
      success: function(data) {
        submitBtn.text('THANKS!');
      },
      error: function(err) {
        alert("Could not connect to the registration server.");
      }          
    });
  }
  else {
    $(this).children('input').css('border', '1px solid red');
    submitBtn.text('OOOPS');
  }
  return false;
});
});

SIGNUP_FORM = $('.signup-form'); 和EMAIL_FIELD = $('.email');

它应该在所有浏览器中运行，但不适用于移动Safari或Chrome。

当我尝试alert(EMAIL_FIELD.val()); 它在移动设备上是空的，但在桌面浏览器中则不是。

我究竟做错了什么？

Answer 1

在表单的submit事件的eventhandler中， this是表单，可以使用this.inputName访问表单中唯一命名的输入。

所以在你的情况下，而不是if (EMAIL_FIELD.val().length)你可以说例如if (this.EMAIL.value !== '')等。

目前，您正在从页面中选择所有电子邮件字段，只检查第一个的值长度。