How To Change Background Image Dynamically Only When Radio Button Is Selected And By Pressing Submit Button

how to change background image dynamically only when radio button is selected and by pressing submit button link to sample

Solution 1:

Using only Javascript

Test it online: http://jsfiddle.net/OscarGarcia/t70prkda/

HTML test code:

<form name="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Desactivate</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Activate</p>
    <input type="submit" />
</form>

Javascript code:

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.background = "red";
    } else {
        document.body.style.background = "";
    }
    return false;
}

Edit 1: Using jQuery

Test it online: http://jsfiddle.net/OscarGarcia/t70prkda/1/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background', "red");
    } else {
        $('body').css('background', "");
    }
    return false;
}

Edit 3: Changing background image in JS and jQuery

For simplicity my code only change background color, this one changes background image: http://jsfiddle.net/OscarGarcia/t70prkda/2/

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('body').css('background-image', "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)");
    } else {
        $('body').css('background', "");
    }
    return false;
}

And in pure javascript: http://jsfiddle.net/OscarGarcia/t70prkda/3/

function check() {
    if (document.form.bg.value == "yes") {
        document.body.style.backgroundImage = "url(https://c2.staticflickr.com/8/7151/6717697085_6d28849226_z.jpg)";
    } else {
        document.body.style.background = "";
    }
    return false;
}

Edit 3: Smooth background image transition

Try it online: http://jsfiddle.net/OscarGarcia/2g6rfdsf/

CSS Code:

body {
    height: 100%;
}

#overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px;
    margin:0px;
    width: 100%;
    height: 100%;
    background: red url(http://thumbs.dreamstime.com/z/abstract-blue-tiled-background-5151518.jpg) -400px center;
    transition: all 2s ease-in-out;
    opacity: 0;
    z-index: -1;
}

HTML Code:

<div id="overlay"></div>
<form name="form" id="form" onsubmit="return check()">
    <p><input type="radio" name="bg" value="no" />
        Fade-out</p>
    <p><input type="radio" name="bg" checked="checked" value="yes" />
        Fade-in</p>
    <input type="submit" />
</form>

Note that I'm using an overlay (a div over the background) with opacity 0 (hidden) and I'll animate the opacity. It's not possible to animate background image changes, they will change instantly.

And javascript (jQuery version) code:

function check() {
    if ($("#form input[name=bg]:checked").val() == "yes") {
        $('#overlay').
            css('opacity', '1').
            css('background-position', '0px center');
    } else {
        $('#overlay').
            css('opacity', '0').
            css('background-position', '-400px center');
    }
    return false;
}

When pushing button background overlay will show or hidden smoothly because CSS code transition: all 2s ease-in-out; while left position changes slowly too!.

Hope it helps!

Solution 2:

You will want to use jquery to register the eventHandler with both actions.

Something like:

var backgroundHandler = function(){//whatever};
$('#radioWhatever').on('changed',backgroundHandler);
$('#submitbtn').on('click', backgroundHandler);