Making a button change when an input is selected

Question

I am trying to make a Yes/No input change the function of a button. If the input is Yes then I want the button to be a hyper link, but if it is a no I want it to take you to the next div (once the button is clicked)

I have NO idea how to do this.

Here is what I have

I am imagining I need a jquery thing to start like this:

$('input:radio[name="yes"]').change(
function(){
    if ($(this).val() == 'Yes') {
        $('.1').css('display', 'block');
    }
    else {
        $('.2').css('display', 'block');
    }
});

I tried giving the buttons a different class and then trying to have the show up, but that wasn't working.

<form>
    <input type="radio" name="yes" value="Yes"/>Yes
<input type="radio" name="yes" value="No"/>No
</form>

<a href="#"><button>Yes</button></a>
<button class="no">No</button>

This is what the buttons would look like

Any help would be great!

Jai · Accepted Answer · 2013-03-29 07:04:21Z

2

You should try with this:

FIDDLE

HTML:

 <input type="radio" name="button" value="Yes" />Yes
 <input type="radio" name="button" value="No" />No

 <button class='yes'>Yes</button>
 <button class="no">No</button>

jQuery:

 $('input:radio').change(function () {
   if ($(this).val() == 'Yes') {
      $('[class="yes"]').show().siblings('button').hide();
   } else {
      $('[class="no"]').show().siblings('button').hide();
   }
});

Try to group them with same name and try a change event on this radio button then show the corresponding button.

and even a better one:

$('input:radio').change(function () {
  var rad = this.value.toLowerCase();
  $('[class="' + rad + '"]').show().siblings('button').hide();
});

fiddle

edited Mar 29, 2013 at 7:04

answered Mar 29, 2013 at 6:47

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tim Cooley Over a year ago

Awesome! I was close on my idea lol Ok so when you load the page you get the Yes and No Button to show then when you click Yes or No the other dissapears. How do I make it so that only 1 button is visible the whole time, but button's function changes when the Yes or no is shown?

Tim Cooley Over a year ago

I think I figured it out. I can just set the CSS of the "no" to be display:none I think that will work

Jai Over a year ago

Absolutely doing that will do as per your requirement.

Tim Cooley Over a year ago

I also came up with another idea, which was to set one of the inputs to selected! I like this option better. Thanks again for the help!

Tim Cooley Over a year ago

out of curiosity why is the class=no in "[]"?

|

Collectives™ on Stack Overflow

Making a button change when an input is selected

1 Answer 1

HTML:

jQuery:

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML:

jQuery:

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related