I am looping through FormData.entries()
when performing form validation. However the entries do not include a radio button. The following is how I initialize my loop, and I have added the logging:
for (let [fieldName, val] of formData.entries()) {
console.log(fieldName);
This results in the following being emitted to console:
- name
- property
- deliveryAddr
- startDate
- duration
- other
I expected deliveryCity
to come right after deliveryAddr
. Below is the block of code that contains them both. Please note various classes are from Bulma. My first thought was that I had not specified the value
attribute for the radio buttons, but adding those did not result in deliveryCity
being added to the FormData.entries()
Thanks for having a look.
<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>
2
Answers
Seems that’s how the
FormData
constructor behaves. When you have your radios not selected that basically means their value isundefined
. In JS lingoundefined
kinda means no defined property. So theFormData
skips inputs with undefined values. When you select the radio input it becomes available in theformData
.As you can see the default value of an empty text box is an empty string
""
so it’s notundefined
and the text box is added to theformData
. Anyway I don’t recommend to have not pre-filled radio buttons in a form. Not good for UX. Provide someundefined
selected radio input at least. Or use a select box as an alternative.If you are validating the form I think that you should stick to the defaults as much as possible.
required
attribute in input elementsSo, here is an example. Read the comments to see what the different event listeners do.