I am trying to disable a input field of return date when the travel type is one way. when I checked the radio button for one way the return date is still enabled. Please help me what i am missing here.
Thanks in advance.
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way">
<span style="color:white;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: white;">Round Trip</span>
</label>
var button = document.getElementById('one_way');
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
Try this. It should must work! Use jQuery click event instead of Javascript
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" class="form-control" id="datepicker1" />
<label>
<input type="radio" name="travel_type" value="1"class="with-gap travel_type"
id="one_way">
<span style="color:red;">One Way</span>
</label>
<label>
<input type="radio" name="travel_type" value="2"class="with-gap travel_type"id="round_trip">
<span style="color: red;">Round Trip</span>
</label>
</body>
</html>
<script>
$(".travel_type").click(function(){
if($(this).val() == 1)
{
$("#datepicker1").prop('disabled', true);
}else{
$("#datepicker1").prop('disabled', false);
}
});
</script>
If you will use jQuery , it will be easy. I created this example using Jquery. Hope this will help you.
$("input[name='travel_type']").click(function(){
if($(this).is(':checked') && $(this).val()=='1'){
$('#datepicker1').attr('disabled','disabled');
}else{
$('#datepicker1').removeAttr('disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label> One Way
<input type="radio" name="travel_type" value="1" class="with-gap" ></label>
<label>Round Trip
<input type="radio" name="travel_type" value="2" class="with-gap" ></label>
<p><label>Date Picker <input type="date" name="datepicker" id="datepicker1"></label></p>
You have to bind events to radio buttons, Here is your working code,
var button = document.getElementById('one_way');
var button2 = document.getElementById('round_trip');
button.addEventListener('change', function() {
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
})
button2.addEventListener('change', function() {
if (!document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = false;
}
})
You can also check it on JSFiddle Code
I think you forgot to call the "function" when radio button clicked.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way" onclick="functionRadioChecked();">
<span style="color:red;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: red;">Round Trip</span>
</label>
<br><br><br>
<input type="date" id="datepicker1">
<script>
function functionRadioChecked() {
var button = document.getElementById('one_way');
if (document.getElementById('one_way').checked) {
document.getElementById('datepicker1').disabled = true;
}
}
</script>
</body>
</html>
Try out this code block where with self executing function on document load
<html>
<label>
<input type="radio" name="travel_type"value=""class="with-gap"
id="one_way">
<span style="color:black;">One Way</span>
</label>
<label>
<input type="radio"name="travel_type"value=""class="with-gap"id="round_trip">
<span style="color: black;">Round Trip</span>
</label>
<script>
(function() {
var button1 = document.getElementById('one_way');
button1.onclick = function()
{
document.getElementById('datepicker1').disabled = true;
}
var button2 = document.getElementById('round_trip');
button2.onclick = function()
{
document.getElementById('datepicker1').disabled = false;
}
})();
</script>
</html>
You could also assign a separate function to the radio button onclick
But depending your submitted code I would recommend the above code
Good Luck
Related
$("#btn").on("click",()=>{
const rdValue = $("#frm").serialize();
var _IsOccupant = false;
if ($("input[name='IsOccupant']:checked").val() == 1)
_IsOccupant = true;
alert(rdValue + " " + _IsOccupant);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="frm">
<label>True</label>
<input type="radio" id="rbOwner" value="1" name="IsOccupant" required="" />
<label>False</label>
<input type="radio" id="rbOccupant" value="2" name="IsOccupant" required="" />
</form>
<button id="btn">Click Me</button>
I am wondering why sometime my code upon publish failed to determine the checkbox value(Checked checkbox). But when I manually debug it it returns the correct value. Does anyone knows the reason for this?.
Wrap your code inside
$(document).ready(function(){
// Your code goes here
$("#btn").on("click",()=>{
const rdValue = $("#frm").serialize();
var _IsOccupant = false;
if ($("input[name='IsOccupant']:checked").val() == 1)
_IsOccupant = true;
alert(rdValue + " " + _IsOccupant);
});
})
This will ensure your JavaScript executes only when the document is fully loaded.
To take the values from an input tag kind is necessary to use the .value function instead of .val
Is something similar to this:
<!DOCTYPE html>
<html>
<head>
<title>
Get value of selected
radio button
</title>
</head>
<body>
<p>
Select a radio button and click on Submit.
</p>
Gender:
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Others">Others
<br>
<button type="button" onclick="displayRadioValue()">
Submit
</button>
<br>
<div id="result"></div>
<script>
function displayRadioValue() {
var ele = document.getElementsByName('gender');
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
document.getElementById("result").innerHTML
= "Gender: "+ele[i].value;
}
}
</script>
</body>
</html>
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<input type="radio" name="gender" value="Others">Others
<br>
<button type="button" onclick="displayRadioValue()">
Submit
</button>
<br>
<div id="result"></div>
I am trying to display 2 different div when the user answer 3 questions.
All questions have Yes and No answers which is shown by radio buttons.
I want to show div2 when 3 NO are given by the users. If ONLY ONE of the answers is Yes then the div1 must be shown.
this is the code:
<script type="text/javascript">
function display(e){
if(e.value == "yes"){
document.getElementById("hidediv1").style.display='block';
document.getElementById("hidediv2").style.display='none';
}
else if(e.value =="no"){
document.getElementById("hidediv2").style.display='block';
document.getElementById("hidediv1").style.display='none';
}
}
</script>
<form id="stu01" action="#" method="post">
<p>1. Q1?<br>
<input type="radio" name="sq01" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq01" value="no" onclick="display(this)">No
</p>
<p>2. Q2?<br>
<input type="radio" name="sq02" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq02" value="no" onclick="display(this)">No
</p>
<p>3. Q3?<br>
<input type="radio" name="sq03" value="yes" onclick="display(this)">Yes
<input type="radio" name="sq03" value="no" onclick="display(this)">No
</p>
<div id="hidediv1" style="display:none">
</div>
<div id="hidediv2" style="display:none">
</div>
</form>
I hope that i understand ur request right..
JSFIDDLE DEMO
$('input[type="radio"]').click(function () {
var checkedNo = $('input[type="radio"]').filter(function () {
return $(this).is(":checked") && $(this).val() === "no";
});
if (checkedNo.length === 3) {
$('#hidediv1').show();
$('#hidediv2').hide();
} else {
$('#hidediv2').show();
$('#hidediv1').hide();
}
});
Full version:
<!DOCTYPE html>
<html>
<head>
<title>Form Radio Button</title>
</head>
<body>
<form id="stu01" action="#" method="post">
<p>1. Q1?<br>
<input type="radio" name="sq01" value="yes">Yes
<input type="radio" name="sq01" value="no">No
</p>
<p>2. Q2?<br>
<input type="radio" name="sq02" value="yes">Yes
<input type="radio" name="sq02" value="no">No
</p>
<p>3. Q3?<br>
<input type="radio" name="sq03" value="yes">Yes
<input type="radio" name="sq03" value="no">No
</p>
<div id="hidediv1" style="display:none">
No!
</div>
<div id="hidediv2" style="display:none">
Yes!
</div>
</form>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
var checkedNo = $('input[type="radio"]').filter(function () {
return $(this).is(":checked") && $(this).val() === "no";
});
if (checkedNo.length === 3) {
$('#hidediv1').show();
$('#hidediv2').hide();
} else {
$('#hidediv2').show();
$('#hidediv1').hide();
}
});
</script>
</body>
</html>
Use onChange event listener, update a variable status, check when it is 3, append your div
I'm trying to get a function working that hides a label in the form depending on the radio button option selected. Here's my code so far.
HTML
<form action="">
<input type="radio" id="test" value="first"> first<br>
<input type="radio" id="test" value="second"> second<br>
<input type="radio" id="test" value="third"> third
</form>
<label class="hidden">Hide this</label>
Javascript
var rbtn = document.getElementById("test");
var x = document.getElementsByClassName("hidden");
function hidelabel() {
if (rbtn == 'third') {
x.style.display='none';
}
}
You must fire your hide function after radio button clicked like this:
document.mainForm.onclick = function(){
var radVal = document.mainForm.rads.value;
if (radVal == 'third') {
document.getElementsByClassName("hidden")[0].style.display = 'none';
}
}
ps: document.getElementsByClassName returns an array. So you cannot use x.style.display='none';.
Working example: https://jsfiddle.net/5ts0dak4/
First name the radio button ID's with something decent:
<form action="">
<input type="radio" id="first" value="first"> first<br>
<input type="radio" id="second" value="second"> second<br>
<input type="radio" id="third" onclick="hide();" value="third"> third
</form>
<label class="hidden" id="hidden">Hide this</label>
Then try this:
function hide(){
var x = document.getElementById('hidden');
if(document.getElementById('third').checked) {
x.style.display='none';
}
}
You can test it here https://jsfiddle.net/o54mzrk5/
Try this one.
CSS:
<style type="text/css">
.hidden{ display:none; }
</style>
HTML:
<form action="">
<input type="radio" name="test" value="first" onclick="func(this, true);"> first<br>
<input type="radio" name="test" value="second" onclick="func(this, true);"> second<br>
<input type="radio" name="test" value="third" onclick="func(this, false);"> third
</form>
<label class="hidden">Hide this</label>
Script:
<script type="text/javascript">
func = function(ctrl, visible) {
if(visible)
document.getElementsByClassName("hidden")[0].style.display='block';
else
document.getElementsByClassName("hidden")[0].style.display='none';
};
</script>
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/
I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>