Assign a field value from html code

[tim.young]

Another suggestion would be to use a radio select field, set icons in the field settings, display those icons on the form, and then use some custom CSS to style the radio options.

If you still wanted to save the selected option into a text field, you can use record rules to set the text field value to the value of the radio select on submit.

Here’s a sample - https://timyoung.tadabase.io/button-populate-text-field#!/default

and the CSS

.tb-radio{
    text-align:left;
}
/* General Settings Padding, border-radius, unselected or not hovered over color and border */
.tb-radio.radio-icon-btn {
    padding: 2px 68px;
    background-color: #fafafa;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
}
/* Blue */
.tb-radio.radio-icon-btn:hover {
    background-color: #e3f2fd; /* lighten-5 */
    color: #42a5f5; /* lighten-1 */
    border-color: #42a5f5; /* lighten-1 */
}
.tb-radio.radio-icon-btn.selected {
    background-color: #e3f2fd; /* lighten-5 */
    color: #1e88e5; /* darken-1 */
    border-color: #1e88e5; /* darken-1 */
}

In the Data Builder. Open the field settings for a radio select field and choose your icons

And in the page builder, open the form and then open the radio select field settings and choose Show Icons

[optimizsql]

I like that idea, let me try this for sure!

Thank you so much.

[tim.young]

You’re very welcome!

[optimizsql]

Whoa, it is working!!!

Do you know how to change the regular ICO by the database logo ?

[legacydocs]

Hello, I tried to trying using the form fields int the table but , when I tried to hide the option lnline label the radio button became small. I dont want the option labels to be repeated on every row so I used the html code and tried to bind it to the table. Im not sure how to make it save the radio buttons from the html to the table. I tried to follow this but am completely lost. Ive been trying and you the resources since Friday. Any help would be great. Thanks

[Co1in]

If you go down the custom HTML path, you still need a real Tadabase field in the form for the value to actually save.

Add the field to the form (a radio or even a text field is fine), then hide it from the user. Don’t use the built-in CSS style “hide”, or anything that removes it from the DOM, Tadabase won’t pick it up on submit. Just hide it visually with CSS instead.

Then use a bit of JavaScript to push the selected value from your HTML radio buttons into that hidden field when the user clicks.

That way, your custom UI is what the user sees, but Tadabase is still handling the save properly in the background.

Also, just be aware that Tadabase may strip parts of your HTML (especially scripts or inline JS), so if something isn’t working, that’s likely why. In that case, move your JavaScript to the page JS section instead of embedding it in the HTML.

[legacydocs]

@Co1in

If you go down the custom HTML path, you still need a real Tadabase field in the form for the value to actually save.

Add the field to the form (a radio or even a text field is fine), then hide it from the user. Don’t use the built-in CSS style “hide”, or anything that removes it from the DOM, Tadabase won’t pick it up on submit. Just hide it visually with CSS instead.

Then use a bit of JavaScript to push the selected value from your HTML radio buttons into that hidden field when the user clicks.

That way, your custom UI is what the user sees, but Tadabase is still handling the save properly in the background.

Also, just be aware that Tadabase may strip parts of your HTML (especially scripts or inline JS), so if something isn’t working, that’s likely why. In that case, move your JavaScript to the page JS section instead of embedding it in the HTML.

Thank you I will try this. I would perfer to use the built in form but I am struggling with the lay out as attached. I want it to look like the html version.