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