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>
Related
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>
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/
First name repeats and other names can not be selected, where is the problem?
Also, how do I make the choice just one name?
function copyTextValue(bf) {
if(bf.checked)
var text1 = document.getElementById("names").innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>James</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Emre</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Kate</p>
<input type="checkbox" name="check1" onchange="copyTextValue(this);"/><p id='names'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">
https://jsfiddle.net/emresaracoglu/LL5ukynq/
You have used id attribute with same ids so it will not work. so you need to set id with different value and pass it in function.
function copyTextValue(bf,selector) {
if(bf.checked)
var text1 = document.getElementById(selector).innerHTML;
else
text1='';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
<b>Names</b><hr/>
<input type="radio" name="check1" onchange="copyTextValue(this,'names1');"/><p id='names1'>James</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names2');"/><p id='names2'>Emre</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names3');"/><p id='names3'>Kate</p>
<input type="radio" name="check1" onchange="copyTextValue(this,'names4');"/><p id='names4'>Berkay</p>
<hr/><b>Form</b><hr/>
<input id="Name2">
<input id="Name3">
Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?
Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.
A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example
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.