/ / Jquery-Button-Klick-Funktion funktioniert überhaupt nicht - jquery

Jquery-Button-Klick-Funktion funktioniert überhaupt nicht - jquery

Ich versuche den Text unter meinem Formular zu bekommenändern Sie basierend auf Ihrer Wahl von 2 Radio-Tasten "Ja" oder "Nein". Ich habe eine Funktion getCats, die catVal auf den ausgewählten Radio-Button setzt. Die Funktion showCats enthält eine if-Anweisung, die den Text basierend auf dem Wert von catVal ändert. Senden ist die ID der Schaltfläche "Senden" für das Formular und "Katze" ist der Name der Optionsfelder "Ja" und "Nein".

Momentan funktioniert die On-Click-Funktion nicht, die Warnung wird nie angezeigt.

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

Antworten:

1 für die Antwort № 1

Ihr Code muss mehrfach geändert werden.

  1. Sie müssen den Selektor ändern. Außerdem ist es besser, den Namen der Funkgruppe zu verwenden, anstatt in for for loop nach jedem Optionsfeld zu suchen.
  2. catValue sollte ein Parameter für die Funktion sein, damit sie wiederverwendbar ist.
  3. Sie sollten eine Schaltfläche anstelle von submit verwenden, um eine Seitenaktualisierung zu vermeiden

    Here is working plunker: [Plunker][1]
    

Hier ist 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>


1 für die Antwort № 2

Sie haben mehr als ein Problem:

  • um das zu berechnen CATVAL Sie können einfach schreiben: $ ("[name =" cat "]: überprüft"). val ()
  • Die Funktion showCats benötigt als Eingabe das vorherige 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>


0 für die Antwort № 3

Übergeben ist die ID der Übermittlungsschaltfläche für das Formular

Ich vermute, dass Ihr Problem mit der Browserumleitung zusammenhängt, wenn Sie ein Formular abschicken ... Ich denke, Sie sollten den folgenden Code ausprobieren:

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