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 </input>. Finally, your example has no <form> 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
– j08691, Commented Jun 5, 2017 at 13:54
try changing this $("form input:radio").change(function() to this $("form input[type = 'radio']").change(function() — Karthik Ganesan
– Karthik Ganesan, Commented Jun 5, 2017 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
– Json, Commented Jun 5, 2017 at 14:00

Luciano Huguenin · Accepted Answer · 2017-06-05 16:03:45Z

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...
Well I found the answer here: stackoverflow.com/questions/9657572/jquery-document-ready I should have waited for the DOM to load before adding a change event.

Luciano Huguenin · Accepted Answer · 2017-06-05 14:07:05Z

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)

Kashkain · Accepted Answer · 2017-06-05 16:24:52Z

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.
The "modified" code you provided isn't working along with checkboxradio
I edit my answer, I didn't understand that "checkboxradio" was JQuery UI

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

3 Comments

Linked

Hot Network Questions