Member Avatar for technopup

Hi,

Can someone help me with a javascript function that identifies <onmouseout> what radio button has been selected so that a message prints in a <div> further down the same page prior to submitting the page.

e.g.
If Radio Button value="train" is selected

Print "You have chosen the image Train: <img src="images/train.jpg" alt="Train Image">


If Radio Button value="boat" is selected

Print "You have chosen the image Boat: <img src="images/boat.jpg" alt="Boat Image">

etc. (There are about 20 values)

Any help would be great.

Thanks

  • 4 Contributors
  • 11 Replies
  • 175 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by Mary 2
Member Avatar for fxm

Um, 'onmouseout' by itself won't do what you want.
It will keep changing the <div> as the mouse moves around regardless of whether a given radio button was selected (or deselected, or not even touched).

You may find this recent post
http://www.daniweb.com/forums/post1273341.html#post1273341
(which solves this very problem) useful.

Edited by fxm because: n/a
Member Avatar for technopup

Any alternative to onmouseout for that function? What I am trying to achieve here is: depending on the radio button that is selected a corresponding image is shown to the user on the same page. Any suggestions would be great.

Member Avatar for fxm

Any alternative to onmouseout for that function?

You don't need one.
Just modify function copyThem() to display the desired image(s) instead of displaying text.

LOL!

I just realized that old thread was yours!

You should have asked your final question in a new thread (as you have now done) :)

Edited by fxm because: n/a
Member Avatar for fxm

depending on the radio button that is selected a corresponding image is shown to the user on the same page.

Just set up a bunch of <div>s, each one with an image and/or text, all hidden.

Then modify copyThem() to unhide/hide the <div> matching each radio depending on whether it is checked or not.

Member Avatar for technopup

LOL
I am soooooo new to this forum! Any chance you could give me an example of the javascript that I need to insert? very very rusty on javascript

Member Avatar for fxm

example of the javascript that I need to insert?

No charge for pseudo-code!

In the existing for loop,
if radio
getElementById(div that matches this button)
if .checked .style.display = 'block';
else .style.display = 'none';

Member Avatar for technopup

Thank you.Something like this? I'm really stuck with this :'(

<script type="text/javascript">
 function copyThem() {
            var oDiv = document.getElementById('copy')
            oDiv.innerHTML = ''
            var cINs = document.getElementsByTagName('input')
            for (j = cINs.length, i = 0; i < j; i++) {
                with(cINs[i]) {
                    if (getAttribute('onmouseout')) {
                        if radio (getElementById('train'))
            if .checked .style.display = 'block';
                        else .style.display = 'none';
            if radio (getElementById('boat'))
            if .checked .style.display = 'block';
                        else .style.display = 'none';
            {
                         oDiv.innerHTML += '<BR>' + id + ": " + value
                        }
                    }
                } // with
            } // for
        } // func

   </script>

<body>
    <form>
      <input onmouseout="copyThem()" type="radio" id="train" name="train" value="train">train<br>
      <input onmouseout="copyThem()" type="radio" id="boat" name="boat" value="boat">boat<br>
      <input onmouseout="copyThem()" id='Name'> 
      <input onmouseout="copyThem()" id='Profession'>

    </form><button onclick="">CONFIRM</button>
    <<div id='copy'></div> (to display other e.g. text input)
    <div id='train'></div> (to display train image)
    <div id='boat'></div> (to display boat image)
  </body>
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Taywin

I think you have problem with how you access DOM with JavaScript and how to do HTML here. First problem, you do not call getAttribute('onmouseout') because 'onmouseout' is an event which is automatically taken care by browser. As a result, you do not need to check for attribute because it is automatic.

Second, you do not know how to check the radio button. I am not sure whether you want to group your radio buttons or not. What I mean is that do you want each radio button to not related to one another? I mean do you allow user to be able to check on both 'train' and 'boat'? If not, the name of input elements should be the same; otherwise, keep it the way you do.

Third, the 'if radio' that fxm means is not a condition you can use directly. It means that you need to check whether or not the input type radio element exists. In JavaScript, the script will stop if there is any error occurs (interpreter type of language). In this case, if the radio does not exist, the rest of your code won't be executed. That's why 'if radio' is there to prevent the whole code to stop.

if radio (getElementById('train'))
  if .checked .style.display = 'block';
  else .style.display = 'none';
if radio (getElementById('boat'))
  if .checked .style.display = 'block';
  else .style.display = 'none';

Take a look at your code, there are many invalid use of code. I am thinking that you need to go through a JavaScript tutorial and learn how to code it first. It would not be a good idea to jump into coding without learning all basic about DOM.

First problem, 'if radio' would not be valid statement. The 'radio' is an element you need to check. Second problem, the getElementById() function must be call from a HTML document object. Third problem in JavaScript, you need parentheses around your conditions. Fourth problem, you are attempting to access an object properties but you do not specify which object you want to access its properties.

var el = document.getElementById('train')  // first use of el, declare as local variable
if (el)  // <-- check if the radio exists
  if el.checked  //  <-- check if the radio is checked (not sure if this is correct way)
    el.style.display = 'block';  // <-- if checked, display it
  else 
    el.style.display = 'none';   // <-- otherwise, hide it
el = document.getElementById('boat')  // second use, no need to declare it again
if (el)
  if el.checked  // <-- same thing happen again
    el.style.display = 'block';
  else
    el.style.display = 'none';

One warning, using if-else statement without explicitly use block (curly bracket) may cause confusion or undesired result later on.

Member Avatar for fxm

1. please use the [ code] button.

2. I previously gave you code which showed how to test for 'radio' correctly; you might want to consider using that

3. on the other hand, it isn't obvious that radio buttons are what you want for the image selection; if the user can make multiple independent yes/no choices, checkboxes are probably better

4. the test for 'onmouseout' was solely for the purpose of distinguishing between radios you wanted to echo and the rest; in the design you are now contemplating, that test may be pointless - I can't tell without seeing something more like the new page

5. unless there is a default display, you need to code all the togglable <div>s to start out as 'hidden' [or add an onload="copyThem()" call to the body].

Member Avatar for technopup

Thanks for all the advice. I really appreciate it.

I am working my way through it all now and hope to find a solution soon. It's getting my head around the if statement that identifies if the radio button or checkbox is checked and showing the corresponding div that is really causing me problems.

I will keep trying....

Member Avatar for Mary 2

it is great field

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.