submit button configuration

Ask the community
, ,
1

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

1310×530 45.6 KB

2

Something like

Button.onClick(){

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

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

}
3

I am having problem, Can you help out

1359×669 106 KB

4

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

(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

$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.

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.

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

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.

5

You can see more on this page too.
How to Change the Text Label of a Button with Events

6

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