Jump to content

Change background and other images depending on what radio button is checked


Recommended Posts

I have to radio buttons at the login page. Both of them are in group1. The value of the first is 'fancy', the value of the second is 'fast'.

Also note that the buttons are on the login page, and i want to change the bg on the main page.

You really should end your thread with a question saying exactly what you want.

 

Luckily I can understand what you're after from your thread title. So, you will want to use javascript most probably. That will allow for a dynamic change of the background (without a page refresh). Otherwise you're going to have to submit the form (that is around the TWO radio buttons), and then do the appropriate things in php, which could mean loading a different CSS sheet, as if you have a fancy background, that could mean text colours might need to change etc.

 

For the javascript option, you will add an onClick event to each radio button, with a link to a function that will change the background.

 

In PHP, you will just check the posted variables and see which was selected using a simple if statement, and do appropriate actions for each option.

 

Denno

Because the OP stated that the radio button options are on the login page I will assume that the user will be required to submit the value and AJAX is not needed. Just make sure the radio button options are included in the same form that is submitted for login.

 

There are several different approaches you can take on the actual implementation. You could dynamically set the background color within the style properties by either writng the value into the page's style properties or within an external style sheet that is a PHP file. Or, you can have two different style sheets (one called fancy.css and the other called fast.css. I would go with the latter aproach. You could change up much more than just the background between the two styles if you wish.

 

Anyway, when the user submits the login page you can take the submitted value and save it to a session variable (or cookie). Then on each page load get the session value and include the line for the css file. Something like this

<link type="text/css" rel="stylesheet" href="style/<?php echo $_SESSION['stylesheet']; ?>.css" />

Put this at the top of every page (or better) put into an include file that is included in all pages. This assumes the radio button group is names "style_sheet".

session_start();
if(isset($_POST['style_sheet']))
{
    $_SESSION['style_sheet'] = $_POST['style_sheet'];
}

 

Then, just use the line of code I posted previously wherever you want to include the style sheet.

Oi, actually it doesnt work, just i have chosen the fast option and i didnt have a background for fast. I also tried using 'echo' to see if everything works. I tried, nothing appeared. Maybe i forgot to register session or something?

Ok, it doesn't work. What have you don't to determine why it doesn't work? What debugging have you performed and what were the results? Did you at least look at the HTML source code to see what was being generated?

 

Here is a sample page to illustrate the process:

<?php

session_start();
//Determine if the user selected a style
if(isset($_POST['style_sheet']))
{
    $_SESSION['style_sheet'] = $_POST['style_sheet'];
}
if(isset($_SESSION['style_sheet']))
{
    $style = "The selected stylesheet is {$_SESSION['style_sheet']}.css";
}
else
{
    $style = "A style has not been selected.";
}

?>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="style/<?php echo $_SESSION['stylesheet']; ?>.css" />
</head>
<body>
  <div><?php echo $style; ?></div>
  <form action="" method="post">
    Select a style: 
    <select name="style_sheet">
      <option value="fancy">fancy</option>
      <option value="fast">fast</option>
    </select>
    <br >
    <button type="submit">Go</button>
  </form>
</body>
</html>

Ok.... I used your code and now it shows what stylesheet is selected on the main page.. But still, it doesnt change the bg. I've already checked that it works and also replaced 'stylesheet' with 'style_sheet'.

Check the rendered HTML code and validate that there is a validly formatted LINK tag to specify the style sheet. If that tag is there (and properly formatted) then I would guess that either the href path in that tag is incorrect or the linked style sheet does not have the proper code to change the BG image.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.