Collapsed submit button won't expand

Ask the community
,
1

I have a custom form with a radio button group (2 choices). If one of the options is selected, a date input field is expanded, if the other option is selected, my collapsed submit button is supposed to expand so that the form can be submitted.
Works perfectly when the date option is selected, but when the button option is selected, nothing happens. I cannot work out why?
Here is my code:

export function callbackRadiogroup_click(event) {
    console.log($w("#callbackRadiogroup").value);
 if ($w("#callbackRadiogroup").value==="callMenow") {
        $w("#callbackBook").expand();
    }
 if ($w("#callbackRadiogroup").value==="specificCalltime") {
        $w("#callbackDate").expand();
    } 
}

Button ID = #callbackBook
Any advice would be appreciated.

2

Hello Dean Pitout,

  1. why you do not use —> ELSE ?
if (   ) {     }
else  {     }
  1. Are all your references right?
  2. Always when you work with collapse and expand, do also a check if the elemnts are visible at the moment.
$w('#hereMyelementName').show() ---> shows an element
$w('#hereMyelementName').hide() ---> hides an element
3

If you are using a radio button group then you might be better off using onChange instead of onClick.

Check that both the button and the datepicker are set in the properties panel as collapsed on load and if they are both sitting on top of each other, you will need to make sure that one is hidden when the other one is being shown.

Note that using collapse affects how your page layout works, so your datepicker might be blocking the submit button from showing.
https://support.wix.com/en/article/corvid-how-page-layout-is-affected-when-elements-change-size

Depending on your page layout, simply using hide and show might be an easier option for you.

Plus, make sure that the values used in the radio group element match exactly with the values being used for it in the code.

If you have Call Me Now as the shown label and callMeNow as the value, then callMeNow must be used in code and not callMenow,

Your code would look something like this using if/else as mentioned above.

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

export function callbackRadiogroup_change(event) {
	if ($w('#callbackRadiogroup').value === 'callMenow') {
		$w('#callbackBook').expand();
		$w('#callbackDate').collapse();
	} else {
	if ($w('#callbackRadiogroup').value === 'specificCalltime') {
		$w('#callbackDate').expand();
		$w('#callbackBook').collapse();
	}
}
}
4

@GOS @russian-dima
Thank you both for your advice which was very helpful. In the end it was #callMenow instead of #callmeNow that was my undoing. Thanks again for pointing out the need to pay careful attention to these details.

5

It’s always the little things which are difficult to find /figure out.