Solved

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

Posted on 2007-03-29
8
327 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

739 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