Disable Dropdown Menus in Web Form

[mdupras]

I'm having trouble getting something similar to this function to work:

http://forums.caspio.com/viewtopic.php?t=3647&sid=6f47d64070f6b402cb5e40a5e6df5453

I have a web form in which users input the hours a restaurant is open, as well as hours they serve breakfast, lunch, happy hour, etc. The open and close times for each are selected using a dropdown menu. The first two dropdowns indicate the open and close time overall for the restaurant. I want to set the form up so that if the user selects \"Closed\" in the first dropdown, it disables all the other dropdowns -- this is to help prevent errors such as having hours for when the restaurant serves breakfast on a day it's closed!

I've done this successfully on search and report pages, but the code didn't work here. I tried something similar to what was outlined in the post above, but that's not working either. Here's my code:

function hideFields()
{
var mainSelect = \"Closed\";
if (document.getElementById(\"InsertRecorddineHours_open\").value == mainSelect)
{
document.getElementById(\"InsertRecorddineHours_closed\").disabled = true;
}
else
{
document.getElementById(\"InsertRecorddineHours_closed\").disabled = false;
}

}

onload = hideFields;

document.getElementById(\"InsertRecorddineHours_open\").onchange = hideFields;

Any thoughts on this? Thanks!

-- Mike

[bahar_vm]

Hi Mike,

I am suspecting that is because of the dropdown element. Try to call the dropdwon like this:

var x=document.getElementById(\"InsertRecorddineHours_open\");

if (x.option[x.selectedIndex].text == mainSelect)

See if this works; if it does not, give me the URL of the page where I can see it.

Best,

Bahar. M

[mdupras]

Hi Bahareh --

That didn't seem to work either. Here's how I used the code you gave me:

function hideFields()

{

var mainSelect = \"Closed\";
var mainOpenDrop = document.getElementById(\"InsertRecorddineHours_open\");

if (mainOpenDrop.option[mainOpenDrop.selectedIndex].text == mainSelect)
{
document.getElementById(\"InsertRecorddineHours_closed\").disabled = true;
}
else
{
document.getElementById(\"InsertRecorddineHours_closed\").disabled = false;
}

}

onload = hideFields;

document.getElementById(\"InsertRecorddineHours_open\").onchange = hideFields;

Here's the URL:

http://b2.caspio.com/dp.asp?AppKey=18321000e3e5h6i0h2e8h4i2j3f4

Thanks for your help!

-- Mike

[bahar_vm]

Hi Mike,

Sorry it should be options not option, try this and hopefully it will work.

Best,

Bahar M

[mdupras]

That did it -- thanks!

[cheonsa]

Hi @mdupras,

 

As I understand, you want to disable the other dropdowns if the value of the first dropdown is "Closed". You don't need to use JavaScript to implement this. 

Just an update, you can use Conditional Forms to do this. 

For more details, you may visit this article: https://howto.caspio.com/datapages/forms/conditional-forms/

 

- kristina