SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi:

    I don't know why radio buttons give me fits in Javascript, but they do. Argghh... anyway, I'm trying to set up a form in which the user clicks on a radio button, to which a URL is attached, and then they are taken to that URL when they submit the form. Below is a simplified version that works using onClick, but I don't want it to redirect the user when they click on the radio button. I want it to wait until they submit the form. I know this is easy, but I'm braindead right now... I can't seem to get it properly pass the value of "destination" to a separate function. Can anyone help? Thanks!

    <html>
    <head>
    <title>JavaScript Sample</title>
    </head>
    <body>
    <p>Click One</p>
    <form>
    <input type="radio" name="destination"
    onClick="location.href='page1.html'"> Page 1<br>
    <input type="radio" name="destination"
    onClick="location.href='page2.html'"> Page 2<br>
    <input type="radio" name="destination"
    onClick="location.href='page3.html'"> Page 3<br>
    </form>
    </body>
    </html>

  2. #2
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    <html> 
    <head> 
    <title>JavaScript Sample</title> 
    </head> 
    <body> 
    <p>Click One</p> 
    <form onSubmit="location=this.destination.value; return false;"> 
    <input type="radio" name="destination" 
    value="page1.html"> Page 1<br> 
    <input type="radio" name="destination" 
    value="page2.html"> Page 2<br> 
    <input type="radio" name="destination" 
    value="page3.html"> Page 3<br> 
    </form> 
    </body> 
    </html>
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  3. #3
    SitePoint Addict Phil-man's Avatar
    Join Date
    Nov 2000
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No luck. It tried it with both "location" and "location.href". The latest incarnation is below. When I submit the form, it tries to assign the value "undefined" to location.href, instead of assigning one of the document names. Any other ideas? Thanks again!

    <html>
    <head>
    <title>JavaScript Sample</title>
    </head>
    <body>
    <p>Click One</p>
    <form onSubmit="location.href=this.destination.value; return false;">
    <input type="radio" name="destination" value="page1.html"> Page 1<br>
    <input type="radio" name="destination" value="page2.html"> Page 2<br>
    <input type="radio" name="destination" value="page3.html"> Page 3<br>
    <input type="submit" value="Go!">
    </form>
    </body>
    </html>

  4. #4
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here ya go. It seems you can't access the value of the selected radio button directly; you need to first determine which radio button is selected, then get its value.

    Code:
    <html>
    <head>
    <title> type_Document_Title_here </title>
    <script language="JavaScript">
    <!--
    function gotoSelectedRadio(radioGroup) {
      for (var i=0; i<radioGroup.length; i++)
        if (radioGroup[ i ].checked)
          location=radioGroup[ i ].value;
      return false;
    }
    //-->
    </script>
    </head>
    <body>
    <p>Click One</p> 
    <form onsubmit="return gotoSelectedRadio(this.destination);"> 
    <input type="radio" name="destination" value="page1.html"> Page 1<br> 
    <input type="radio" name="destination" value="page2.html"> Page 2<br> 
    <input type="radio" name="destination" value="page3.html"> Page 3<br> 
    <input type="submit" value="Go!"> 
    </form> 
    </body>
    </html>
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •