javascript FormData.entries()中不包括单选字段

js5cn81o  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(113)

在执行表单验证时,我循环遍历FormData.entries()。但是,这些条目不包括单选按钮。下面是我如何初始化我的循环,我已经添加了日志记录:

for (let [fieldName, val] of formData.entries()) {
  console.log(fieldName);

这将导致以下内容被发送到控制台:

  • 姓名
  • 电子邮件
  • 性能
  • 交货地址
  • 开始日期
  • 持续时间
  • 其他

我希望deliveryCity紧跟在deliveryAddr之后。下面是包含这两个的代码块。请注意,各种课程都来自布尔玛。我的第一个想法是我没有为单选按钮指定value属性,但是添加这些属性并没有导致deliveryCity被添加到FormData.entries()中。

<div class="mt-2 is-hidden abc-contact-form-delivery-required-fields">
  <div class="field">
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery Street Address</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="control has-icons-left has-icons-right abc-featured-property-label">
      <input class="input" type="text" class="abc-contact-form-field-delivery-addr" name="deliveryAddr" placeholder="Your Beach Home Address">
      <span class="icon is-small is-left">
        <i class="fas fa-road"></i>
      </span>
    </div>
  </div>
  <div>
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery City</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="mb-3 abc-featured-property-label">Sorry we do not deliver to Fort Morgan</div>
    <div class="field abc-featured-property-label">
      <div class="control">
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city">
          Orange Beach
        </label>
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city">
          Gulf Shores
        </label>
      </div>
    </div>
  </div>
</div>
jv4diomz

jv4diomz1#

看起来这就是FormData构造函数的行为。当你没有选择你的收音机时,基本上意味着它们的值是undefined。在JS语言中,undefined的意思是 * 没有定义的属性 *。因此,FormData跳过具有未定义值的输入。当您选择收音机输入时,它在formData中可用。
正如你所看到的,一个空文本框的默认值是一个空字符串"",所以它不是undefined,文本框被添加到formData。无论如何,我不建议在表单中没有预先填充的单选按钮。不适合UX。至少提供一些undefined选定的无线电输入。或者使用选择框作为替代。

let counter = 0;

document.querySelector('form').addEventListener('submit', e => {

  e.preventDefault();
  counter++;
  
  const formData = new FormData(e.target, e.target.querySelector('button'));
  
  for (let [fieldName, val] of formData.entries()) {
    console.log(counter, ':', fieldName, JSON.stringify(val));
  }

});
<form>
<div class="mt-2 is-hidden abc-contact-form-delivery-required-fields">
  <div class="field">
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery Street Address</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="control has-icons-left has-icons-right abc-featured-property-label">
      <input class="input" type="text" class="abc-contact-form-field-delivery-addr" name="deliveryAddr" placeholder="Your Beach Home Address">
      <span class="icon is-small is-left">
        <i class="fas fa-road"></i>
      </span>
    </div>
  </div>
  <div>
    <label class="label is-size-4">
      <span class="mr-1 has-text-primary-dark">Delivery City</span>
      <span class="has-text-danger">*</span>
    </label>
    <div class="mb-3 abc-featured-property-label">Sorry we do not deliver to Fort Morgan</div>
    <div class="field abc-featured-property-label">
      <div class="control">
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city">
          Orange Beach
        </label>
        <label class="radio is-size-5">
          <input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city">
          Gulf Shores
        </label>
      </div>
    </div>
  </div>
</div>
<button>Submit</button>
</form>

相关问题