Jquery button click function not working at all

Question

I'm trying to get the text below my form to change based on your choice of 2 radio buttons 'yes' or 'no'. I have a function getCats that sets catVal to the chosen radio button. The function showCats features an if statement that changes the text based on the value of catVal. Submit is the id of the submit button for the form and cat is the name of the yes and no radio buttons.

Currently the on click function isn't working, the alert never appears.

$(document).ready(function(){
    $('#submit').click(function(){
        alert('k');
        getCats();
    });
});
function getCats() {
    var cats = $([name='cat']);
    var catVal;
    for(var i = 0; i < cats.length; i++){
        if(cats[i].checked){
            catVal = cats[i].value;
        }
    }
    showCats();
}
function showCats(){
    alert('show');
    if (catVal == 'yes'){
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no'){
        $("#catReact").text('I guess you must be a dog person.');
    }
}

var cats = $([name='cat']); should give you a syntax error. it might be that… — James
– James, Commented Apr 26, 2017 at 22:04
Also if you're gonna compare strings make sure to use === instead of ==. — James
– James, Commented Apr 26, 2017 at 22:06
One question @Adrián, why do you need a triple equal sign if comparing strings? I thought you only need to if you want to check the typeof the variable. — Chris Happy
– Chris Happy, Commented Apr 26, 2017 at 22:09
@ChrisHappy because you reduce the error margin. A good explanation here: stackoverflow.com/questions/359494/… — James
– James, Commented Apr 26, 2017 at 22:11

alpeshpandya · Accepted Answer · 2017-04-26 22:37:00Z

There are multiple changes needed to your code.

You need to change selector. Also it is better to use radio group name instead of checking for each radio button in for loop.
catValue should be a parameter to the function so it will reusable.
You should use a button instead of submit to avoid page refresh
```
Here is working plunker: [Plunker][1]
```

Here is code:

$(document).ready(function(){
$('#submit').click(function(){
    alert('k');
    getCats();
}); });
function getCats() {
var catVal= $("[name='cat']:checked").val();;

showCats(catVal);  } 
function showCats(catVal){
    alert(catVal);
    console.log($("#catReact"))
    if (catVal == 'yes'){
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no'){
        $("#catReact").text('I guess you must be a dog person.');
    }
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <form action="">
  <input type="radio" id="radio1" name="cat" value="yes"> Cat<br>
  <input type="radio" id="radio2" name="cat" value="no"> Dog<br>
  
  <input type="button" id="submit" value="submit">
  <div id="catReact" ></div>
</form>
    
  </body>

</html>

gaetanoM · Accepted Answer · 2017-04-26 22:16:01Z

1

You have more than one issue:

in order to compute the catVal you can simply write: $("[name='cat']:checked").val()
the function showCats needs as input the previous catVal

$(document).ready(function () {
    $('#submit').click(function (e) {
        e.preventDefault();
        getCats();
    });
});
function getCats() {
    var catVal = $("[name='cat']:checked").val();
    showCats(catVal);
}
function showCats(catVal) {
    if (catVal == 'yes') {
        $("#catReact").text('Hello fellow cat lover!');
    }
    if (catVal == 'no') {
        $("#catReact").text('I guess you must be a dog person.');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="">
    <input type="radio" name="cat" value="yes"> I love cats<br>
    <input type="radio" name="cat" value="no" checked> I dislike cats<br>
    <input type="submit" id="submit" value="Submit">
</form>

<p id="catReact"></p>

answered Apr 26, 2017 at 22:16

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

1 Comment

Chris Happy Over a year ago

Great answer, missed the :checked. Deleted my answer ;)

Badacadabra · Accepted Answer · 2017-04-26 22:13:47Z

0

Submit is the id of the submit button for the form

I suspect your problem is related to browser redirection when you submit a form... I think you should try the following code:

$('form').submit(function (e) {
  e.preventDefault();
  alert('k');
  getCats();
});

answered Apr 26, 2017 at 22:13

Badacadabra

8,5357 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

Jquery button click function not working at all

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related