?
Solved

Lock down a drop down menu after selection?

Posted on 2007-10-10
15
Medium Priority
?
4,330 Views
Last Modified: 2013-12-13
Is there a way to lock down a drop down menu once the user has selected a value? In other words, put it into a read only after a selection has been made from the menu.
0
Comment
Question by:danomatic
  • 3
  • 3
  • 2
  • +4
13 Comments
 
LVL 24

Accepted Solution

by:
glcummins earned 672 total points
ID: 20051283
I do not know a way to lock the select. You can use Javascript to store the previous selection, and always change it back during an onchange event.

Another method is to simply hide the select after it has been updated. You can show the contents of the selection in another field (perhaps a span so it will not be submitted with your form). The value of the select will still be submitted properly, even though it is hidden. We will simply use a CSS "display: none" to hide the select:

<html>
<head>
<script type="text/javascript" language="Javascript">

function updateMySelect()
{
      targetLocation = document.getElementById("mySelectValue");

      sourceLocation = document.getElementById("mySelect");

      if (sourceLocation.selectedIndex != 0)
      {
            targetLocation.innerHTML = sourceLocation[sourceLocation.selectedIndex].innerHTML;

            sourceLocation.className = "hidden";
      }

}

</script>
<style type="text/css">
select.hidden
{
      display: none;
}
</style>
</head>
<body>
<form>
<select id="mySelect" onchange="javascript:updateMySelect()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
<span id="mySelectValue"></span>
</form>
</body>
</html>
0
 
LVL 5

Assisted Solution

by:trifecta2k
trifecta2k earned 664 total points
ID: 20051385
You can disable the dropdown after selection.  You can use an onChange="updateFields()"

function updateFields(){
      document.getElementById('selStatus').disabled = true;
}

That will not allow the user to change it again.  
0
 
LVL 24

Expert Comment

by:glcummins
ID: 20051435
Correct me if I am wrong, but doesn't disabling a form object make it inaccessible after the form is submitted?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 5

Expert Comment

by:trifecta2k
ID: 20051449
You're right!  Sorry about that, to use my solution you would have to enable the field before submitting.  
0
 
LVL 29

Assisted Solution

by:Badotz
Badotz earned 664 total points
ID: 20052816
>>enable the field before submitting

Or save the id/value in a hidden <INPUT>, perhaps?
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20052820
Or better yet, submit the values using Ajax?
0
 
LVL 17

Expert Comment

by:nplib
ID: 20059379
<script language="javascript">
function disableDropdown() {
       document.bob.mySelect.disabled = true;
}
</script>

<form name="bob">
<select id="mySelect" onchange="javascript:disableDropdown()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
</form>
0
 
LVL 29

Expert Comment

by:Badotz
ID: 20059658
The trouble with disabling is remembering to enable afterwards.
The trouble with enabling is remembering to disable before submitting.
0
 
LVL 3

Author Comment

by:danomatic
ID: 20059723
ok, we will take a look at this. yes, and enabled is crucial because it submits a year to the database.
0
 
LVL 17

Expert Comment

by:nplib
ID: 20441953
then have a hidden field like this
<script language="javascript">
function disableDropdown() {
       document.bob.year.value = document.bob.mySelect.value;
       document.bob.mySelect.disabled = true;
}
</script>
 
<form name="bob">
<input type="hidden" name="year" value="" />
<select id="mySelect" onchange="javascript:disableDropdown()">
      <option selected="selected">Select One</option>
      <option value="1">Option One</option>
      <option value="2">Option Two</option>
      <option value="3">Option Three</option>
</select>
</form>

Open in new window

0
 
LVL 17

Expert Comment

by:nplib
ID: 20451864
Yes it was an objection I guess, I was just trying to give the author another possible solution since my previous post left the drop down disabled, after thinking about it would leave it useless, since once it's disabled it no longer sends the value.

So my other option sets the value of the drop down to a hidden field, disables the dropdown, so when submitted the chosen value will be passed to the processing page.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 20452171
nplib,

Thanks for your participation here but I will leave my recommendation the same.  Your post at http:#20441953 can't be considered for cleanup.  Your first post http:#20059379 used code from one expert and the suggestion of another.  If credit had been given to the experts then things may be different since you did provide an example of what Badotz suggested.

The points you just mentioned in your post are good too but were pointed out by Glcummins earlier and were posted after the cleanup post.  The solution actually ends up being one suggested by the other experts above.

Thanks for your participation here though and your contribution to this site.  Keep up the good work and don't forget to read the previous posts and provide credit when you use something from another expert.  I hope this explanation helps but feel free to post your own recommendation of how this should be closed (not another solution but a recommendation of how to close this with the comments above my cleanup post).  The moderator who closes this will view your recommendation when he finalizes this.  Let me know if you have a question about anything I said.

b0lsc0tt
EE Cleanup Volunteer
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20475714
Forced accept.

Computer101
EE Admin
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month14 days, 7 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question