CODEWITHSUNDEEP
javascriptjqueryhtml
user2680614
user2680614

Reputation:

How to hide a button in form

I need to know how I can make the "Next" button hidden until one of the choices are chosen. I'm open to using Javascript and JQuery.

Here is the JSFiddle: http://jsfiddle.net/547fx/

Here is the Javascript:

function tryToMakeLink() {
//get all selected radios
var q1 = document.querySelector('input[name="q1"]:checked');

//make sure the user has selected all 3
if (q1 == null) {
    document.getElementById("linkDiv").innerHTML = "<input type=button  
disabled=disabled value=Next>";
} else {
    //now we know we have 3 radios, so get their values
    q1 = q1.value;

    //now check the values to display a different link for the desired configuration
    if (q1 == "AT&T") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://google.com/';\">att 8gb black</input>";
    } else if (q1 == "Other") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://yahoo.com/';\">other 8b white</input>";
    } else if (q1 == "Unlocked") {
        document.getElementById("linkDiv").innerHTML = "<input type=button value=Next 
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
    }
}
}

Upvotes: 1

Views: 162

Answers (2)

Vlad
Vlad

Reputation: 978

Add this jQuery

$('#quiz').on('change', 'input[type="radio"]', function() {
  $('#linkDiv').show();
});

and this CSS

#linkDiv {display:none;}

http://jsfiddle.net/r9sJS/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Just add display: none to the style of the button. This will work with the rest of your code:

http://jsfiddle.net/547fx/1/

I would also recommend you refactor a bit and not use innerHTML or onClick. With jQuery you can do something like:

$("[name=q1]").on("click", function () {
    $("#linkDiv").show();
    switch ($(this).val()) {
        //update target URL and text
    }
});

Upvotes: 3

Related Questions