CODEWITHSUNDEEP
jquery
Kait Jardine
Kait Jardine

Reputation: 103

Jquery button click function not working at all

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.');
    }
}

Upvotes: 0

Views: 653

Answers (3)

alpeshpandya
alpeshpandya

Reputation: 492

There are multiple changes needed to your code.

  1. You need to change selector. Also it is better to use radio group name instead of checking for each radio button in for loop.
  2. catValue should be a parameter to the function so it will reusable.

  3. 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>

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 1

Badacadabra
Badacadabra

Reputation: 8497

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

Upvotes: 0

Related Questions