radio button in html - javascript

I am trying to get the selected value from the radio button this is the jsfiddle.
HTML :
<table>
<tr>
<td> Is Reference Number Available</td>
<td> <input type="radio" name="group1" value="yes" onchange="isReferenceNumberAvailable()"> Yes</input>
<input type="radio" name="group1" value="no" onchange="isReferenceNumberAvailable()"> No </input>
</td>
</tr>
</table>
javascript :
function isReferenceNumberAvailable()
{
var test = document.getElementsByName("group1");
for(var elem in test)
{
if(test[elem].checked)
{
alert(test[elem].value); // got the element which is checked
if(test[elem].value=="yes")
alert("Need to create Reference select box");
else if(test[elem].value=="no")
alert("don't create ");
}
}
}
But when I select the radio button i get the following :
Uncaught ReferenceError: isReferenceNumberAvailable is not defined

Check out this
http://jsfiddle.net/9JQU6/
function isReferenceNumberAvailable()
{
var test = document.getElementsByName("group1");
for(var elem in test)
{
if(test[elem].checked)
{
alert(test[elem].value); // got the element which is checked
if(test[elem].value=="yes")
alert("Need to create Reference select box");
else if(test[elem].value=="no")
alert("don't create ");
}
}
}
Reason

Your code is working only error is javascript place error see this demo

The problem is only that its not getting linked in fiddle, it works when placed inside script tags within your HTML see Check this
<script> Within this together with html its fine </script>

Use following script using jquery
$(document).ready(function(){
$('input:radio').click(function(){
alert$('input[name=group1]:checked').val()); // get selected radio button value
// do what you need here
});
});

http://jsbin.com/anAyIWUN/1/edit
Try always to put all your JS before the closing </body> tag.
Regarding your HTML and scripts I would go with something nicer and simpler:
<table>
<tr>
<td> Is Reference Number Available</td>
<td>
<input type="radio" name="group1" value="yes"> Yes
<input type="radio" name="group1" value="no"> No
</td>
</tr>
</table>
JS:
var $el = document.getElementsByName("group1"),
msg = {"yes":"Need to create Reference select box", "no":"Don't create"};
function getVal(){
if(this.checked) alert( msg[this.value] );
}
for(var i=0; i<$el.length; i++)
$el[i].onchange = getVal;

Related

Refresh radio button without jquery ui

TL;DR; how to properly implement $('#radioBtn').checkboxradio("refresh"); without the jquery ui library?
I'm working on a project and need the radio buttons to be unselectable + clicking on a table row acting like clicking the radio button.
I'm facing the issue that the radio buttons have to be refreshed after setting the checked/not checked attribute. How do I do this without relying on jquery ui?
Interestingly, if you call any function (that does not exist) on the radio button it gets refreshed.
NOTE: I'm asking about updating the radio button view to show the correct check state, not setting the checked state of the radio.
https://jsfiddle.net/8uno2ybf/5/
$(function() {
var inputClickHandler = function() {
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked') {
$(this).prop('checked', false);
$(this).attr('previousValue', false);
$(this).checkboxradio("refresh"); //This refreshes it for some reason
} else {
$("input[name=" + name + "]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
};
$("input[type='radio']").click(inputClickHandler);
$('.monitored_table tbody tr').click(function(event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger("click");
}
});
console.log("OnLoad");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="monitored_table">
<tr>
<td>Text1</td>
<td>
<input type="radio" name="group1" value="1">
</td>
</tr>
<tr>
<td>Text2</td>
<td>
<input type="radio" name="group1" value="2">
</td>
</tr>
<tr>
<td>Text3</td>
<td>
<input type="radio" name="group1" value="3">
</td>
</tr>
</table>
You don't need Jquery UI for this purpose, Jquery is enough. However; you are trying to execute an inexistent function which breaks the flow of your code. You should check whether the function exists or not by using this function. Therefore; once the javascript code fails refresh is possible in your code blocks

Input radio elements result always checked

I've searched all the web about it but i couldn't find a solution in javascript without jquery. The problem is the following: I have an entire array of radio elements, which should be checked or unchecked depending on database data. And this is accomplished. Now i have to make the radio button "uncheckable" to change the database data through the form.
I tried to make it in plain javascript as i don't want to think about frontend libraries for the moment.
The html is the following:
<td>
<input class="graphs" name="g4" value="S" defaultvalue="N" checked="true" type="radio">
</td>
<td>
<input class="graphs" name="g5" value="S" defaultvalue="N" type="radio">
The Javascript is the following:
<script type="text/javascript">
window.onload = (function(){
return function(){
var allRadios = document.getElementsByClassName('graphs');
var x = 0;
for(x = 0; x < allRadios.length; x++){
allRadios[x].onclick = function() {
if(this.checked == true){
this.checked = false;
}else{
this.checked = true
}
};
}
}})();
</script>
I've tried to debug and the result is always the same: the first if is executed and always true, even when the element is not checked.
I've tried the same script in jsfiddle and it works right. Is it a problem of my browser?
Thanks in advance.
this.checked == true in else block is not an assignment
If you want a radio to be uncheckable the you can disable it statically, you don't need to use any javascript.
For Unckecked disabled
<input type="radio" name="foo" value="N" disabled>
Four Checked disabled
<input type="radio" name="foo" value="N" checked disabled>

.checked not identifying if a radio button is checked

I have some radio buttons on a page, and I need to just identify which one was checked in my JS, based on ID. I'm not sure why this isn't working. Each time, I get the "nothing checked" message in my console. Thanks!
HTML:
<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>
JS:
var aud;
if (document.getElementById('aud1').checked) {
var aud = document.getElementById('file1');
}else if(document.getElementById('aud2').checked) {
var aud = document.getElementById('file2');
}else if (document.getElementById('aud3').checked){
var aud = document.getElementById('file3');
}
else console.log('nothing checked');
See below. I've added a button to your code that you can click after you have some checked.
Initially, when the page loads, there is nothing clicked. Your JS is ran as soon as the page is built there which is why you were seeing the nothing clicked.
document.getElementById('check-radios').onclick = function() {
var aud;
if (document.getElementById('aud1').checked) {
var aud = document.getElementById('file1');
console.log('aud1 checked');
}
else if (document.getElementById('aud2').checked) {
var aud = document.getElementById('file2');
console.log('aud2 checked');
}
else if (document.getElementById('aud3').checked) {
var aud = document.getElementById('file3');
console.log('aud3 checked');
}
else console.log('nothing checked');
}
<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>
<button id="check-radios">Check for clicked</button>
do you explicitly need this code? why not use a single class, and have the filename/desc as a custom attribute like so:
<input type="radio" name="animals" class="order" data-animal="elephant" />elephant
<input type="radio" name="animals" class="order" data-animal="zebra" />zebra
<input type="radio" name="animals" class="order" data-animal="lion" />lion
<script>
$(".order").click(function () {
var choice = this.getAttribute("data-animal");
alert(choice);
/* console.log(choice); */
})
</script>
That way you dont have to manually keep adding more code, u can just add the html at the top using the same class and a different attribute value... much easier to maintain -
Also since you had an elseif i added a name to group them as individual radios as I presume you intended?
<input type="radio" name="animals" class="order" checked data-animal="zebra">zebra
bear in mind there is no closing tag for input tags - just /> at the end instead of >

Hide div for Radio button selected value using jquery- Not working

I want to hide a div (AppliedCourse), when radi button value is Agent. I wrote below code but it is not working.
Any idea?
$('#HearAboutUs').click(function() {
$("#AppliedCourse").toggle($('input[name=HearAboutUs]:checked').val()='Agent');
});
<tr><td class="text"><input type="radio" name="HearAboutUs" value="Press">Press & Print media
<input type="radio" name="HearAboutUs" value="Internet">Internet
<input type="radio" name="HearAboutUs" value="Agent">Agent
<input type="radio" name="HearAboutUs" value="Friend">Friend
<input type="radio" name="HearAboutUs" value="Other" checked="checked">Other</td></tr>
Either your HTML is incomplete or your first selector is wrong. It is possible that your click handler is not being called because you have no element with id 'HeadAboutUs'. You might want to listen to clicks on the inputs themselves in that case.
Also, your logic is not quite right. Toggle hides the element if the parameter is false, so you want to negate it using !=. Try:
$('input[name=HearAboutUs]').click(function() {
var inputValue = $('input[name=HearAboutUs]:checked').val()
$("#AppliedCourse").toggle( inputValue!='Agent');
});
I have made a JSFiddle with a working solution: http://jsfiddle.net/c045fn2m/2/
Your code is looking for an element with id HearAboutUs, but you don't have this on your page.
You do have a bunch of inputs with name="HearAboutUs". If you look for those, you'll be able to execute your code.
$("input[name='HearAboutUs']").click(function() {
var clicked = $(this).val(); //save value of the input that was clicked on
if(clicked == 'Agent'){ //check if that val is "Agent"
$('#AppliedCourse').hide();
}else{
$('#AppliedCourse').show();
}
});
JS Fiddle Demo
Another option as suggested by #Regent is to replace the if/else statement with $('#AppliedCourse').toggle(clicked !== 'Agent');. This works too.
Here is the Fiddle: http://jsfiddle.net/L9bfddos/
<tr>
<td class="text">
<input type="radio" name="HearAboutUs" value="Press">Press & Print media
<input type="radio" name="HearAboutUs" value="Internet">Internet
<input type="radio" name="HearAboutUs" value="Agent">Agent
<input type="radio" name="HearAboutUs" value="Friend">Friend
<input type="radio" name="HearAboutUs" value="Other" checked="checked">Other
</td>
Test
$("input[name='HearAboutUs']").click(function() {
var value = $('input[name=HearAboutUs]:checked').val();
if(value === 'Agent'){
$('#AppliedCourse').hide();
}
else{
$('#AppliedCourse').show();
}
});

Multiple checkbox value will show in textbox

Here is my code :
<body>
<div align="center">
<b>A<input type="checkbox" name="a" id="check" value="a"></b>
<b>B<input type="checkbox" name="b" id="check" value="a"></b>
<b>B<input type="checkbox" name="c" id="check" value="c"></b>
<b>D<input type="checkbox" name="d" id="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>
</body>
I'm trying that: if (more than one) checkbox is selected (or checked) that value will be assigned into the checkbox like "abcd" or "acd" or "bd".For that I have written jQuery
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
$("#text").val(("#check").val());
}
});
</script>
able to print one txtbox value at a time,but not able to put all checked value in the textbox at a time.
Where I am going wrong ??Any inputs will appreciated.
I may have not understood you correctly, but does this fiddle help you? http://jsfiddle.net/XwGJ9/1/
The change is the javascript:
var $textInput = $('#text');
var $checkBox = $('#checkboxes');
$('input').click(function(){
populateTextInput();
});
function populateTextInput () {
// empty text input
$textInput.val('');
// print out all checked inputs
$checkBox.find('input:checked').each(function() {
$textInput.val( $textInput.val() + $(this).val() );
});
}
Edit: updated
Use this code
$('.check').click(function(){
$("#text").val('');
$(".check").each(function(){
if($(this).prop('checked')){
$("#text").val($("#text").val()+$(this).val());
}
});
});​
​
With this HTML (use class instead of id for abcd)
<div align="center">
<b>A<input type="checkbox" name="a" class="check" value="a"></b>
<b>B<input type="checkbox" name="b" class="check" value="b"></b>
<b>B<input type="checkbox" name="c" class="check" value="c"></b>
<b>D<input type="checkbox" name="d" class="check" value="d"></b>
</div>
<table align="center">
<tr>
<td>Text:</td>
<td><input type="text" name="text" id="text"></td>
</tr>
</table>​
Also I encourage to use CSS instead of align="center"
See live, running demo
So I think you're wanting to append the values together in the textbox. In that case, do:
<script type="text/javascript">
$(document).click(function(){
if($("#check").attr('checked')){
var textBoxVal = $("#text").val()+$("#check").val(); // Concatenate the existing textbox value with the checkbox value.
// Load the resulting value into new var textBoxVal.
$("#text").val(textBoxVal); // Load the new value into the textbox.
}
});
</script>
I used native JS just to make it clearer what I'm doing.
had used something like this.. might help you
var checkeditems = $('input:checkbox[name="check[]"]:checked')
.map(function() {
return $(this).val()
})
.get()
.join(",");
$("#text").val(checkeditems);
If you just want no multiples of a,b,c,d at one time, the onclick is per checkbox
var boxes = $("input:checkbox");
boxes.each(function(idx,elem){
elem.onclick=function(event){
var choices = "";
boxes.each(function(idx,elem){
choices += elem.checked ? elem.name:"";
});
$('#text').val(choices);
}
});

Categories