Multiple onchange events

wesmanbigmig13
wesmanbigmig13 used Ask the Experts™
on
Hi

I would like to know how to fire/run two onchange events when a drop-down box on a simple HTML form changes.

Please provide just the syntax required and a brief example - I seem to remember it needing a ; (semi-colon) between events, but I'm not sure, so need expert assistance.

Thanks

Wes
This is my current code with one onchange event:
 
<select name="origstate" width="200" id="origstate" onchange="if(this.selectedIndex == '8')document.getElementById('textfield10').disabled = false; else document.getElementById('textfield10').disabled = true;">
 
And this is the extra event that I need to add:
 
onchange="form1.statefinal.value = this.value;"
 
How do I combine both onchange events into one action?

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004
Commented:
Probably the cleanest way is to abstract it all into a separate function:

onchange="some_function_name(this);"

Then, in a script block within the  section, include

function some_function_name(el)
{
    if (el.selectedIndex === 8)
        document.getElementById('textfield10').disabled = false;
    else
        document.getElementById('textfield10').disabled = true;

    document.forms['form1'].statefinal.value = el.value;
}

Commented:
The semi column works, but prefer using a javascript function :
<script type="text/javascript">
 
function myOnChange(el)
{
  if(el.selectedIndex == '8')
    document.getElementById('textfield10').disabled = false; 
  else 
    document.getElementById('textfield10').disabled = true;
 
  form1.statefinal.value = el.value;
}
 
</script>
 
<select name="origstate" width="200" id="origstate" onchange="myOnChange(this);">

Open in new window

Murali MurugesanFull stack Java developer

Commented:
write a java script function as below,
<head>
<script>
  function event_onchange(){
    if(this.selectedIndex == '8')
        document.getElementById('textfield10').disabled = false;
    else
       document.getElementById('textfield10').disabled = true;

     form1.statefinal.value = this.value;
}
</script>
</head>

and call it onchange

<select name="origstate" width="200" id="origstate" onchange="event_onchange();">
  <option  value=""></option>
</select>


-Murali*
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Zyloch is the fastest :)
Pawel WitkowskiSenior Javascript Developer
Top Expert 2008

Commented:
have you tried this ?:)
<select name="origstate" width="200" id="origstate" onchange="if(this.selectedIndex == '8')document.getElementById('textfield10').disabled = false; else document.getElementById('textfield10').disabled = true; form1.statefinal.value = this.value;">

Open in new window

Murali MurugesanFull stack Java developer

Commented:
Oops same time post, ignore my post as it was already answered by experts.
 
Top Expert 2004

Commented:
I find it great that we use the same naming convention for el :-D

Author

Commented:
Thanks both Zyloch and flob9 - one more thing I would like to know please is how to add an extra action to the else statement:

else
    document.getElementById('textfield10').disabled = true;


I need to add this action:

document.getElementById('textfield10').value = "";

How do I do that?

Thanks

Commented:
else
{
    document.getElementById('textfield10').disabled = true;
    document.getElementById('textfield10').value = "";
}
Pawel WitkowskiSenior Javascript Developer
Top Expert 2008
Commented:
all in one line :)
<select name="origstate" width="200" id="origstate" onchange="if(this.selectedIndex == '8')document.getElementById('textfield10').disabled = false; else {document.getElementById('textfield10').disabled = true; document.getElementById('textfield10').value = "";} form1.statefinal.value = this.value;">

Open in new window

Top Expert 2004

Commented:
Well, you guys are the speed demons this time :-)
Commented:
More clean :
function myOnChange(el)
{
  var textfield = document.getElementById('textfield10');
 
  if(el.selectedIndex == '8')
    textfield.disabled = false; 
  else 
  {
    textfield.disabled = true;
    textfield.value=""
  }
 
  document.form1.statefinal.value = el.value;
}

Open in new window

Author

Commented:
Ok thanks for all the comments - it looks like we're close, but not quite there...

I have tried this as a one line solution:

<select name="origstate" width="200" id="origstate" onchange="if(this.selectedIndex == '8')document.getElementById('textfield10').disabled = false; else {document.getElementById('textfield10').disabled = true; document.getElementById('textfield10').value = "";} form1.statefinal.value = this.value;">

But the textfield10 edit box doesn't get enabled - ie it always stays disabled.

2) And I have tried this solution too, as the "cleaner" solution, but when I try this the whole page doesn't load anymore...

In <Head>...
<SCRIPT LANGUAGE="JavaScript">
<!--
function myOnChange(el)
{
  var textfield = document.getElementById('textfield10');
 
  if(el.selectedIndex == '8')
    textfield.disabled = false;
  else
  {
    textfield.disabled = true;
    textfield.value=""
  }
 
  document.form1.statefinal.value = el.value;
}
</SCRIPT>

And in <Body>...

<select name="origstate" width="200" id="origstate" onchange="myOnChange(this);">

Any ideas?

Commented:
remove the "<!--"

Commented:
or add "-->" before </script>

Author

Commented:
Thanks everyone - solution is in place thanks to you guys. I have split the points proportionally to the assistance in reaching the overall solution.

Thanks again

Wes

Author

Commented:
flob9's final solution was the one that worked out in the end for me. Thanks to everyone else for contributing.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial