Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile PHP image as radio button....

    Hi guys,

    I am a noob to php and i have seen similar answers to this elsewhere but nothing that really fits exactly what I am looking for.

    Basically i have a form.

    I want to have images on that fom that act like radio buttons.

    These will be coloured squares to allow the user to click one to select a colour.

    I want the user to actually click the image - not a radio button next to it.

    So i dont want the little radio button "nipple" visible...

    Just the image - when it is clicked the image is highlighted (changes colour, has a border - whatever)

    and when a submit button is clicked the value of the selected image is used in the form submission.....

    So if blue image is chosen the word "Blue" is passed when the submit is clicked - the word "blue" will then be used as part of a mysql query....

    So -any idea of the best way of doing this??

    So far all i have seen is radio buttons with an image next to them......

    Thanks in advance for any thoughts, help

    Robi

  • #2
    Regular Coder devinemke's Avatar
    Join Date
    Dec 2004
    Location
    NYC
    Posts
    443
    Thanks
    0
    Thanked 12 Times in 11 Posts
    you could do something like...
    PHP Code:
    <form action="" method="post">
    <input type="image" name="color" value="red" src="red.gif">
    <input type="image" name="color" value="white" src="white.gif">
    <input type="image" name="color" value="blue" src="blue.gif">
    </form>

    <?php
    if (isset($_POST['color'])) {echo 'you clicked ' $_POST['color'];}
    ?>

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devinemke View Post
    you could do something like...
    PHP Code:
    <form action="" method="post">
    <input type="image" name="color" value="red" src="red.gif">
    <input type="image" name="color" value="white" src="white.gif">
    <input type="image" name="color" value="blue" src="blue.gif">
    </form>

    <?php
    if (isset($_POST['color'])) {echo 'you clicked ' $_POST['color'];}
    ?>
    Yes - that is along the right lines but that posts the value as soon as the image is clicked.

    I just want it to act as a radio button and send the value once the submit button is clicked....

  • #4
    Regular Coder devinemke's Avatar
    Join Date
    Dec 2004
    Location
    NYC
    Posts
    443
    Thanks
    0
    Thanked 12 Times in 11 Posts
    PHP Code:
    <html>
    <head>
    <title>change color</title>

    <script type="text/javascript" language="javascript">
    function change_color(color)
    {
        document.getElementById('form_tag').action += color;
        document.getElementById(color).border = 5;
    }
    </script>

    <style type="text/css">
    body {background-color: <?php echo $_GET['color']; ?>;}
    </style>

    </head>
    <body bgcolor="white">

    <form action="test.php?color=" method="post" id="form_tag">
    choose color and then hit submit:<br><br>
    <a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
    <input type="submit" name="submit" value="submit">
    </form>

    <?php
    if (isset($_GET['color'])) {echo 'you selected ' $_GET['color'];}
    ?>

    </body>
    </html>

  • #5
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devinemke View Post
    PHP Code:
    <html>
    <head>
    <title>change color</title>

    <script type="text/javascript" language="javascript">
    function change_color(color)
    {
        document.getElementById('form_tag').action += color;
        document.getElementById(color).border = 5;
    }
    </script>

    <style type="text/css">
    body {background-color: <?php echo $_GET['color']; ?>;}
    </style>

    </head>
    <body bgcolor="white">

    <form action="test.php?color=" method="post" id="form_tag">
    choose color and then hit submit:<br><br>
    <a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
    <input type="submit" name="submit" value="submit">
    </form>

    <?php
    if (isset($_GET['color'])) {echo 'you selected ' $_GET['color'];}
    ?>

    </body>
    </html>

    hey - thanks devinemke

    Thats much closer!! Good work!!

    The only problem with that is when you select one colur if you select another the first remains selected.

    So i need to work out how to allow only one choice - so if a user clicks red...but then changes their mind and clicks blue....only "blue" is submitted when the submit button is clicked

    Am guessing this will be javascript? Maybe on the onclick event?

    Also - I would prefer it to do a post rather than get?

    As i dont want to pass this infomationin the URL
    Last edited by paraleadogg; 12-04-2008 at 10:28 PM. Reason: adding details

  • #6
    Regular Coder devinemke's Avatar
    Join Date
    Dec 2004
    Location
    NYC
    Posts
    443
    Thanks
    0
    Thanked 12 Times in 11 Posts
    this one uses whatever color was selected last before hitting submit (much like a radio button would behave) and uses a hidden POST var rather than a GET var
    PHP Code:
    <html>
    <head>
    <title>change color</title>

    <script type="text/javascript" language="javascript">
    function change_color(color)
    {
        document.getElementById('color').value = color;
    }
    </script>

    <style type="text/css">
    body {background-color: <?php echo $_POST['color']; ?>;}
    </style>

    </head>
    <body bgcolor="white">

    <form action="" method="post">
    choose color and then hit submit:<br><br>
    <a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
    <input type="submit" name="submit" value="submit">
    <input type="hidden" name="color" value="" id="color">
    </form>

    <?php
    if (isset($_POST['color'])) {echo 'you selected ' $_POST['color'];}
    ?>

    </body>
    </html>

  • Users who have thanked devinemke for this post:

    paraleadogg (12-04-2008)

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by devinemke View Post
    this one uses whatever color was selected last before hitting submit (much like a radio button would behave) and uses a hidden POST var rather than a GET var
    PHP Code:
    <html>
    <head>
    <title>change color</title>

    <script type="text/javascript" language="javascript">
    function change_color(color)
    {
        document.getElementById('color').value = color;
    }
    </script>

    <style type="text/css">
    body {background-color: <?php echo $_POST['color']; ?>;}
    </style>

    </head>
    <body bgcolor="white">

    <form action="" method="post">
    choose color and then hit submit:<br><br>
    <a href="javascript:change_color('red');"><img src="red.gif" id="red" alt="red" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('green');"><img src="green.gif" id="green" alt="green" border="2" width="100" height="50"></a><br><br>
    <a href="javascript:change_color('yellow');"><img src="yellow.gif" id="yellow" alt="yellow" border="2" width="100" height="50"></a><br><br>
    <input type="submit" name="submit" value="submit">
    <input type="hidden" name="color" value="" id="color">
    </form>

    <?php
    if (isset($_POST['color'])) {echo 'you selected ' $_POST['color'];}
    ?>

    </body>
    </html>

    Much respect!! This is exactly what I needed.....

    One last thing - as I am a total NOOOOB

    If I wanted to change the image?? when it was selected?? to highlight it?

    (so swap it for a darker image or place a tick on it or something)

    So that the user could see that it was selected?

    Would this be difficult??

    The border thing is no longer working

    I tried re-adding the

    document.getElementById('color').border = 5;

    to the javascript function but it didnt work??

    But if I could show another image when it was selected then that would be even better and EXACTLY what I was looking for

    Once again thanks for your help

    Much appreciated

    Robi


  •  

    Tags for this Thread

    Posting Permissions

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