Database Single Field Input from multiple radio buttons

Hi All, I am currently building a project where I require a user to fills out an installation submission, choose’s a store, the type of installation & QTY required. Then the trick is… based on the QTY required, I need to then have the user choose which products he requires, then submit and lodge it to the database. I am struggling at the moment as I’ve set up with radio buttons, and check box’s, which visually is perfect, however I can only select 1 box and input it into 1 field.

Is there anyway I can have either multiple check boxes or radio buttons submit into 1 database field (IE - 5 Radio box values insert into a single database field)?

If not, what are my options? Is it possible to create a text dropdown menu that allows multiple selections and not just one?

Editor URL - https://editor.wix.com/html/editor/web/renderer/edit/b2eb1913-3fdc-4edc-b567-a53f12e10594?metaSiteId=9322f3ae-de58-4e45-948d-fd8532898d21&editorSessionId=4B948481-50AD-4B26-B55F-4E141E285663

REF BELOW OF WHAT IT LOOKS LIKE

Hi,

In order to submit multiple check boxes into one DB field, you would need some coding.
Instead of binding the Submit button to the DB collection using the editor, you would need to do the following:

  1. Creating an onClick event for the Submit button.

  2. Creating an array and for each checked checkbox, add its value to the array (creating an array of strings with the relevant values).

  3. Insert the array and the other information added by the user to the collection using the Wix-Data API .

I hope it’s clear.

Have a good day,
Tal.

Hi Tal,

Thank you very much for your guide & input on this.

I’ve tried as best as I can to follow your guide and have done the following;

1. Creating an onClick event for the Submit button. - 

I have done this.


2. Creating an array and for each checked checkbox, add its value to the array (creating an array of strings with the relevant values). 

I have tried to implement this.

  • I created a public file “ProductList.js”
  • And followed the guide on Arrays to do the folllowing:

I assume then if this is correct (concerned its so where near correct lol) I will need to action this from page or site coding panel which I assume is what step 3 is?

3. Insert the array and the other information added by the user to the collection using the Wix-Data API . 

I partially followed this step, as I’m not 100% sure if stage 2 is correct as it has me slighlty puzzled…

Can you advise me if I’m on the right path?

Thanks in advance,

  • Conor

Hi,
I discovered that I can input the selected button value from a multiple radio item list by changing the “Edit Value” to Match the “Edit Label”. When selecting a multiple list radio button it returns the “Edit Value” to the Wix database field.
Hope this helps someone else :slight_smile:

Hi parklanepestcontrol,

I’m not sure this will work with what I’m trying to achieve… Can the multiple radio buttons be selected at the same time & all be inputted into a single cell in the database - IE (Product 1, Product 5, Product 20) etc ?

Would you kindly share how you achieved this to see if your scenario is better that what I have achieved?


I have found a way to have multiple checkboxes into a single column in the database by doing the following;

This is what the user will see;


This is the code running on-page

$w.onReady(() => {
$w('#dataset1').onBeforeSave(() => {
let checked = [];

        if ($w('#CommunicationBoard').checked)
        checked.push(' Communication Board');
        if ($w('#RoomSetting').checked)
        checked.push(' Room Setting');
        if ($w('#StockDisplay').checked)
        checked.push(' Stock Display');
        if ($w('#HandBoard').checked)
        checked.push(' Hand Board');
        if ($w('#LoosePiece').checked)
        checked.push(' Loose Piece'); 
        
$w('#dataset1').setFieldValue('typeOfInstallation', checked);  
     });
});

The flaw with coding this way is; I have over 300 types of checkboxes across different product dropdown type. The page takes roughly 20-30 seconds to load the webpage due to the onReady() load of all checkboxes values.

There is a way of coding these in the backend of the system, and triggering the call when the submit button is hit, however I am not an expert coder and can’t figure out how this can be achieved this way.

Kind Regards,
Conor

Hi Conor,
Please see Radio buttons on my “Quote Page” Image 1 below. Those Radio buttons are the ones you select as a group from Wix input. Please see Image 2 Radio buttons with the name “Kim, Kendall, Kylie”. Select that grouping, See Image 3 and change the “Edit Value” to match the “Edit Label”. When a user selects from these buttons the “Edit Value” will be input directly into the Wix Database Field you have matched it with. This makes it easy to get the data in and read it.

Image 1

Image 2

Image 3

Hi Again,

Thanks for sending this through. I’m not sure this is the correct option for what I’m trying to achieve;

My problem with these radio buttons option is;

Example: Kim, Kylie & Kendall radio buttons.
If a user wants to select “Kylie” & “Kim” at the same time, the radio button option only allows for ONE selection and not multiple - if i’m correct?

Where as what I’m trying to achieve is: The user see’s multiple radio buttons or checkboxes, and can select either 1 or 20 if they wish. This then submitss into a single cell on the database.

Kind Regards,
Conor

Hi Conor,
Please re-read my post because my solution inputs 1 choice or selection into 1 database field from a multiple radio button check button. Please see my own page where this is currently in action, ie a multiple radio button group, where a user selects one radio button and any selction from that group goes into 1 field into the Wix database.

Hi Conor,
Also please note that you cannot select multiple options for a Multiple Radio Button Grouping but only one option can be selected at a time. If you need to see user selection for a specific option(1) then you will have to use only 1 radio button connected to 1 Wix database field. If however you would like the user to select 1 option from 5 options and have that result entered into the Wix database field, then you would select a multiple Radio button option as in the case with “Kim, Kendall, Kylie” connected to 1 Wix database field.

Hi,

I’ve had a look at your website, you’ve found a great work around for yourself!

Unfortunately your methodology wouldn’t work for my application :frowning: as i’ve too many multi-selection options that need to be selected for by the user.

See my work thus far, to see how many product options I have (Excuse the load time) - https://www.rakceramicsvm.com.au/submit-a-job

Cheers,
Conor

Hi Again,

To answer your question - yes that is exactly correct & what I need to achieve.

If you select any of the “Installation type” Checkboxes, this will show a hidden container, with multiple dropdown menus. In each menu contains around 30 products that could be chosen, in any assortment they wish.

See below as an example -


As you can see by the high volume of checkboxes in each hidden container, this is making the webpage load very slow, so i need to find an alternative to this that won’t slow the webpage loading speed.

Kind Regards,
Conor

Hi Conor,
I think you would be better off breaking the form into sections. So you can capture customer data and move customers to the next section and capture thae next lot of data. You have terrible load times on that page and that will affect user experience, which could result in your form not being used. Breaking the page into multiples and capturing the data one section at a time will hopefully address page load timing, user experience and also allow you to capture each section into the database as you are wanting to do. :slight_smile:

Hi Conor,
This is a good work around for what your trying to do;
1- Create array at top of code
2- Create a button to go over your checkbox(s), hidden on load
3- On checkbox click show button (make sure you bring it to the front in the visual editor) and push value to var
4- On button click hide button and splice array of the value and set checkbox to unchecked
5- On submit button enter your array into database field (not in example code)

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

var numbers = [];

$w.onReady(function () {

});

export function checkbox1_click(event, $w) {
	$w("#button1").show();
	numbers.push("01");
}

export function button1_click(event, $w) {
	$w("#button1").hide();
	$w("#checkbox1").checked = false;

	for (var i = numbers.length - 1; i >= 0; i--) {
		if (numbers[i] === "01") {
			numbers.splice(i, 1);
		}
	}
}

Let me know if you follow

Hello Parklane,
Could you help me? I need the follow to happen, but don’t know how:
When someone selects a value from the Multiple Radio Button (lets say 1 to 5) and then clicks in a “Submit” button, the value from the Multiple Radio Button is added to a field in my database. How can I do this? Should the field type be Text or Numbers? Or other?
Thanks

can you send your all code so i can look

Hello Avrumi,
I’m hoping you are talking to me :slight_smile:
I don’t have any code so far related to this issue, just a few lines in a custom cascading form.
Here it is:

Hi Conor,

I’ve been working off both of your forums posts relating to this goal and I can’t seem to get the solution that you’ve implemented (the one you say is slow given the number of options you have).

Do you have to connect your code to a button or is this supposed to update the database the moment you select the checkbox?

Would love to pick your brains if you’re free at some point!

Many thanks
Edley

Hi Conor,
I’ve been working off both of your forums posts relating to this goal and I can’t seem to get the solution that you’ve implemented (the one you say is slow given the number of options you have).
Do you have to connect your code to a button or is this supposed to update the database the moment you select the checkbox?
Would love to pick your brains if you’re free at some point!
Many thanks
Edley

I think I’m in the right place and I’ve done my due diligence but not being a coder, I don’t think any of the above work for me. With the example below, I’m trying to collect data from clients describing their brand to me. I envision 11 radio buttons with values from -5 to 5 (Y-axis), for 8 demographic characteristics (X-axis). Would love to know a way to collect these selections into a simple data collection. Any suggestions?