Solved

Use an onclick Button to de-select a selection (Works in Mozilla but not I.E.)

Posted on 2007-03-29
8
328 Views
Last Modified: 2012-08-13
I usually code my javascript in Mozilla because of the better err console.

I coded the following and it works fine in Mozilla but not in I.E.  I never experienced this before.
I just want to give the user a chance to deselect a specfic selection from one drop-down instead of making them clear the whole page and starting over.

<script type="text/javascript">
                  
function selAllBP() {
for(var i=0;i<document.user.userrole.length;i++)
  document.user.userrole[i].selected=false;
}
</script>

*******
I am using in Coldfusion, I am attaching code:

<script type="text/javascript">
                  
function selAllBP() {
for(var i=0;i<document.user.userrole.length;i++)
  document.user.userrole[i].selected=false;
}
</script>

<body>
<cfform name="user">
<table border="1" align="center">
<tr>
<td colspan="2">Select Role:</td>
</tr>
<tr>
<td>User Role:</td>
 <td>
      <select name="userrole"  bgcolor="Ivory" size="3" required="yes" message="User Role - Required Field.
      Please Select a User Role">
                  <option value="" selected></option>
                  <option value="USER">USER</option>      
                  <option value="SUPERUSER">SUPERUSER</option>
                  <option value="APPROVER">APPROVER</option>                  
      </select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<cfinput  name="deselect" type="button" value="Deselect" onclick="selAllBP();">
</td>
</tr>
0
Comment
Question by:mahpog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 

Author Comment

by:mahpog
ID: 18819259
One more comment.

If I change the select to allow multiple, it works in Mozilla and I.E. ???  I am guessing sytnax error for only one select verus several
0
 

Author Comment

by:mahpog
ID: 18819381
In I.E. works when I code multiple="no" - but let's me select more than one option.

Mozilla works 100% exactly as you would expect.

There must be better sytnax.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 18819482
I'm not surprised it would do this. I do not know which browser shows the standards-correct behavior (maybe both do!), but in ordinary drop downs, it is impossible to not select an option.

In your case, the field seems to be required, so I don't see why it matters since you have an empty element up top. Instead, I would suggest changing your deselect function to just changing the selectedIndex to the top option.
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 

Author Comment

by:mahpog
ID: 18819580
Zyloch, I took your advise, and it did not work.

Is there a better way to code the javascript to deselect an option than what I did?  
0
 

Author Comment

by:mahpog
ID: 18819603
I understand that if I require the selection, something has to be selected.

But I also have a drop-down that the select is optional. the user made a selection, filled the remaing of a page of data, and realized that he does not want the selected option from the one drop-down, and would like to deselect just that one option, and not have to clear the whole page and start over.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 18819641
I see your dilemma. Then, the only way I can think of is to work around it. Create a separate variable for each drop down to hold the value of the current selected index of the drop down. Give it the attribute multiple="multiple". On its onclick, do the following:

onchange="this.options[oldValue].selected=false; oldValue=this.options.selectedIndex;"

Making sure to define a

var oldValue = 0;

somewhere globally. It's an ugly fix, but I don't know of a better way.
0
 
LVL 19

Accepted Solution

by:
dakyd earned 500 total points
ID: 18826418
How about changing the selectedIndex on the drop down to -1?  It's a bit of a hack, but it does work on IE6 and Firefox 2.0:

function selAllBP()
{
  document.user.userrole.selectedIndex = -1;
}

I don't have any other browsers to test on (that means no IE7), but I can't imagine the js engine changing that much from IE6 to IE7.  Anyhow, hope that helps.
0
 

Author Comment

by:mahpog
ID: 18826733
Dakyd,

You have got me laughing really hard! Oh my gosh! I tried your suggestion and it definitely does unselect the selection and the rest of the page is left alone.
Thanks!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

687 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