How to enable input field by selecting checkbox?
This code enable all input fields but how to enable one by one by checking corresponding checkbox
var getInput = document.getElementsByClassName("test"),
changeState = document.getElementsByClassName("check");
Array.from(changeState).forEach(function(checkBox){
checkBox.addEventListener('change', function(){
Array.from(getInput).forEach(function(inputText){
if(inputText.disabled == true){
inputText.disabled = false;
}else{
inputText.disabled = true;
}
});
})
});
<form id="contact">
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
</form>
You can do it by following code.
var getInput = document.getElementsByClassName("test"),
changeState = document.getElementsByClassName("check");
Array.from(changeState).forEach(function(checkBox){
checkBox.addEventListener('change', function(event){
var inputText = event.target.parentElement.firstElementChild;
if (inputText.disabled == true) {
inputText.disabled = false;
} else {
inputText.disabled = true;
}
})
});
<form id="contact">
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
</form>
If you give the change event callback function the parameter e you can find out which element caused the event using e.target.
If we take a look at the hierarchy of your html elements we can see that the input text field is the html element before the checkbox. So to get there, we have to use e.target.parentNode to get to the paragraph element. Now we can use e.target.parentNode.children to get a html collection of childrens of the paragraph but since we know it's the first one we can simply use e.target.parentNode.children[0] to get to the input element.
var getInput = document.getElementsByClassName("test"),
changeState = document.getElementsByClassName("check");
Array.from(changeState).forEach(function(checkBox) {
checkBox.addEventListener('change', function(e) {
var input = e.target.parentNode.children[0];
if (input.disabled == true) {
input.disabled = false;
} else {
input.disabled = true;
}
})
});
<form id="contact">
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
</form>
Try
checkBox.addEventListener('change', function(e){
e.target.parentNode.children[0].disabled= !e.target.checked;
})
var getInput = document.getElementsByClassName("test"),
changeState = document.getElementsByClassName("check");
Array.from(changeState).forEach(function(checkBox){
checkBox.addEventListener('change', function(e){
e.target.parentNode.children[0].disabled= !e.target.checked;
})
});
<form id="contact">
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
</form>
It seems that condition if (inputText.disabled == true) isn't quite correct because may lead to unpredictable behavior.
Rather It should check whether checkbox checked or not.
Also it should select child element input of parent node. So .parentElement.querySelector('input') will select input element despite its position.
Let say if checkbox will stand before input field, then .parentElement.children[0] will select wrong element.
var changeState = document.getElementsByClassName("check");
[...changeState].forEach(function(checkBox){
checkBox.addEventListener('change', function(){
let inp = this.parentElement.querySelector('input');
inp.disabled = !this.checked;
})
});
<form id="contact">
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
<p>
<input type="text" class="test" disabled>
<input type="checkbox" class="check">
</p>
</form>
Related
I have checkboxes with randomly generated ids on every page view and want to preselect and disable some of them, so they can not get unchecked anymore. Is it possible?
With a simple script which looks after value="" I'm able to achieve the preselection but if I try to disable it at the same time, it disables all input fields on the page.
On closer inspection I found out that they have these attributes in common: <div id="cb-selection">and <input name="mycb">.
What would be your solution if we had this:
<form method="post" id="submit-this" class="" enctype="multipart/form-data">
<div id="cb-selection">
<div>
<input type="checkbox" name="mycb" id="?" value="Check1">
<label for="?"> Check1 </label>
</div>
<div>
<input type="checkbox" name="mycb" id="?" value="Check2">
<label for="?"> Check2 </label>
</div>
<div>
<input type="checkbox" name="mycb" id="?" value="Check3">
<label for="?"> Check3 </label>
</div>
</div>
</form>
I would appreciate any help.
let checkList = ['check1','check2'];
checkList.forEach(checkBox=>{
$(`input[value=${checkBox}]`).attr("checked", "checked")
$(`input[value=${checkBox}]`).attr("disabled", true)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id"123" value="check1">
<input type="checkbox" id"456" value="check2">
<input type="checkbox" id"789" value="check3">
you can do that
const myForm = document.getElementById('my-form')
, CheckList = [ 'Check2', 'Check4', 'Check5' ]
;
for (let ref of CheckList)
{
myForm[ref].checked = true
}
<form action="" id="my-form">
<label > <input type="checkbox" name="Check1" value="v1"> check 1 </label><br>
<label > <input type="checkbox" name="Check2" value="v2"> check 2 </label><br>
<label > <input type="checkbox" name="Check3" value="v3"> check 3 </label><br>
<label > <input type="checkbox" name="Check4" value="v4"> check 4 </label><br>
<label > <input type="checkbox" name="Check5" value="v5"> check 5 </label><br>
</form>
This is a sample code where in I am disabling or enabling the textbox on click of checkbox.
function enable_text(status) {
status = !status;
document.f1.other_text.disabled = status;
}
<body onload=enable_text(false);>
<form name=f1 method=post>
<input type="checkbox" name=others onclick="enable_text(this.checked)">Others
<input type=text name=other_text>
</form>
</body>
The problem I am facing is that I need to repeat the javascript code for everytime I add a new checkbox and textbox in the form as the name of the checkbox has been hardcoded. How shall I make it dynamic so that once I have added a new textbox with a checkbox it should take it dynamicaaly and enable it on clicking of checkbox
This is how you can do with javascript code
var classname = document.getElementsByClassName("chkbox");
var myFunction = function() {
if(this.checked == true){
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = false;
}else{
this.closest(".parentDiv").getElementsByClassName("txtbox")[0].disabled = true;
}
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>
This is how you can do with JQuery code
$('.chkbox').on('click',function(){
if($(this).is(':checked')){
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",false)
}
else{
$(this).closest(".parentDiv").find('.txtbox').prop("disabled",true)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name=f1 method=post>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
<div class="parentDiv">
<input type="checkbox" class='chkbox' name=others>Others
<input type=text name=other_text class='txtbox' disabled='disabled'>
</div>
</form>
You can do it by getting the checkbox change event and getting the next input box to the check box as shown in the code below.
$(function() {
$("input[type=checkbox]").change(function(){
if($(this).is(":checked"))
{
$(this).next('input[type=text]').prop('disabled', false);
}
else
{
$(this).next('input[type=text]').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form name=f1 method=post>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
<input type="checkbox" checked='checked' name=others>Others
<input type='text' name=other_text>
</form>
</body>
Try this...
$(".txt").prop("disabled",true);
$(".section input:checkbox").change(function () {
$(this).closest(".section").find('.txt').prop("disabled", !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body >
<form name=f1 method=post>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others1
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others2
<input type=text name=other_text class="txt" >
</div>
<div class="section">
<input type="checkbox" name=others class="checkbox">Others3
<input type=text name=other_text class="txt" >
</div>
</form>
</body>
This can accept as many checkbox/input as you want, as long as the data-name attribute of the checkbox is the same as the name attribute of the input element.
I used querySelectorAll('input[class="checker"]'), but this can be also replaced with getElementsByClassName('checker') (since I'm selecting through class)
I'm sure this can still be optimized, but I did this to show the connection between the checkbox and the input
var checkbox = document.querySelectorAll('input[class="checker"]');
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = enable_text;
}
function enable_text() {
var status = !this.checked;
var name = this.getAttribute('data-name');
var input = document.querySelector('[name="' + name + '"]');
input.disabled = status;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checker" type="checkbox" name="others" data-name="other_text">Others
<input type="text" name="other_text" disabled>
<br/>
<input class="checker" type="checkbox" name="name" data-name="name_text">Name
<input type="text" name="name_text" disabled>
<br/>
<input class="checker" type="checkbox" name="address" data-name="address_text">Address
<input type="text" name="address_text" disabled>
<br/>
<input class="checker" type="checkbox" name="email" data-name="email_text">Email
<input type="text" name="email_text" disabled>
My drop down menu of radios is like this:
<form id="productlist" onchange="">
<label class="radio">
<input type="radio" class="region_id" id="product" value="prod1" name="region" onclick="someFunction()">Product_id 1
</label>
<label class="radio">
<input type="radio" class="region_id" id="product" value="prod2" name="region" onclick="someFunction()">Product_id 2
</label>
<label class="radio">
<input type="radio" class="region_id" id="product" value="" name="region" onclick="someFunction()">Manual Product </label>
This form offers user to select a particular product from drop down list. But I want to add the feature of entering product id manually by user. That would be done by 3rd radio. Means if user selects 3rd radio, it should open a text box with submit button through which user will enter the manual product id.
Also that entered value should be accessible by "someFunction()" which I am calling in "onclick" event. Ideally (in first 2 radios) in "someFunction()" definition I can access the value of selected radio by using "this.value". How'd I do it in the case of the 3rd radio which would be accepting the manual product id by using an input box?
I am new to javascript. Can you please help me doing this.
The below code might help :-
<html>
<head>
<script type="text/javascript">
function show() {
document.getElementById('area').style.display = 'block';
document.getElementById('submit').style.display = 'block'
}
function hide() {
document.getElementById('area').style.display = 'none';
document.getElementById('submit').style.display = 'none'
}
</script>
</head>
<body>
<form name="radios">
<INPUT TYPE=RADIO NAME="X" VALUE="H" onclick="hide();"/>A
<INPUT TYPE=RADIO NAME="X" VALUE="L" onclick="hide();"/>B
<INPUT TYPE=RADIO NAME="X" VALUE="LL" onclick="show();"/>C
<TEXTAREA id="area" style="display: none;" NAME="data" ROWS=10 COLS=50></TEXTAREA>
<INPUT TYPE=submit value="submit" id="submit" style="display:none" onclick="show();"/>
</form>
</body>
</html>
I made a bin on the basis of your requirement.
Javascript
(function() {
var output=document.getElementById('output');
var getCustomValue;
this.someFunction = function(id) {
if (id === undefined || id==="") {
document.querySelector('#custom-wrapper').style.display = 'block';
output.innerHTML=getCustomValue;
} else {
document.querySelector('#custom-wrapper').style.display = 'none';
console.log(id);
output.innerHTML=id
}
}
this.setCustomerValue = function() {
getCustomValue = document.querySelector('#custom-value').value;
document.querySelector('#product3').setAttribute("value",getCustomValue);
document.querySelector('#custom-wrapper').style.display = 'none';
output.innerHTML=getCustomValue
}
})();
HTML
<body>
<form id="productlist">
<label class="radio">
<input type="radio" class="region_id" id="product1" value="prod1" name="region" onclick="someFunction(this.value)">Product_id 1
</label>
<label class="radio">
<input type="radio" class="region_id" id="product2" value="prod2" name="region" onclick="someFunction(this.value)">Product_id 2
</label>
<label class="radio">
<input type="radio" class="region_id" id="product3" value="" name="region" onclick="someFunction()">Manual Product
<div id="custom-wrapper">
<input type="text" id="custom-value" value="">
<input type="button" onclick="setCustomerValue()" value="Add Product" />
</div>
</label>
<div id="output">
</div>
</body>
JSBIN
You need to add a div that hide and show the input and submit button element.
.hidden{
display:none;
}
Initially it will be hidden when you click the third radio button it is shown and you can type in your id here.Once you enter some id into the text box and click on the first two radio button , you just need to get the value of that input element by it's id.Same can be done when you hot the submit button as well.
<form id="productlist" onchange="">
<label class="radio">
<input type="radio" class="region_id" id="product" value="prod1" name="region" onclick="someFunction()">Product_id 1
</label>
<br>
<label class="radio">
<input type="radio" class="region_id" id="product" value="prod2" name="region" onclick="someFunction()">Product_id 2
</label>
<br>
<label class="radio">
<input type="radio" class="region_id" id="thirdChk" value="" name="region" onclick="someFunction()">Manual Product
</label>
<div class="hidden" id="manualProductIdContainer">
<input type="text" id="productId" placeholder="Enter product id">
<button type="button" id="btnSubmit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$(document).on('click', '#thirdChk', function() {
$('#manualProductIdContainer').removeClass('hidden');
});
$(document).on('click', '#btnSubmit', function() {
var productId = $('#productId').val();
if(productId){
alert(productId);
}
else{
alert("please enter something in the textbox")
}
})
});
function someFunction() {
var productId = $('#productId').val();
if(){
alert(productId);
}
}
</script>
DEMO: https://jsfiddle.net/sarojsasmal/Lehkfkuq/8/
I have this HTML:
<form id="my form">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
And I want to show the result in <p onclick=""></p>
How do I type javascript to reveal what I choose in "checkbox"?
First of all you have provided a valid value for id. Instead of "my form", you can put "myform" or whatever but alphanumeric values which can not start with number.
<form id="myform">
<input type="checkbox" name="interest" value="swim"/>
<input type="checkbox" name="interest" value="baseball"/>
<input type="checkbox" name="interest" value="basketball"/>
<input type="checkbox" name="interest" value="badminton"/>
<input type="checkbox" name="interest" value="running"/>
</form>
<p id="pResult" onclick="showCheckedValues(event);"></p>
In Javascript you can collect all checkboxes and in <p> element put a function which will check, checked checkboxes and place their concated values like
<script>
var checkboxes;
function showCheckedValues(ev){
var pElement = ev.target;
if(checkboxes){
var checkedValues= [];
checkboxes.forEach(function(x){
if(x.checked){
checkedValues.push(x.value)
}
});
pElement.innerHTML = checkedValues.join(',');
}
}
window.onload = function(){
checkboxes = document.querySelectorAll('input[type=checkbox]');
}
</script>
How can I use jQuery to delete the text in the textarea that gets from the input_one when it not checked (one_1 one_3 one_4) ,and when it checked add it into textarea again?
The code is below:
<div id="input_one">
<input type="checkbox" value="one">
<input type="checkbox" value="one_1">
<input type="checkbox" value="one_2">
<input type="checkbox" value="one_3">
<input type="checkbox" value="one_4">
</div>
<div id="input_two">
<input type="checkbox" value="two_1">
<input type="checkbox" value="two_2">
<input type="checkbox" value="two_3">
<input type="checkbox" value="two_4">
<input type="checkbox" value="two_5">
</div>
<textarea id="get_checked"></textarea>
For example textarea value should be one one_3 two_4
Hope this helps
function updateTextArea() {
var allVals = [];
$('#input_one :checked,#input_two :checked').each(function () {
allVals.push($(this).val());
});
$('#get_checked').val(allVals);
}
$(function () {
$('#input_one input,#input_two input').click(updateTextArea);
});
jsfiddle
You can select checked checkbox using :checked selector and use .map() to replace item of checkboxs array with value of it.
$("#input_one :checkbox, #input_two :checkbox").change(function() {
var text = $("#input_one :checked, #input_two :checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
$(":checkbox").change(function() {
var text = $(":checked").map(function() {
return this.value;
}).get().join(" ");
$("#get_checked").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input_one">
<input type="checkbox" value="one" />
<input type="checkbox" value="one_1" />
<input type="checkbox" value="one_2" />
<input type="checkbox" value="one_3" />
<input type="checkbox" value="one_4" />
</div>
<div id="input_two">
<input type="checkbox" value="two_1" />
<input type="checkbox" value="two_2" />
<input type="checkbox" value="two_3" />
<input type="checkbox" value="two_4" />
<input type="checkbox" value="two_5" />
</div>
<textarea id="get_checked"></textarea>
As you said in question, the resutl text splited by space.