/ / Funkcia kliknutia tlačidla Jquery nefunguje vôbec - jquery

Funkcia kliknutia na tlačidlo tlačidla Jquery nefunguje vôbec - jquery

Snažím sa získať text pod mojím formuláromzmeňte na základe výberu dvoch prepínačov "áno" alebo "nie". Mám funkciu getCats, ktorá nastaví catVal na zvolené prepínacie tlačidlo. Funkcia showCats obsahuje príkaz if, ktorý mení text na základe hodnoty catVal. Odoslať je ID tlačidla na odoslanie formulára a mačka je názov tlačidla áno a žiadne prepínačov.

V súčasnosti funkcia na kliknutie nefunguje, výstraha sa nikdy nezobrazí.

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

odpovede:

1 pre odpoveď č. 1

K vášmu kódu je potrebných niekoľko zmien.

  1. Musíte zmeniť volič. Tiež je lepšie používať názov skupiny rádia namiesto kontroly pre každý prepínač v smere slučky.
  2. catValue by mal byť parametrom funkcie, aby sa dal opakovane použiť.
  3. Namiesto odosielania by ste mali použiť tlačidlo, aby ste sa vyhli obnoveniu stránky

    Here is working plunker: [Plunker][1]
    

Tu je kód:

$(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 pre odpoveď č. 2

Máte viac ako jednu otázku:

  • s cieľom vypočítať catVal môžete jednoducho napísať: $ ("[name =" cat ": checked") val ()
  • funkcia showCats potrebuje ako vstup predchádzajúci obrázok

$(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 pre odpoveď č. 3

Odoslať je ID tlačidla na odoslanie formulára

Mám podozrenie, že váš problém súvisí s presmerovaním prehliadača, keď odošlete formulár ... Myslím, že by ste mali vyskúšať nasledujúci kód:

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