Jump to content
  • 0

Disable Dropdown Menus in Web Form


mdupras
 Share

Question

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

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...