CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvc
Cybercop
Cybercop

Reputation: 8678

on radio button change, display different buttons

I have a view where there are two radiobuttons, I want to display different buttons(of type submit) for each radiobuttons.

Below is the rendered Html for the radiobuttons

<input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" />
<input id="Isattending_1" name="Isattending" type="radio" value="No" />

these are my buttons

<input type="submit" id="yes" class="btn btn-primary" value="Next>>" />
<input type ="submit"id="no" class="btn btn-primary" value="Submit" />

and this is the script I have written, 

<script>
    $(document).ready(function () {
        $(function defaultState() {
            $("#yes").show();
            $("#no").hide();
        })
        $('input:radio[name=Isattending]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                $("#yes").show();
                $("#no").hide();                                     
            }
            $('#Isattending_1').change(function () {

                if ($("#Isattending_0").is(':checked')) {
                    $("#no").show();
                    $("#yes").hide();                    
                }   
            })
        })

    })

</script>

but now, No matter which button i click, Next>> button is always shown or on the other hand Submit button is never shown, no matter which radiobutton i select.

Since by default Isattending_0 is checked i wanted to show next button thats why i made defaultStatefunction. But once Isattending_1 is checked I want to hide button Next>> and show button Submit, how do I do that?

Upvotes: 0

Views: 407

Answers (5)

Merlin
Merlin

Reputation: 4917

WORKING FIDDLE

$(document).ready(function () {
     $(function defaultState() {
         $("#yes").show();
         $("#no").hide();
     })
     $('input:radio[name=Isattending]').change(function () {         
         if ($("#Isattending_0").is(':checked')) {
             $("#yes").show();
             $("#no").hide();  
         }else {
             $("#yes").hide();
             $("#no").show();
         }            
     })
})

EDIT

As you asked in the comment to change only the button text. Here is a working example FIDDLE

Yes :<input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" />
No  :<input id="Isattending_1" name="Isattending" type="radio" value="No" />

<input type="submit" id="button" class="btn btn-primary" value="Next" />

$(document).ready(function () {
     $('input:radio[name=Isattending]').change(function () {         
         if ($("#Isattending_0").is(':checked')) {             
             $("#button").attr('value', 'Next');
         }else {            
            $("#button").attr('value', 'Submit');
         }            
     })
})

Upvotes: 0

user2571870
user2571870

Reputation:

Why do you need 2 submits maybe you can just have one and change it's value on change.

P.S.: Sorry I can't comment...

UPDATE:

<input type="submit" id="submit" class="btn btn-primary" value="Submit" />

UPDATE AGAIN to make sure the radio button is checked. 

$(document).ready(function () {
     $('input:radio[name=Isattending]').change(function () {         
         if($(this).is(':checked')){
             if( $(this).val()=="Yes"){
                 $("#submit").val("Next>>");
             }
             else{
                 $("#submit").val("Submit");
             }        
         }   
     })
})

Upvotes: 1

melvas
melvas

Reputation: 2356

try this: 

 $(document).ready(function () {
    $(function defaultState() {
        $("#yes").show();
        $("#no").hide();
    })
    $('input:radio[name=Isattending]').change(function () {
        if ($('input[name=Isattending]:checked').attr('id') == "Isattending_0") {
            $("#yes").show();
            $("#no").hide();                                     
        } else {
                $("#no").show();
                $("#yes").hide();                    
            }   
    })

})

http://jsfiddle.net/CJRmk/27/

Upvotes: 0

ssimeonov
ssimeonov

Reputation: 1426

<script>
    $(document).ready(function () {
        $(function defaultState() {
            $("#yes").show();
            $("#no").hide();
        })
        $('input:radio[name=Isattending]').change(function () {

            if ($("#Isattending_0").is(':checked')) {
                $("#yes").show();
                $("#no").hide();
            }
            else {
                $("#no").show();
                $("#yes").hide();
            }
        })

    })
</script>

Upvotes: 0

Paweł Bejger
Paweł Bejger

Reputation: 6366

First of all get rid of this line:

$('#Isattending_1').change(function ()

because a change function is already assigned to this radiobutton. Second of all you should have 2 if-statements - one checking if the first radiobutton is checked and the second checking if the second radiobutton is checked: 

    $('input:radio[name=Isattending]').change(function () {

        if ($("#Isattending_0").is(':checked')) {
            $("#yes").show();
            $("#no").hide();                                     
        }
        else if ($("#Isattending_1").is(':checked')) {
            $("#no").show();
            $("#yes").hide();                    
        }   
    })

Third of all: in case when you need simply yes/no (true/false) it is better to use a checkbox then two radiobuttons.

Upvotes: 0

Related Questions