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/
Related
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
I am trying to achieve this:
Currently value has been set on 2 radio buttons.
Once one of the button is selected, the value(attribute) of that button should be assigned to the value of the div with an id.
I am not sure where I am going wrong. Below is the code snippet.
var init_font_one = $('input[id="init-one-name"]'),
init_font_two = $('input[id="init-two-name"]'),
init_id_value = $("#test");
if (init_font_one == 'checked') {
init_id_value.val(init_font_one.val());
}
if (init_font_two == 'checked') {
init_id_value.val(init_font_two.val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="abc"> Testing
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>
You have to use on('change' to update the value of div when radio button is click. And use attr of jQuery to update the value of particular element.
Try this.
var init_font_one = $('input[id="init-one-name"]'),
init_font_two = $('input[id="init-two-name"]'),
init_id_value = $("#test");
init_font_one.change(function() {
init_id_value.attr("value",init_font_one.val());
console.log(init_id_value.attr("value"));
});
init_font_two.on('change',function() {
init_id_value.attr("value",init_font_two.val());
console.log(init_id_value.attr("value"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
Testing
</div>
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>
There is few problems with your code:
<div> can't have value property.
Your code executes on page load and not when some event was triggered.
init_font_one == 'checked' compares jQuery object with string.
input[id="init-one-name"] can be replaced with #init-one-name
Your labels are not linked with inputs.
$('.radios').change(function() {
$("#test").val($('.radios:checked').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<!-- uncomment below -->
<!--<input type="hidden" id="test" value="abc"/>-->
<input type="text" id="test" value="abc" /> Testing
</div>
<input class="radios" id="init-one-name" type="radio" name="init-one-name" value="abcd"><label for="init-one-name">Test1</label>
<input class="radios" id="init-two-name" type="radio" name="init-one-name" value="xyz"><label for="init-two-name">Test2</label>
You should use jQuery change event to detect the change in the radio buttons and assign the value of checked radio button to the div with id="test"
var init_id_value = $("#test");
$('input[id="init-one-name"]').on('change', function() {
init_id_value.text($(this).val());
});
$('input[id="init-two-name"]').on('change', function() {
init_id_value.text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
Testing
</div>
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>
try this
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue =
$("input[name='init-one-name']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
I do not understand what you are trying to do, but try this:
$( "input[name='init-one-name']" ).change(function(){
$('#test').val('New Value: ' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test">Testing
</textarea><BR>
<input type="radio" name="init-one-name" value="abcd"><label>Op 1</label>
<input type="radio" name="init-one-name" value="xyz"><label>OP 2</label>
There is no value on a div, but you can change the text content or you can assing a "virtual value" to the div using .data()
Check the snippet
$(function(){ // On jquery initialize
var idtest = $('#test'); // the target Div
$('input[type="radio"]').on('change',function(){ // change event for the two radio buttons
/*** Method 1 : Using data attribute to assing a value ***/
idtest.data('value',$(this).val()); // Value of the selected radio
/*** Method 2 : Add the value of the selected radio to the text inside the div ***/
idtest.text( $(this).val() ) // Value of the selected radio
//retrieve the setted data value
console.log( idtest.data('value') );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
Testing
</div>
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"><label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"><label>Test2</label>
Refer to the fixed code below.
Added a listener to detect action performed over the radio buttons and changed method to check if radio is checked or not.
let ele = document.getElementById('init-one-div');
ele.addEventListener('click', function(e) {
if ("INPUT" === e.target.nodeName)
checkAndAssign();
});
function checkAndAssign() {
var init_font_one = $('#init-one-name'),
init_font_two = $('#init-two-name'),
init_id_value = $("#test");
if (init_font_one.is(':checked')) {
init_id_value.val(init_font_one.val());
}
if (init_font_two.is(':checked')) {
init_id_value.val(init_font_two.val());
}
//REMOVE below line if you want to remove the line printing the result
init_id_value.html(' Testing [ ' + init_id_value.val() + ' ] ');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" value="abc">
Testing
</div>
<div id="init-one-div">
<input id="init-one-name" type="radio" name="init-one-name" value="abcd"> <label>Test1</label>
<input id="init-two-name" type="radio" name="init-one-name" value="xyz"> <label>Test2</label>
</div>
I have 2 radio buttons(Enable/Disable) and 3 text boxes. I want to disable the 3 textboxes if disable radio button is clicked.
<Input type = 'Radio' Name ='target' value= 'r1'>Enable
<Input type = 'Radio' Name ='target' value= 'r2'>Disable
T1: <input type="text" name="t1">
T2: <input type="text" name="t2">
T3: <input type="text" name="t3">
This change should happen as soon as I select one of the radio button. I am using PHP. TIA!
Although, using jQuery will make it easier, the following is one way to do it purely in JavaScript:
let textboxes = document.querySelectorAll('input[type=text]');
document.querySelectorAll('input[name=target]')
.forEach(function(radio) {
radio.addEventListener('change', function(e) {
let value = e.target.value;
if (value === 'r1') {
textboxes
.forEach(function(textbox) {
textbox.disabled = false;
});
} else if (value === 'r2') {
textboxes
.forEach(function(textbox) {
textbox.disabled = true;
});
}
});
});
<Input type='Radio' Name='target' value='r1'>Enable
<Input type='Radio' Name='target' value='r2'>Disable
<br><br>
T1: <input type="text" name="t1">
T2: <input type="text" name="t2">
T3: <input type="text" name="t3">
It basically listens for the change event of the radio buttons and the loops through the text boxes to enable/disable them.
$('.radio').click(function(e) {
var val = $(this).val();
if(val=="r2") $('input[type="text"]').attr('disabled','disabled');
else $('input[type="text"]').removeAttr('disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><Input class="radio" type = 'Radio' checked Name ='target' value= 'r1'>Enable </label>
<label><Input class="radio" type = 'Radio' Name ='target' value= 'r2'>Disable </label><br /><br />
T1: <input type="text" name="t1">
T2: <input type="text" name="t2">
T3: <input type="text" name="t3">
As per my comments Here is the code. use jquery code with other text box. make sure you should include jquery library at the top of the code
$(document).ready(function() {
$("#enable").click(function() {
$("#t1").attr("disabled", false);
});
$("#disable").click(function() {
$("#t1").attr("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<Input type = 'Radio' Name ='target' value= 'r1' id="enable">Enable
<Input type = 'Radio' Name ='target' value= 'r2' id="disable">Disable
T1: <input type="text" name="t1" id="t1">
</body>
</html>
Well, as you are using PHP, which is a server-side language, whenever you click radiobutton, refresh the page, and the radiobutton will get back to the unchecked state. So for this, you have to use JavaScript, and jquery is the best way to work with DOM elements. You need to add a few more lines of code. Don't forget to add jQuery in your HTML's ` tag.
<script type="text/javascript">
$(document).ready(function () {
$("#enable").click(function () {
$("#t1").attr("disabled", true);
});
$("#disable").click(function () {
$("#t1").attr("disabled", false);
});
});
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a search box and many checkbox elements.
Once a user types any text in the search box it should search the checkbox text and show only those checkboxes -- others should be hidden.
Here is the HTML:
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<input type="checkbox" value="column1">column1
<input type="checkbox" value="column2">column2
<input type="checkbox" value="column3">column3
<input type="checkbox" value="column4">column4
<input type="checkbox" value="column5 test">column5 test
<input type="checkbox" value="(column6)">(column6)
Now if the user types the text "col" in the search box all checkboxes should appear as "col" is present in all checkboxes.
If the user types "abc" in the search box, no checkboxes should appear as "abc" is not present in any checkboxes.
If user types text "column1" in search box only one checkbox should appear as "column1" matches only one checkbox.
Just to add another scenario if checkbox name has "column5 test". So if user types string "test" it should show "columnn5 test" checkbox and like to highlight matched text in yellow background.
If user types a special character "(" in search box then "(column6)" checkbox should be shown
Try this :
Html:
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
jQuery:
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
</script>
</body>
</html>
Simple Jquery solution using Attribute contains selector to match any elements that contains the given string value,
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( "input[value*='"+ v +"']" );
if(elem.val() ){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Here is the fiddle - https://jsfiddle.net/sq9eknfj/2/
For Case Insensitive search -
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( ":checkbox" ).filter(function() {
return (new RegExp(v, 'i')).test(this.value);
});
if(elem.val()){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Please try with below code I think it will help you to
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$("input[type='checkbox']").each(function() {
var isMatch = exp.test($(this).val());
$(this).parent().toggle(isMatch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="" class="my-textbox" name="searchColumn" id="searchColumn"/>
<label><input type="checkbox" class="name" value="column1">column1</label>
<label><input type="checkbox" class="name" value="column2">column2</label>
<label><input type="checkbox" class="name" value="column3">column3</label>
<label><input type="checkbox" class="name" value="column4">column4</label>
First you need to change the HTML so as to be able to hide the text and the checkbox.
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<p>
<input type="checkbox" class="filter" value="column1">column1
</p>
<p>
<input type="checkbox" class="filter" value="column2">column2
</p>
<p>
<input type="checkbox" class="filter" value="column3">column3
</p>
<p>
<input type="checkbox" class="filter" value="column4">column4
</p>
Then you need a class in your CSS called hidden
.hidden {
display: none;
}
And here is some jQuery (be sure to include the jQuery library in order to use jQuery):
$(document).ready(function(){
$('#searchColumn').keyup(function(){
$('.filter').each(function(){
if($(this).val() == $('#searchColumn').val()){
$('.filter').parent().addClass('hidden');
$(this).parent().removeClass('hidden');
}
});
});
});
Here's a working Plunker.
https://embed.plnkr.co/fDzATotA41o9tuxY6vEE/
UPDATED to answer the actual question!
Here a vanilla JavaScript solution - no jQuery needed:
HTML (you need a wrapper in order to hide the label):
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div class="checkbox"><input type="checkbox" value="column1">column1</div>
<div class="checkbox"><input type="checkbox" value="column2">column2</div>
<div class="checkbox"><input type="checkbox" value="column3">column3</div>
<div class="checkbox"><input type="checkbox" value="column4">column4</div>
CSS (hiding the checkboxes by default):
.checkbox {
display:none;
}
JavaScript (listen for input and compare the input value with the values of all the checkboxes):
var checkboxDivs = document.querySelectorAll('.checkbox');
document.querySelector('#searchColumn').addEventListener("input", function(e) {
var inputValue = e.srcElement.value;
for (var i = 0; i < checkboxDivs.length; i++) {
var checkbox = checkboxDivs[i].children[0];
if (checkbox.value.includes(inputValue) && inputValue.length != 0) {
checkboxDivs[i].style.display = 'block';
} else {
checkboxDivs[i].style.display = 'none';
}
}
});
JSFiddle: https://jsfiddle.net/a32nvnka/
i've checkbox and text input
What I need is to enable text input when i check the checkbox and to disable text input when i uncheck the checkbox
I'm using the following code but it do the reverse enable when unchecked / disable when checked so how to adjust it fit with my needs.
<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').enabled = this.checked;
};
</script>
any help ~ thanks
You just need to add a ! in front of this.checked.
Here's an example that shows the change:
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
A jQuery solution could be this one:
<script>
$('#yourBox').change(function() {
$('yourText').attr('disabled',!this.checked)
});
</script>
It is the same as Minko's answer but I find it more elegant.
Try it. If you use a label then add onmousedown to it
<form >
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" onmousedown="this.form.yourText.disabled=this.checked"/>
</form>
A better solution could be:
var checkbox = document.querySelector("#yourBox");
var input = document.querySelector("#yourText");
var toogleInput = function(e){
input.disabled = !e.target.checked;
};
toogleInput({target: checkbox});
checkbox.addEventListener("change", toogleInput);
<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
function createInput( chck ) {
if( jQuery(chck).is(':checked') ) {
jQuery('<input>', {
type:"text",
"name":"meta_enter[]",
"class":"meta_enter"
}).appendTo('p.checkable_options');
}
else {
jQuery("input.meta_enter").attr('disabled','disabled');
}
}
createInput( chck );
<input type="radio" name="checkable" class="checkable" value="3" />
<input type="radio" name="checkable" class="checkable" value="4" onclick="createInput(this)" />