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:

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

Javascript code:

functioncheck() {
    if (document.form.bg.value == "yes") {
        document.body.style.background = "red";
    } else {
        document.body.style.background = "";
    }
    returnfalse;
}

Edit 1: Using jQuery

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

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

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/

functioncheck() {
    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', "");
    }
    returnfalse;
}

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

functioncheck() {
    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 = "";
    }
    returnfalse;
}

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:

<divid="overlay"></div><formname="form"id="form"onsubmit="return check()"><p><inputtype="radio"name="bg"value="no" />
        Fade-out</p><p><inputtype="radio"name="bg"checked="checked"value="yes" />
        Fade-in</p><inputtype="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:

functioncheck() {
    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');
    }
    returnfalse;
}

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);