Hey guys,
I’m not a html developer, I used a html code from one of the community member because I liked the presentation of it and it does a much better UI and will be easier for my clients.
My goal is when a client click on one of the html button in a form, I can assign a text value of a field before the form will be submitted.
Example, check at the screen capture for the visual side and I have included sample html codes, they are not real for now, because I’m wondering how to assign that value.
If a client click on “MySQL” html button, I want to insert or assign “MySQL” to a text field, how can I do it ?
Here an example of the html button:
Thanks in advance, Eric
Hi Eric,
So you want to click a button and populate the dropdown select labeled “DB Type” with a value from the button? If so, is the dropdown a select field or a connection field?
Hi Tim,
For now it is a connected field. But my objective is to get rid of the dropdown boxes and keep only the HTML buttons because it will be much easier for my clients, but for that when a client clicks on a HTML button I will need to populate a text field.
Regards
Eric
Populating a connection is more difficult because you need to set the field value with a record ID.
Let me think about this for a bit, maybe some other community members will have suggestions.
If you have any recommendations with a regular text field (not connected), I’m open too.
Eric
For a basic text field, you could do something like this but I’m sure there are much better ways to approach this.
Give your buttons unique ID’s in your HTML component. I’ve given this button the ID of “btn1”
<p><button id="btn1">MariaDB</button></p>
Then add this JS to the page. Replace “#field0DzjGaNYp1” with the field input from your page by right clicking in the text field input box, inspecting the page, and copy the field ID. And make sure to change the value “MariaDB” to match each button.
$("#btn1").click(function () {
$("#field0DzjGaNYp1").val("MariaDB");
});
You can copy/paste the JavaScript for as many buttons as you need while making sure to change each pasted version with the correct button ID
https://timyoung.tadabase.io/button-populate-text-field#!/default
Hi Tim,
Thank you so much for taking the time to share your knowledge.
I have tried and probably it is something minor that I ignore but it doesn’t work.
Please check at the screen capture because I don’t know how to keep the code as is here.
Thanks
Eric
I forgot to mention that the html code that I use is coming from one of your post if it can help
Regards
Eric
Can you try removing the link tags from your HTML? Remove the <a> and </a>
I did and the same issue.
Very sorry to bother with this…
I noticed that the problem is not the button or text field, it is that the javascript is not called, I have added an alert() and it doesn’t show up. I have tried a basic button and didn’t work.
I’m wondering why it is working on your side and I have the same from my end.
I think I know what’s happening.
Can you try putting the HTML in an HTML component outside the form?
Just did under the “optimize” button and nothing. 
Can you copy/paste your HTML here? It doesn’t have to be formatted or anything.
Do you have a link to the page that you can share?
Here is the html code below and no I can’t share a link to the APP on the public side.
<div class="buttonBlock" style="text-align: center;"><button id="btn1" class="portalButton"> <img class="buttonIcon" src="https://image.flaticon.com/icons/svg/2145/2145406.svg" alt="" width="28" height="35" /><br /><span class="buttonSubheading">MariaDB</span></button></div>
I’ll play around with it and see if I can figure out why this isn’t working at all for you.
The JavaScript I posted here will not work when the button is inside the form. That’s my mistake. Maybe @Chem can help with that.
@optimizsql I’m at a loss right now. I’ve tested this with the HTML you’re using and it works fine for me outside the form. Again, the JavaScript I provided will not work inside the form (sorry again) but hopefully someone else can help with that.
Thank you Tim, very appreciated!
