CODEWITHSUNDEEP
javascripthtmljquery
Sky Forest
Sky Forest

Reputation: 33

radio button check doesnt work with jquery

hello I am testing radio buttons on my page but it doesn't work correctly else why not go into else if block? uncheck works but not when you select a radio button

JQuery Code

$("#s1").click(function () {
      if ($("input[name=test]").prop("checked", false)) {
        alert("Lütfen Seçin");
      } else if ($("input[name=test]:checked").val() == "dunya") {
        var x = parseInt($("#testt").text());
        $.ajax({
          url: "test.php",
          data: { get_data: x },
          type: "post",
          success: function (e) {
            alert("Tebrikler Doğru cevapladınız ve +10 puan kazandınız");
            $("#testt").text(e);
          },
        });
      } else {
        alert("Yanlış Cevap Verdiniz Tekrar Kontrol Edin");
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="a" name="test" value="dunya">
<input type="radio" id="b" name="test" value="print">
<input type="radio" id="c" name="test" value="sayi">
<input type="button" value="Kontrol Et" class="first_btn" id="s1">

Upvotes: 3

Views: 49

Answers (1)

ROOT
ROOT

Reputation: 11622

You are checking for the wrong values in the first if statement, and it will always come true what you should be checking for is the checked radio button of test input, not the props of the whole radio button set:

$("input[name=test]:checked").val()

This is how it should look like:

$("#s1").click(function () {
  if ($("input[name=test]:checked").val() === "sayi") {
    console.log("INSIDE sayi check statement");
    alert("Lütfen Seçin");
  } else if ($("input[name=test]:checked").val() === "dunya") {
    console.log("INSIDE dunya check statement");
    var x = parseInt($("#testt").text());
    $.ajax({
      url: "test.php",
      data: { get_data: x },
      type: "post",
      success: function (e) {
        alert("Tebrikler Doğru cevapladınız ve +10 puan kazandınız");
        $("#testt").text(e);
      },
    });
  } else {
    console.log("INSIDE print check statement");
    alert("Yanlış Cevap Verdiniz Tekrar Kontrol Edin");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="a" name="test" value="dunya">
<input type="radio" id="b" name="test" value="print">
<input type="radio" id="c" name="test" value="sayi">
<input type="button" value="Kontrol Et" class="first_btn" id="s1">

for validation and checking if user selected one input, you can do something like this:

$("#s1").click(function () {
  // Here we are checkinig if any radio button is selected.
  if($("input[name=test]:checked").val() === undefined) {
    alert('PLEASE SELECT A VALUE');
    return ;
  }
  
  if ($("input[name=test]:checked").val() === "sayi") {
    console.log("INSIDE sayi check statement");
    alert("Lütfen Seçin");
  } else if ($("input[name=test]:checked").val() === "dunya") {
    console.log("INSIDE dunya check statement");
    var x = parseInt($("#testt").text());
    $.ajax({
      url: "test.php",
      data: { get_data: x },
      type: "post",
      success: function (e) {
        alert("Tebrikler Doğru cevapladınız ve +10 puan kazandınız");
        $("#testt").text(e);
      },
    });
  } else {
    console.log("INSIDE print check statement");
    alert("Yanlış Cevap Verdiniz Tekrar Kontrol Edin");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="a" name="test" value="dunya">
<input type="radio" id="b" name="test" value="print">
<input type="radio" id="c" name="test" value="sayi">
<input type="button" value="Kontrol Et" class="first_btn" id="s1">

Upvotes: 2

Related Questions