so I'm trying to get a html radio button when pressed to send a value to the variable (UserInput) in the JavaScript code.
//HTML CODE//
</HEAD>
<script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascripts/question.js"></script>
<BODY>
<form>
<INPUT TYPE="radio" NAME="Home" VALUE="1" >Home
<INPUT TYPE="radio" NAME="School" VALUE="2" >School
<INPUT TYPE="radio" NAME="Work" VALUE="3" >Work
<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center>
</form>
</BODY>
</HTML>
I would like to get the value from the radio buttons and store them in the variable UserInput,however it does not seem to be working.
// Javascript code (qustion.js) //
var UserInput = '';
if (UserInput=== '3')
{
confirm("You have selected WORK");
console.log("WORK");
}
else if (UserInput==='2')
{
confirm("You have selected SCHOOL");
console.log("SCHOOL");
}
else if (UserInput==='1')
{
confirm("You have selected HOME");
console.log("HOME");
}
else if (UserInput==='')
{
confirm("You have selected NOTHING");
console.log("NONE");
}
Thanks,also I'm sort of a beginner so a in-depth explanation would be great too.
first you have to use a single name for all, to make them a group (let's say here the group name is myradiogroup), you can define different ids, then do this:
document.querySelector('input[name=myradiogroup]:checked').value
you can also do this in your onclick event:
<input type="button" name="send" value="Submit"
onclick="var UserInput=document.querySelector('input[name=myradiogroup]:checked').value;">
Do something like this in the Html side:
</HEAD>
<script type="text/javascript" src="javascripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascripts/question.js"></script>
<BODY>
<form>
<INPUT TYPE="radio" id="Home" VALUE="1" >Home
<center><input type="button" name="send" value="Submit" onclick="var UserInput=getValue();"></center>
</form>
and the js side like this:
var UserChoice;
function getValue(){
if ($('input[id = Home]:checked').size() > 0) {
UserChoice = "Home";
}
}
Same is applicable to school and work
first set the same name property to your radios for create a group
<INPUT TYPE="radio" name="optionsRadios" id="Home" VALUE="1" >Home
<INPUT TYPE="radio" name="optionsRadios" id="School" VALUE="2" >School
<INPUT TYPE="radio" name="optionsRadios" id="Work" VALUE="3" >Work
after call the function on your button
<input type="button" name="send" value="Submit" onclick="getValue();">
and last create the function getValue and use :
document.querySelector("input[name=optionsRadios]:checked").value;
the querySelector return all the objects with the name "optionRadios" and checked , in this case just one
function getValue(){
var UserInput = '';
UserInput= document.querySelector("input[name=optionsRadios]:checked").value;
if (UserInput=== '3')
{
confirm("You have selected WORK");
console.log("WORK");
}
else if (UserInput==='2')
{
confirm("You have selected SCHOOL");
console.log("SCHOOL");
}
else if (UserInput==='1')
{
confirm("You have selected HOME");
console.log("HOME");
}
else if (UserInput==='')
{
confirm("You have selected NOTHING");
console.log("NONE");
}
}
Example:
http://jsfiddle.net/RrYJu/1/
Try This Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
alert($(this).val());
}
});
});
});
var UserInput = '';
$(document).ready(function() {
$('input:radio').click(function() {
if ($(this).is(':checked'))
{UserInput =$(this).val();}
});
}
You can easily accomplish this by using jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$(".button_classname_here").click(function(){
alert($('input[type=radio]:checked').val());
});
});
</script>
Related
trying to learn jquery and made a simple checkbox with a function where you can make all the options read-only checking on "none of the above" button.
<html>
<body>
<form id="diagnosedForm">
<div>
<input type="checkbox" value="1"/>1
<br/>
<input type="checkbox" value="2"/>2
<br/>
<input type="checkbox" value="3"/>3
<br/>
</form><br/>
<input type="checkbox" value="" onclick="enableDisableAll(this);"/>None of the above
<script src="script.js">
</script>
</body>
</html>
function enableDisableAll(e) {
var own = e;
var form = document.getElementById("diagnosedForm");
var elements = form.elements;
for (var i = 0 ; i < elements.length ; i++) {
if(own !== elements[i] ){
if(own.checked == true){
elements[i].disabled = true;
elements[i].checked = false;
}else{
elements[i].disabled = false;
}
}
}
}
this will be the output
and the last checkbox will make it read-only
I want the same result but not putting onclick on the html file, instead using jquery to work it out.
You can assign an id to "none of the above" checkbox and then in your script.js you can do something like this:
// script.js
// Run enableDisableAll() on toggle click
$('#toggle').click(enableDisableAll)
function enableDisableAll() {
// Find all input elements inside "diagnosedForm"
const elements = $('#diagnosedForm input')
// Map thru inputs and toggle enable/disable state
elements.map((_, el) => {
$(el).prop('checked', false) // Reset checkboxes
$(el).prop('disabled', (i, v) => !v)
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form id="diagnosedForm">
<div>
<input type="checkbox" value="1" />1
<br/>
<input type="checkbox" value="2" />2
<br/>
<input type="checkbox" value="3" />3
<br/>
</div>
</form>
<br/>
<input id="toggle" type="checkbox" value="" /> None of the above
</body>
</html>
i want to click a checkbox then the checkbox will be checked if i click again that will not be unchecked and if i take a button and click the button that checkbox can be unchecked
<HTML>
<HEAD>
<SCRIPT>
function readOnlyCheckBox() {
return false;
}
</SCRIPT>
<BODY>
<input type="checkbox" id="cbx1"
` onClick="return readOnlyCheckBox()" CHECKED /> readonly
<br/>
<input type="checkbox" id="cbx2"
CHECKED DISABLED/> disabled
</BODY>
</HTML>
this code does not satisfy my answerstrong text
Just do this by Jquery attr() and removeAttr() functions.
Html
<input type="checkbox" id="test">
<button class="btn">Uncheck</button>
Jquery
//for check
$("input").on("click", function() {
$(this).prop('checked', true).attr("readonly")
});
//for uncheck
$(".btn").on("click", function() {
$('input').prop('checked', false).removeAttr("readonly")
});
here is fiddle
You can have 2 functions like
function readOnlyCheckBox(el) {
return el.checked;
}
function uncheck() {
document.getElementById('cbx1').checked = false;
}
<input type="checkbox" id="cbx1" onClick="return readOnlyCheckBox(this)" CHECKED />readonly
<br/>
<button onclick="uncheck()">Uncheck</button>
I am trying to enable a disabled checkbox when another checkbox is checked by using javascript. I believe my problem is when I am trying to pass the form information into the javascript.
Here is my HTML:
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(form)" />1
<input type="checkbox" name="checkboxb" disabled="true" />2
</form>
Here is my Javascript:
<script type="text/javascript">
var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked)
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
</script>
You missed { and } in your javascript. Try this:
var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked) { // here
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
} // and here
Change you onclick event like this
onclick="javascript:ToggleSwitch(this.form)"
and also you don't need to var form= document.getElementById("checkboxes") since you are already passing it as a parameter from onclick event.
And you are also missing a parenthesis
Here is the js
<script>
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked) {
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
}
</script>
And here is the html
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(this.form)" />1
<input type="checkbox" name="checkboxb" disabled="disabled" />2
</form>
And here is a demo
Firstly, you've got syntax errors in your javascript (missing { in the if statement).
You also have some redundancy in your function. It is essentially this pattern:
if (x) { return true; } else { return false; };
which can be simplified to
return x;
Here is a slightly different method, taking these points into account, and also removing the need to search the whole document for ids (which usually makes things more portable/reusable).
<html>
<head>
<script type="text/javascript">
function ToggleSwitch(el, other) {
el.form.elements[other].disabled = !el.checked;
}
</script>
</head>
<body>
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="ToggleSwitch(this, 'checkboxb')" />1
<input type="checkbox" name="checkboxb" disabled="true" />2
</form>
</body>
<html>
I have a checkbox with a value of U
i want to put this value into a text input when the checkbox is checked.
how can i do this using javascript or jquery? I need to be able to do it on multiple checkboxes and input text fields too
HTML
<input type="checkbox" value="U" id="checkBox"/>
<input type="text" value="" id="textInput" />
JQUERY
$("#checkBox").change(function(){
$("#textInput").val($(this).val());
});
DEMO
Try this,
HTML
<label><input type="checkbox" value="U" />Check</label>
<input type="text" />
SCRIPT
$('input[type="checkbox"]').on('click',function(){
var is_checked=$(this).prop('checked');
var val='';
if(is_checked)
val=this.value;
$('input[type="text"]').val(val);
});
Working Demo
the simpliest way to do this :o)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var checkboxInput = document.getElementById('checkboxInput'),
textInput = document.getElementById('textInput');
checkboxInput.addEventListener('click', UpdateTextInput, false);
};
function UpdateTextInput () {
if(checkboxInput.checked) {
textInput.value = checkboxInput.value;
}
else {
textInput.value = '';
}
}
</script>
</head>
<body>
<input type="checkbox" id="checkboxInput" value="U"/>
<input type="text" id="textInput" />
</body>
</html>
Assuming one textbox is associated with every checkbox like below.
HTML Pattern :
<input type="checkbox" value="test1" id="test1" checked><label>Test</label>
<input type="text" class="text1"id="textbox1" name="textbox1" value="">
jQuery:
$('input[type="checkbox"]').change(function() {
var vals = $(this).val();
if($(this).is(':checked')){
$(this).next().next("input[type='text']").val(vals);
}else{
$(this).next().next("input[type='text']").val("");
}
});
Here is the working demo : http://jsfiddle.net/uH4us/
<script language="javascript" type="text/javascript">
$('#leftDiv').ready(function(){
$("form").submit(function () {
//data structure
var radios = [];
//for printing purposes
var arrayValues = $("#arrayVal");
//Getting the values
$("form :radio:checked").each(function() {
radios = $(this).attr('value');
});
//Printing the values
$.each(radios, function( index, value ){
arrayValues.append(
$(value)
);
});
})
});
</script>
HTML "CODE"
<html>
<body>
<div id="leftDiv" class="container">
<form action="" method="get">
<fieldset>
<p>Something 0</p>
<lable>Yes</label>
<input type="radio" name="Group0" value="1" >
<lable>No</label>
<input type="radio" name="Group0" value="0" >
</fieldset>
<fieldset>
<p>Something 1</p>
<lable>Yes</label>
<input type="radio" name="Group1" value="1" >
<lable>No</label>
<input type="radio" name="Group1" value="0" >
</fieldset>
<fieldset>
<p>Something 2</p>
<lable>Yes</label>
<input type="radio" name="Group2" value="1" >
<lable>No</label>
<input type="radio" name="Group2" value="0" >
</fieldset>
<fieldset>
<input type="submit" name="update" class="button" value="Submit">
</fieldset>
</form>
</div>
</body>
</html>
Don't know why but can only get the last value from the radio group.
What am I doing wrong?
Instead of
radios = $(this).attr('value');
try
radios.push($(this).attr('value'));
$("form :radio:checked").each(function(i) {
radios[i] = $(this).val();
});
Get the value not the attribute.
I think this should be:
//Getting the values
$("form :radio:checked").each(function() {
radios.push($(this).attr('value'));
});
When you're getting the values, you have this line of JS:
radios = $(this).attr('value');
Surely you meant something like radios[radios.length]? Does that help at all?
$("form :radio:checked").each(function() {
radios = $(this).attr('value');
});
Each iteration through the each is overwriting the value in radios. That's why once the loop exists you only have the value from the last iteration.
I think every time you go around in the $("form :radio:checked").each() function you're overwriting the value of radios instead of adding to it.
You've got this:
// Getting the values
$("form :radio:checked").each(function() {
radios = $(this).attr('value');
});
...instead of this:
// Getting the values
$("form :radio:checked").each(function(i, e) {
radios[i] = $(e).attr('value');
});
...so when the loop finishes you're only left with the final value.