# submit button configuration

**URL:** <https://forum.wixstudio.com/t/submit-button-configuration/24108>\
**Category:** Ask the community\
**Tags:** wix-forms, code, question\
**Created:** [February 28, 2020, 7:13am UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108 "2020-02-28T07:13:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![suffianansari](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@suffianansari](https://forum.wixstudio.com/u/suffianansari)\
**Post date:** [February 28, 2020, 7:13am UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/1 "2020-02-28T07:13:28Z")

</div>

I want to configure the submit button (answer button) to show a custom text message (correct answer london), when a user clicks submit button. How can I configure this without using wix forms.  
(I am designing quiz questions without using wix forms)

Thanks

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/e/3e8d8e766ef4e6a8ed4a4396c71a7ea26a6d5d52.jpeg)

---

<div class="post-metadata">

**Author:** ![alvarezcarlosg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/alvarezcarlosg/32/17464_2.png) [@alvarezcarlosg](https://forum.wixstudio.com/u/alvarezcarlosg)\
**Post date:** [February 28, 2020, 7:48am UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/2 "2020-02-28T07:48:28Z")

</div>

Something like

```javascript
Button.onClick(){

let answer = $w("#item").value;

if(answer === "London") {$w("#button").label="CORRECT"} else {$w("#button").label="INCORRECT"}

}

```

---

<div class="post-metadata">

**Author:** ![suffianansari](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@suffianansari](https://forum.wixstudio.com/u/suffianansari)\
**Post date:** [February 28, 2020, 10:48am UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/3 "2020-02-28T10:48:22Z")

</div>

I am having problem, Can you help out

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/0/30ba7d6148b2b445f32f6ff6f250dd7e9dceb3a7.jpeg)

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [February 28, 2020, 12:39pm UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/4 "2020-02-28T12:39:35Z")

</div>

If you add a submit button through the Wix Editor, then you can add pass and fail messages from the actual settings itself.

[https://support.wix.com/en/article/adding-a-submit-button-to-your-form](https://support.wix.com/en/article/adding-a-submit-button-to-your-form)

(Optional) Click **+ Add success message**.  
A text element is added to your page with a default message for your selection. You can keep the default text or edit the text to customize your message.

(Optional) Click **+ Add failure message**.  
A text element is added to your page with a default message for your selection. You can keep the default text or edit the text to customize your message.

However, to add it through code to get the message pop up when the button is clicked or to get the button label to change, simply do something like this code below and like on this website example here.  
[https://givemeawhisky.wixsite.com/radiobuttonexample](https://givemeawhisky.wixsite.com/radiobuttonexample)

```javascript
$w.onReady(function () {
});

export function button1_click(event) {
if ($w('#radioGroup1').value === 'London') {
$w('#correctMessage').show();
$w('#wrongMessage').hide();
} else {
if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
$w('#wrongMessage').show();
$w('#correctMessage').hide();
}
}
}

export function button2_click(event) {
if ($w('#radioGroup1').value === 'London') {
$w("#button2").style.backgroundColor = "green";
$w("#button2").style.color = "yellow";
$w('#button2').label = "CORRECT!";
} else {
if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
$w("#button2").style.backgroundColor = "red";
$w("#button2").style.color = "yellow";
$w('#button2').label = "WRONG!";
}
}
}

export function button3_click(event) {
$w('#radioGroup1').value = "";
$w('#radioGroup1').resetValidityIndication();
$w("#button2").style.backgroundColor = "#384AD3";
$w("#button2").style.color = "white";
$w('#correctMessage').hide();
$w('#wrongMessage').hide();
}

```

Make sure that your radio button values in the radio button group are the same as the ones used in your code.

![](https://us1.discourse-cdn.com/wix/original/3X/c/5/c5afaf6be4ad4d825d3b4f06bf9912e90cfd9be8.png)

For the first button with the hidden messages until clicked, then make sure that the two text elements for ‘you are correct’ and ‘you are incorrect’ set up as hidden on load in the properties panel.

![](https://us1.discourse-cdn.com/wix/original/3X/5/e/5ea8305328b7c89663aaa582662b63ae64eff5d1.png)

To find out more about using Button and Style in code, then have a look at the Wix API references here.

> **[Button - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/button)**
>
> A button on your site.

> **[Style - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/style)**
>
> An object representing an element's styles.

Finally, if you are just copying the code sample from given replies and not fully understanding it, then it will not work for you.

Like in Carlos and my own replies, you need to make sure that the elements on your page are matched up to the element id names as used in the code.

Also, if you have an ‘export function button2\_click(event) {’ line of code, then you need to make sure that you have added the onClick event handler to the button element through the properties panel for it.

> **[Velo: Working with the Properties & Events Panel | Help Center | Wix.com](https://support.wix.com/en/article/velo-working-with-the-properties-events-panel)**
>
> Visit the Velo by Wix website to onboard and continue learning.
> See what the Properties and Events panel looks like hereThe Properties and Events panel lets you

> **[Velo Tutorial: Adding Custom Interactivity with Events | Help Center | Wix.com](https://support.wix.com/en/article/velo-tutorial-adding-custom-interactivity-with-events)**
>
> Visit the Velo by Wix website to onboard and continue learning.In this tutorial, we’ll show you how to set up an image so that it’s hidden when the page loads,

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [February 28, 2020, 12:51pm UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/5 "2020-02-28T12:51:18Z")

</div>

You can see more on this page too.  
[How to Change the Text Label of a Button with Events](https://support.wix.com/en/article/how-to-change-the-text-label-of-a-button-with-events)

---

<div class="post-metadata">

**Author:** ![suffianansari](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@suffianansari](https://forum.wixstudio.com/u/suffianansari)\
**Post date:** [February 28, 2020, 2:12pm UTC](https://forum.wixstudio.com/t/submit-button-configuration/24108/6 "2020-02-28T14:12:05Z")

</div>

Thank you very much for the answer. This technique looks fine.