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, Apr 26 '17 at 22:04
Also if you're gonna compare strings make sure to use === instead of ==. — James, Apr 26 '17 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, Apr 26 '17 at 22:09
@ChrisHappy because you reduce the error margin. A good explanation here: http://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons — James, Apr 26 '17 at 22:11
@dikkini I'm not sure if it works or not, I assumed the button wasn't working because the alert didn't work. — Kait Jardine, Apr 26 '17 at 23:43

score 1 · Answer 1 · answered Apr 26 '17 at 22:16

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>

Great answer, missed the `:checked`. Deleted my answer ;) – Chris Happy Apr 26 '17 at 22:19 — Chris Happy, Apr 26 '17 at 22:19

score 1 · Accepted Answer · answered Apr 26 '17 at 22:37

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>

score 0 · Answer 3 · answered Apr 26 '17 at 22:13

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

Jquery button click function not working at all

3 Answers3