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">
Related
I have a requirement where all the checked values in checkboxes should be displayed in a textarea. This part works perfectly fine, but the problem occurs when I uncheck the checkbox unchecked element is not getting removed from the array. I have used jquery each function as shown in double quotes.
$("input:checkbox[name=category]:checked").each(function() {
As per my understanding, the above function will check for only checked values and updates into the array, so if any value is unchecked and this function is called, the unchecked value should be removed isn't it?
var pc = [];
function check(){
$("input:checkbox[name=category]:checked").each(function(){
pc.push(decodeURI($(this).val()));
});
pc = $.unique(pc);
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload ="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()" >
<textarea id="result"></textarea>
The above snippet highlights the issue,where if i uncheck any checkbox,the value is not getting removed from array.
Please correct me if i am doing anything wrong?
Please help me!
Thanks in advance
it could be helpful to you what I had changed here is the variable creation var pc=[] inside the check()
function check(){
var pc = [];
$("input:checkbox[name=category]:checked").each(function(){
pc.push(decodeURI($(this).val()));
});
pc = $.unique(pc);
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload ="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()" >
<textarea id="result"></textarea>
Move the array to inside the function, otherwise you're accumulating all the values from all previous clicks.
And in fact, .map() would be nicer than .each() so that you build the array while iterating. And you don't need the $.unique operation, which I assume was an attempt at a solution.
function check() {
var pc = $("input:checkbox[name=category]:checked").map(function() {
return decodeURI($(this).val());
}).toArray();
document.getElementById("result").value = pc.join("\n");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body onload="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()">
<textarea id="result"></textarea>
And here's a native JS solution.
function check() {
const vals = Array.from(
document.querySelectorAll("input[type=checkbox][name=category]:checked"),
el => decodeURI(el.value)
);
document.getElementById("result").value = vals.join("\n");
}
<body onload="check()">
<input type="checkbox" name="category" value="a/b" onclick="check()" checked>
<input type="checkbox" name="category" value="c/d" onclick="check()" checked>
<input type="checkbox" name="category" value="e/f" onclick="check()" checked>
<input type="checkbox" name="category" value="g/h" onclick="check()">
<textarea id="result"></textarea>
i wanted to push the list of values selected from the checkbox to the text box that already has the array list of values......i mean when the data is been retrieved the textbox has its value (the retrieved value with the checkbox being checked)......when i select the new checkbox value and push that to the retrieved value.....the textbox only displays the newly selected checkbox values(the old checkbox values get removed)..........i want the textbox to display the old retrieved values with the currently selected checkbox values with checkbox being checked
var pc = [];
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked){
pc.push(myname1);
}
else
{
pc.splice( pc.indexOf(myname1), 1 );
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body onload="getpc()">
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
When the page loads check which checkboxes are checked and add them to the array.
var pc = [];
var checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox") {
if (checkboxes[i].checked) {
getPc(checkboxes[i].id);
}
}
}
function getPc(myname1) {
var text1 = myname1;
if (document.getElementById(myname1).checked) {
pc.push(myname1);
} else {
pc.splice(pc.indexOf(myname1), 1);
}
console.log(pc);
document.getElementById("pca").value = pc.join("/");
}
<body>
<p>Product Categories</p>
<input type="text" class="form-control" id="pca" name="pc" form="form1" onclick="getPc()" value="myname1/check2/check3">
<input type="checkbox" name="myname1" id="myname1" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check2" id="check2" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check3" id="check3" onclick="getPc(this.id)" checked>
<input type="checkbox" name="check4" id="check4" onclick="getPc(this.id)" >
<input type="checkbox" name="check5" id="check5" onclick="getPc(this.id)" >
<input type="checkbox" name="check6" id="check6" onclick="getPc(this.id)" >
I have a dynamic table the user add's rows to by clicking the Add row button. In the row i have a button 'Select Scope' that opens a new window full of checkbox's I'm trying to get all of the selected checkbox's values to post to a text input in the dynamic table from the parent page. Dynamic Table PicSelect Scope Pic I know that this is possible just using javascript and I feel like I am on the right track from everything that I have read. For whatever reason though it's not passing the checkbox values back to the text input.
Parent Page Code
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<button onclick="ScopeFunction()">Select Scope</button>
<input type"text" name="Scope[]" style="background-color:#FFE68C">
</td>
</tr>
</table>
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
var popup;
function SelectScope() {
window.open("http://fisenusa.net/pm/pmSelectScope.php", "_blank", "width=550,height=875");
popup.focus();
}
</script>
EDITED Popup Window Code
<h1>Select Scope</h1>
<h3>Select all that apply</h3>
<form name="childForm" id="updateParent();">
<li><input type="checkbox" name="S1" value="100OA"/><font size="4">100OA</font>
<input type="checkbox" name="S2" value="BTank"/><font size="4">BTank</font>
<input type="checkbox" name="S3" value="WSEcon"/><font size="4">WSEcon</font>
<input type="checkbox" name="S4" value="NetPkg"/><font size="4">NetPkg</font>
<input type="checkbox" name="S5" value="CstmCtrl"/><font size="4">CstmCtrl</font>
<br><br>
<li><input type="checkbox" name="S6" value="CstmRef"/><font size="4">CstmRef</font>
<input type="checkbox" name="S7" value="CstmSM"/><font size="4">CstmSM</font>
<input type="checkbox" name="S8" value="CstmHV"/><font size="4">CstmHV</font>
<input type="checkbox" name="S9" value="CPCTrl"/><font size="4">CPCtrl</font>
<input type="checkbox" name="S10" value="DesiHW"/><font size="4">DesiHW</font>
<br><br>
<li><input type="checkbox" name="S11" value="DigScroll"/><font size="4">DigScroll</font>
<input type="checkbox" name="S12" value="DFGas"/><font size="4">DFGas</font>
<input type="checkbox" name="S13" value="DWall"/><font size="4">DWall</font>
<input type="checkbox" name="S14" value="MZ-DD"/><font size="4">MZ-DD</font>
<input type="checkbox" name="S15" value="DPP"/><font size="4">DPP</font>
<input type="checkbox" name="S16" value="Encl"/><font size="4">Encl</font>
<br><br>
<li><input type="checkbox" name="S17" value="PlateHX"/><font size="4">PlateHX</font>
<input type="checkbox" name="S18" value="ERW"/><font size="4">ERW</font>
<input type="checkbox" name="S19" value="ERWModule"/><font size="4">ERWModule</font>
<input type="checkbox" name="S20" value="ERVMod"/><font size="4">ERVMod </font>
<input type="checkbox" name="S21" value="EvapBP"/><font size="4">EvapBP</font>
<br><br>
<li><input type="checkbox" name="S22" value="PreEvap"/><font size="4">PreEvap</font>
<input type="checkbox" name="S23" value="XP"/><font size="4">XP</font>
<input type="checkbox" name="S24" value="Extended"/><font size="4">Extend</font>
<input type="checkbox" name="S25" value="FanWall"/><font size="4">FanWall</font>
<input type="checkbox" name="S26" value="FillStat"/><font size="4">FillStat</font>
<input type="checkbox" name="S27" value="FFilt"/><font size="4">FFilt</font>
<br><br>
<li><input type="checkbox" name="S28" value="PFilt"/><font size="4">PFilt</font>
<input type="checkbox" name="S29" value="CarbFilt"/><font size="4">CarbFilt</font>
<input type="checkbox" name="S30" value="CustFilt"/><font size="4">CustFilt </font>
<input type="checkbox" name="S31" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S32" value="GHeat"/><font size="4">GHeat</font>
<br><br>
<li><input type="checkbox" name="S33" value="HighStatic"/><font size="4">HighStatic</font>
<input type="checkbox" name="S34" value="HGBP"/><font size="4">HGBP</font>
<input type="checkbox" name="S35" value="HGRH"/><font size="4">HGRH</font>
<input type="checkbox" name="S36" value="HPConv"/><font size="4">HPConv</font>
<input type="checkbox" name="S37" value="GFHumid"/><font size="4">GFHumid</font>
<br><br>
<li><input type="checkbox" name="S38" value="TOHumid"/><font size="4">TOHumid</font>
<input type="checkbox" name="S39" value="MHGRH"/><font size="4">MHGRH</font>
<input type="checkbox" name="S40" value="LowAF"/><font size="4">LowAF</font>
<input type="checkbox" name="S41" value="LowAFSF"/><font size="4">LowAFSF</font>
<input type="checkbox" name="S42" value="LowAmbient"/><font size="4">LowAmbient</font>
<br><br>
<li><input type="checkbox" name="S43" value="MEHeat(R)"/><font size="4">MEHeat(R)</font>
<input type="checkbox" name="S44" value="MEHeat(I)"/><font size="4">MEHeat(I)</font>
<input type="checkbox" name="S45" value="MGH(R)"/><font size="4">MGH(R)</font>
<input type="checkbox" name="S46" value="MGH(H)"/><font size="4">MGH(H)</font>
<input type="checkbox" name="S47" value="MtrRR"/><font size="4">MtrRR</font>
<br><br>
<li><input type="checkbox" name="S48" value="MotorGM"/><font size="4">MotorGM</font>
<input type="checkbox" name="S49" value="MZ-Mod"/><font size="4">MZ-Mod</font>
<input type="checkbox" name="S50" value="NatConv"/><font size="4">NatConv</font>
<input type="checkbox" name="S51" value="OAFMS"/><font size="4">OAFMS</font>
<input type="checkbox" name="S52" value="OSMotor"/><font size="4">OSMotor</font>
<br><br>
<li><input type="checkbox" name="S53" value="MZ-VAV"/><font size="4">MZ-VAV</font>
<input type="checkbox" name="S54" value="Mon"/><font size="4">Mon</font>
<input type="checkbox" name="S55" value="PumpPkg"/><font size="4">PumpPkg</font>
<input type="checkbox" name="S56" value="PipePkg"/><font size="4">PipePkg</font>
<input type="checkbox" name="S57" value="ServLite"/><font size="4">ServLite</font>
<br><br>
<li><input type="checkbox" name="S58" value="SparkRes"/><font size="4">SparkRes</font>
<input type="checkbox" name="S59" value="SSLube"/><font size="4">SSLube</font>
<input type="checkbox" name="S60" value="UVLights"/><font size="4">UVLights</font>
<input type="checkbox" name="S61" value="VSComp"/><font size="4">VSComp</font>
<br><br>
<li><input type="checkbox" name="S62" value="LCVAV"/><font size="4">LCVAV</font>
<input type="checkbox" name="S63" value="XFVAV"/><font size="4">XFVAV</font>
<input type="checkbox" name="S64" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S65" value="WSHPConv"/><font size="4">WSHPConv</font>
<input type="checkbox" name="S66" value="3RConv"/><font size="4">3RConv</font>
<br><br>
<li><input type="checkbox" name="S67" value="WiringGM"/><font size="4">WiringGM</font>
<input type="checkbox" name="S68" value="XFan"/><font size="4">XFan</font>
<input type="checkbox" name="S69" value="RFan"/><font size="4">RFan</font>
<input type="checkbox" name="S70" value="SFan"/><font size="4">SFan</font>
<input type="checkbox" name="S71" value="OAHood"/><font size="4">OAHood</font>
<br><br>
<li><input type="checkbox" name="S72" value="XAHood"/><font size="4">XAHood</font>
<input type="checkbox" name="S73" value="XALouver"/><font size="4">XALouver</font>
<input type="checkbox" name="S74" value="OALouver"/><font size="4">OALouver</font>
<input type="checkbox" name="S75" value="SteamCoil"/><font size="4">SteamCoil</font>
<input type="checkbox" name="S76" value="HWCoil"/><font size="4">HWCoil</font>
<br><br>
<li><input type="checkbox" name="S77" value="CHWCoil"/><font size="4">CHWCoil</font>
<input type="checkbox" name="S78" value="CondCoil"/><font size="4">CondCoil</font>
<input type="checkbox" name="S79" value="DXCoil"/><font size="4">DXCoil</font>
<input type="checkbox" name="S80" value="F&BP"/><font size="4">F&BP</font>
<input type="checkbox" name="S81" value="Xfrmr"/><font size="4">Xfrmr</font>
<br><br>
<li><input type="checkbox" name="S82" value="WCCond"/><font size="4">WCCond</font>
<input type="checkbox" name="S83" value="PLFrHX"/><font size="4">PlFrHX</li></font>
<br>
<input type="submit" value="Submit" />
</form>
<script>
function updateParent() {
s = "";
for (i = 0; i < 6; i++)
{
chk = eval("self.document.childForm.t" + i);
if (chk.checked)
s += chk.value + ", ";
}
opener.document.parentForm.toppings.value = s;
self.close();
}
</script>
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>
I have these checkboxs:
'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">';
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">';
Which I can check or uncheck by clinking on them. Now I am trying to add one more checkbox, which will check or uncheck all previous checkbox at once when clicking.
'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'
What is the JS code to execute when clicking the checkbox to check or uncheck all checkbox "toggleable" at once?
Here's an example on how to make this work in pure JavaScript.
var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
var checked = this.checked;
var otherCheckboxes = document.querySelectorAll(".toggleable");
[].forEach.call(otherCheckboxes, function(item) {
item.checked = checked;
});
});
<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>
<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">
<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">
try it
$(document).ready(function() {
$(".toggleable").click(function() {
var checkboxes = $(".toggleable");
if($(this).prop("checked")) checkboxes.prop("checked",true);
else checkboxes.prop("checked",false);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkBox1" class= "toggleable">
<input type="checkbox" name="checkBox2" class= "toggleable">
<input type="checkbox" name="checkBox3" class= "toggleable">
Just verify through JS that if particular checkbox checked. It has to check all of them.
JS Demo Below: UPDATE
Just added id to your inputs.
function checkAll(x) {
if(x.checked == true){
document.getElementById('c1').checked = true;
document.getElementById('c2').checked = true;
document.getElementById('c3').checked = true;
}else{
document.getElementById('c1').checked = false;
document.getElementById('c2').checked = false;
document.getElementById('c3').checked = false;
}
}
Multiple Check Box Below:
<br>
<input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1">
<input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2">
<input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3">
</br>
Check below to Check them all:
</br>
<input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all">
JQuery Demo below:
$('#checkAll').click(function () {
$('input:checkbox').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" > Check All
</br>
<input type="checkbox" id="checkItem"> Item 1
<input type="checkbox" id="checkItem"> Item 2
<input type="checkbox" id="checkItem"> Item3