Radio controls, submitting final radio button value only

Wappler General How To
#1

======== TEMPLATE BUG FORM ========

Wappler Version : 3.9.9
Operating System : Windows 10.
Server Model: NodeJS
Database Type: None
Hosting Type: Docker / AWS

Expected behavior

What do you think should happen?
Radio button control group should pass the selected radio value to the server action (API) via POST on submit.

Actual behavior

What actually happens?
On form submit the value for the radio group is always the last radio button value, regardless of the selected radio input within the form, ie ‘other’

Also get weird stuck validation css classes after form reset.
image

How to reproduce

Code for HTML radio buttons.

    <div class="form-group text-left mb-4" is="dmx-radio-group" id="business_type_group" dmx-bind:value="business_type_group.value"><label>Business Type*</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" value="retailer" id="radio_business_retailer" name="signup_form_business_type" data-msg-required="">
                                        <label class="form-check-label" for="radio_business_retailer">Retailer</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" value="brand" id="radio_business_brand" name="signup_form_business_type">
                                        <label class="form-check-label" for="radio_business_brand">Brand / Producer</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" value="other" id="radio_business_other" name="signup_form_business_type">
                                        <label class="form-check-label" for="radio_business_other">Other</label>
                                    </div>
                                </div>

Form submit code here:

    <form id="signup_form" method="post" is="dmx-serverconnect-form" class="form__container" action="/api/notifications/get_started_notification"  dmx-on:success="demo_success.success('Thanks for choosing xxxxxxx. We\'ll be in touch within one business.');signup_form.reset()" post-data="json"  dmx-on:error="notification_form.warning('Sorry something went wrong with this submission. We apologize for the inconvenience.  Please email hello@xxxxx.com')">

Tried replacing the radio group with a new full radio control group still the same.

The form submits to the server, but the value submitted to the end point API (in the server action) is always ‘other’, ie the last radio button value.

Attempted to set the radio group properties value to value, business_type_group.value and value[0].$value (ie through the data picker, as saw this in another older thread). But still no change.
image

I can’t see where I’ve got anything wrong. It shouldn’t be that complex, it should just work, no?

#2

I see some strange things in the code your provided … like this dmx-bind:value="business_type_group.value" - not sure what are you trying to do using it.

I just tested the most basic form with 3 radios and it works perfectly fine:

 <form id="form1" is="dmx-serverconnect-form" method="post" action="api/form_post">
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="1" id="radio1" name="my_radio">
                        <label class="form-check-label" for="radio1">Default radio</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="2" id="radio2" name="my_radio">
                        <label class="form-check-label" for="radio2">Default radio</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" value="3" id="radio3" name="my_radio">
                        <label class="form-check-label" for="radio3">Default radio</label>
                    </div>
                </div>
                <button class="btn btn-primary" type="submit">Button</button>
            </form>

The result (test is a set value step returning the $_POST.my_radio value) is:

Screenshot_10
Screenshot_101017×408 62.1 KB

#3

Hi Teodor,

Ah, that’s probably my copy paste when I pasted that in here (as mentioned I was testing the Radio Group Properties Value thinking I had to bind some dynamic value there for the form group. I read your reply from an old post about it somewhere. It was empty though (as that didn’t work either) (I haven’t added any code Wappler hasn’t added, ie nothing custom).

Seems it’s something with this form. I added a completely default radio group and it still sends only the third radio button value (in this specific form).

A new form with only the multi radio button group, works ok though.

Although, I’m still getting the below, post submit in this default form with only the radio group.

image

This css is still active on the first 2 radio buttons.

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
color: #28a745; }

Any thoughts on why that isn’t being removed?

I’ll have to try rebuild the entire form then. And see if it fixes the other issue with the radio submission. Thanks for the help.

#4

Hey Teodor,

Rebuitl the form. And no issues no. So not really sure what it was that created it.

(Hindsight, would have been faster recreating originally).

I’m not worried about the above validation issue on the radio buttons now though (I redirected to a thank you page instead of just submitting and resetting the form).

Couldn’t work out why/how to clear the 2 stuck validation classes on 2 buttons.

Thanks for your help as well.

#5