/ / Jquery бутон функцията не работи изобщо - jquery

Функцията за щракване на бутон на Jquery не работи изобщо - jquery

Опитвам се да получа текста под формуляра сипромяна на базата на вашия избор от 2 радио бутона "да" или "не". Имам функция getCats, която поставя catVal на избрания бутон за избор. Функцията showCats съдържа израз if, който променя текста въз основа на стойността на catVal. Изпратете е id на бутона за изпращане на формуляра, а котката е името на бутона "Да" и "Не".

В момента функцията за кликване не функционира, сигналът никога не се показва.

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

Отговори:

1 за отговор № 1

Има няколко промени, необходими за вашия код.

  1. Трябва да промените селектора. Също така е по-добре да използвате името на групата радио, вместо да проверявате за всеки бутон за включване на бутоните.
  2. catValue трябва да бъде параметър на функцията, така че да бъде повторно използваема.
  3. Трябва да използвате бутон, вместо да подадете, за да избегнете опресняване на страницата

    Here is working plunker: [Plunker][1]
    

Ето кода:

$(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>


1 за отговор № 2

Имате повече от един проблем:

  • за да изчисли catVal можете просто да напишете: $ ("[name =" cat "]: checked") val ()
  • функцията showCats се нуждае от въвеждане на предишния катал

$(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>


0 за отговор № 3

Изпращане е идентът на бутона за изпращане на формуляра

Подозирам, че проблемът ви е свързан с пренасочването на браузъра, когато изпратите формуляр ... Мисля, че трябва да опитате следния код:

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