Unable to use RadioButton with JQuery - Alert doesn't pop up

Question

I have two radio buttons and I want to display an alert when one of them is checked, it seems that the problem is that it doesn't recognize the element because the alert doesn't pop up!

This code used to work but it doesn't anymore (I think I changed the Id of one of the elements and that's what caused the issue)

JS:

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
});
/*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

$("form input:radio").change(function() {
    if ($(this).val() == "Yes") {
        document.getElementById("recordType").value = "01220000000FdvyAAC";
        alert("Yes");

    } else {
        document.getElementById("recordType").value = "01220000000FffjAAC";
        console.log(document.getElementById("recordType").value);
        alert("No");
    }
});

HTML

    <form method='post' id='prechatForm' autocomplete="on">
        <div id="bankEmployeeYesNoRadioButtonDiv">
          <label>{!$Label.Bank_Employee}</label><br/>
          <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
          <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
          <label for="radio-2" class="radioLabel">{!$Label.No}</label>
          <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
        </div>
</form>

Result: When I click on a radio button nothing happens, no alert. No Console Errors Notes: Please note that I'm using Salesforce (Visualforce) syntax.

What errors do you get? Also, inputs are self-closing. There is no ``. Finally, your example has no `
` element or element with the ID of `recordType`. If you're using jQuery, then *use* jQuery. This `$("#recordType").val()` not `document.getElementById("recordType").value` — j08691, Jun 05 '17 at 13:54
try changing this $("form input:radio").change(function() to this $("form input[type = 'radio']").change(function() — Karthik Ganesan, Jun 05 '17 at 13:56
@j08691 ,1) No alert showing up 2) this is Salesforce (visualforce) syntax, that's why I have to use closing elements.3) Sorry this is just a snippet not the full code 4) I will try your last suggestion — Json, Jun 05 '17 at 14:00

Luciano Huguenin · Answer 1 · 2017-06-05T14:07:05.793

your jquery selector is wrong, so change this:

<div id="bankEmployeeYesNoRadioButtonDiv">
  <label>{!$Label.Bank_Employee}</label><br/>
  <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
  <label for="radio-2" class="radioLabel">{!$Label.No}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
</div>

to:

<form id="bankEmployeeYesNoRadioButtonDiv">
  <label>{!$Label.Bank_Employee}</label><br/>
  <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes"></input>
  <label for="radio-2" class="radioLabel">{!$Label.No}</label>
  <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No"></input>
</form>

Didn't work, it acts the same (no console errors and no alert popping) — Json, Jun 05 '17 at 14:12

Kashkain · Answer 2 · 2017-06-05T16:24:52.217

Your have a lot of mistake... You try to find "form" in your js but you don't have any form tag in your HTML, you don't have also tag with this id : "recordType". However, your alert is good :)

Next time, just F12 (open your browser console) and read the errors.

EDIT : Add JQuery UI

$("document").ready(function () {
    $(".r1").checkboxradio({
        icon: false
    });

    $(".r1").change(function () {
        if ($(this).val() == "Yes") {
            alert("Yes");
        } else {
            alert("No");
        }
    });
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <title>Test</title>
</head>

<body>
    <!-- Modal Register -->
    <div id="bankEmployeeYesNoRadioButtonDiv">
        <label>{!$Label.Bank_Employee}</label><br/>
        <label for="radio-1" class="radioLabel">{!$Label.Yes}</label>
        <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-1" class="r1" value="Yes" />
        <label for="radio-2" class="radioLabel">{!$Label.No}</label>
        <input type="radio" name="liveagent.prechat:BankEmployee" id="radio-2" class="r1" value="No" />
    </div>
    <!--/ Modal Register -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="./script.js"></script>
</body>

</html>

You removed a very important part of my script, I need the JQuery plugin to work and you comment it. — Json, Jun 05 '17 at 14:15
The "modified" code you provided isn't working along with checkboxradio — Json, Jun 05 '17 at 14:16
I edit my answer, I didn't understand that "checkboxradio" was JQuery UI — Kashkain, Jun 05 '17 at 16:25

score 0 · Accepted Answer · answered Jun 05 '17 at 16:03

Change this:

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
});
/*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

$("form input:radio").change(function() {
    if ($(this).val() == "Yes") {
        document.getElementById("recordType").value = "01220000000FdvyAAC";
        alert("Yes");

    } else {
        document.getElementById("recordType").value = "01220000000FffjAAC";
        console.log(document.getElementById("recordType").value);
        alert("No");
    }
});

To this:

/*This function is responsible for for the radio buttons*/
$(function() {
    $(".r1").checkboxradio({
        icon: false
    });
    /*This function changes the RecordTypeId according to the BankEmployeeCheckbox*/

    $("form input:radio").change(function() {
        if ($(this).val() == "Yes") {
            document.getElementById("recordType").value = "01220000000FdvyAAC";
            alert("Yes");

        } else {
            document.getElementById("recordType").value = "01220000000FffjAAC";
            console.log(document.getElementById("recordType").value);
            alert("No");
        }
    });

});

Thank you it's working though I don't understand why I need to wrap the input:radio selector inside the document.ready method if I need it to run each time when the button is selected... — Json, Jun 05 '17 at 20:19
Well I found the answer here: https://stackoverflow.com/questions/9657572/jquery-document-ready I should have waited for the DOM to load before adding a change event. — Json, Jun 05 '17 at 20:32

Unable to use RadioButton with JQuery - Alert doesn't pop up

3 Answers3