• Quick note - the problem with Youtube videos not embedding on the forum appears to have been fixed, thanks to ZiprHead. If you do still see problems let me know.

Simple javascript query

Rasmus said:
I am assuming that clicking one radiobutton should triggerto onchange-events: One for the button you activated, and one for the previously activated button. So each trigger only has to pass on where it was called from, right?
Click to expand...
You'd still need a massive switch statement in that case, which set visibility states depending on what had been selected.
 
Okay, so onchange is not triggered for any of the other buttons on my machine - looks like you have to go the difficult route.
 
Rasmus said:
I am assuming that clicking one radiobutton should triggerto onchange-events: One for the button you activated, and one for the previously activated button. So each trigger only has to pass on where it was called from, right?
Click to expand...

Depends on the browser you're using and whether the handler returns true or false.
 
moopet said:
Depends on the browser you're using and whether the handler returns true or false.
Click to expand...

I tried it in firefox. I am not sure what the return has to do with it, though? Logically, there should just be two independent events. The old radiobutton gets changed regardless of how I handle the change of the new one, right?

And it doesn't work if I call the event on only on of the buttons, either. It should still trigger if I click any of the other buttons - but it doesn't.
 
Rasmus said:
I tried it in firefox. I am not sure what the return has to do with it, though? Logically, there should just be two independent events. The old radiobutton gets changed regardless of how I handle the change of the new one, right?

And it doesn't work if I call the event on only on of the buttons, either. It should still trigger if I click any of the other buttons - but it doesn't.
Click to expand...

Events bubble differently in different browsers - when one radio button gets toggled on, yes it does toggle the old one off, but whether it fires a change event for the old button depends on what has been returned by the handlers for previous events in the chain. If it's not the problem you're having then it's not important, though.
 
Rat said:
The visibility (or rather display) of the text needs to depend on the on/off state of the radio or checkbox.

Am I missing something really obvious? Is there a different event handler I can use or is this going to need more complex scripting? Because it's been a while since I was competent in anything more than basic scripting.
Click to expand...
I see nothing wrong with onChange, nor do I see any need for overly complex code...

Simple IFs will work for the radio buttons
and IF/ELSE statements can handle the checkboxes

The significant difference I'd recommend is populating relevant DIVs using .innerHTML

e.g.
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>show/hide</title>
    <style type="text/css">
      body {
        background-color:#fff; 
        color:#006;
        margin: 2em;
        font-family: Arial,Verdana,Helvetica,sans-serif; 
        font-size:1em;
      }
    </style>
    <script type="text/javascript">
      var alpha = 'Alpha alpha alpha alpha alpha alpha alpha alpha';
      var bravo = 'Bravo bravo bravo bravo bravo bravo bravo alpha';
      var charlie= 'Charlie  charlie  charlie  charlie  charlie  charlie  charlie  charlie ';
      var delta  = 'Delta  delta  delta  delta  delta  delta  delta  delta ';
      var echo  = 'Echo  echo  echo  echo  echo  echo  echo  echo ';
      var foxtrot  = 'Foxtrot  foxtrot  foxtrot  foxtrot  foxtrot  foxtrot  foxtrot  foxtrot ';
      
      function respondToRadioChange() {
        if (document.myFormName.r1A.checked == true) {
          document.getElementById('myRadioStuff').innerHTML = alpha;
        }
        if (document.myFormName.r1B.checked == true) {
          document.getElementById('myRadioStuff').innerHTML = bravo;
        }
        if (document.myFormName.r1C.checked == true) {
          document.getElementById('myRadioStuff').innerHTML = charlie;
        }
       }
       
       function respondToCheckboxChange() {
        if (document.myFormName.cDelta.checked == true) {
          document.getElementById('myDelta').innerHTML = delta;
        }
        else {
          document.getElementById('myDelta').innerHTML = '';
        }
        
        if (document.myFormName.cEcho.checked == true) {
          document.getElementById('myEcho').innerHTML = echo;
        }
        else {
          document.getElementById('myEcho').innerHTML = '';
        }
        
        if (document.myFormName.cFoxtrot.checked == true) {
          document.getElementById('myFoxtrot').innerHTML = foxtrot;
        }
        else {
          document.getElementById('myFoxtrot').innerHTML = '';
        }
       }
       
    </script>
  </head>
  <body>
    <h1>
      Show/Hide
    </h1>
    <form name="myFormName" action="">
      <div id="myRadioButtons">
        <br><input type="radio" name="radioOne" id="r1A" value="vAlpha" 
                onChange="respondToRadioChange();">
                <label for="r1A">Alpha</label>
        <br><input type="radio" name="radioOne" id="r1B" value="vBravo" 
                onChange="respondToRadioChange();">
                <label for="r1B">Bravo</label>
        <br><input type="radio" name="radioOne" id="r1C" value="vCharlie" 
                onChange="respondToRadioChange();">
                <label for="r1C">Charlie</label>
      </div>
      <div id="myRadioStuff">
        <noscript>
          <p>
            Please Note: To use all of the features on this page, please allow javascript to run in your browser
          </p>
        </noscript>
        Hello world
      </div>
      <div id="myCheckBoxes">
        <br><input   type="checkbox" name="cDelta" id="cDelta" 
                  onChange="respondToCheckboxChange();">
                  <label for="cDelta">Delta</label>
        <br><input   type="checkbox" name="cEcho" id="cEcho" 
                  onChange="respondToCheckboxChange();">
                  <label for="cEcho">Echo</label>
        <br><input   type="checkbox" name="cFoxtrot" id="cFoxtrot" 
                  onChange="respondToCheckboxChange();">
                  <label for="cFoxtrot">Foxtrot</label>
      </div>
      <p id="myDelta">
         
      </p>
      <p id="myEcho">
         
      </p>
      <p id="myFoxtrot">
         
      </p>
    </form>
  </body>
</html>
 
You must log in or register to reply here.

Back
Top Bottom