I have an order form with several checkbox input fields. I want to show the user the selection made before submitting the form. The js script shown bellow works as intended if the user checks a box the value of that box is showed in the paragraph. The problem is that every additional checked checkbox overrides the previous shown result.
How do I change the script to output all the checked checkbox?
This is the PHP form:
<input type="checkbox" onchange="toggleCheckbox(this)" value="1" name="1">
<input type="checkbox" onchange="toggleCheckbox(this)" value="2" name="2">
<input type="checkbox" onchange="toggleCheckbox(this)" value="3" name="3">
<input type="checkbox" onchange="toggleCheckbox(this)" value="4" name="4">
<input type="checkbox" onchange="toggleCheckbox(this)" value="5" name="5">
<input type="checkbox" onchange="toggleCheckbox(this)" value="6" name="6">
<input type="checkbox" onchange="toggleCheckbox(this)" value="7" name="7">
The JavaScript i use:
<script type="text/javascript">
function toggleCheckbox(element){
if (element.checked){
document.getElementById("test").innerHTML = element.value;
}
else document.getElementById("test").innerHTML = "";
}
</script>
The HTML field:
<p id="test"></p>
+= not =
function toggleCheckbox(element){
if (element.checked)
document.getElementById("test").innerHTML += " " + element.value;
else
document.getElementById("test").innerHTML =
document.getElementById("test").innerHTML.replace(element.value, "");
}
Related
Cannot find an answer:
I have searched Stack Overflow, however, despite finding lots of similar posts — and more complicated situations — I still couldn't find an answer to the issue I am trying to solve.
Here's my issue:
I have four radio buttons, and one hidden field:
<!-- My HTML Document -->
<form action="/my-doc.html" method="post">
<!-- The 4 Radio Buttons-->
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<!-- The Hidden Field -->
<input type="hidden" name="criteria" value="1">
<!-- My Submit Button -->
<input type="submit" name="action" value="Go">
</form>
What I need to do is set the value of <input type="hidden" name="criteria" value="1"> so that it is 0
Like this: <input type="hidden" name="criteria" value="0">
...but only after the user selects either the first, or second, radio button. The value of the hidden field should remain as being equal to 1 if any other radio button is selected.
How does a person do this using JavaScript?
Requirements: "Looking for a VanillaJS answer."
you can try below option
In javascript
function setValue() {
var selectedRadio = '';
var games = document.getElementsByName('game')
for (var i = 0; i < games.length; i++) {
if (games[i].checked) {
selectedRadio = games[i].value;
}
}
document.getElementById("hdnSelectedRadValue").value = (selectedRadio == "1" || selectedRadio == "2") ? "0" : "1";
return false;
}
Changes to do in HTML side
<body style="background-color: #f2f2f2;">
<form action="some.htm" method="post">
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="text" name="criteria" id="hdnSelectedRadValue">
<input type="submit" name="action" value="Go" onclick="setValue();">
</form>
</body>
var radios =
document.querySelectorAll('input[type=radio][name="game"]');
radios.forEach(radio => radio.addEventListener(
'change', () => {
document.getElementsByName("criteria")[0].value =
parseInt(radio.value, 10) > 2 ? '1' : '0';
}
));
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" value="1">
<input type="submit" name="action" value="Go">
You can simply listen to "change" events on all of the radio buttons, then just set the value accordingly.
Here's the snippet code I have written and tested
(function(){
let hdfValue = document.getElementById("myhiddenfield")
let radioButtons = document.querySelectorAll('input[name="game"]');
let submitButton = document.querySelector('input[name="action"]')
radioButtons.forEach((input) => {
input.addEventListener('change', function(e){
let radioButtonValue = e.target.value
if(radioButtonValue == 1 || radioButtonValue == 2){
hdfValue.value = 0;
} else {
hdfValue.value = 1;
}
});
});
submitButton.addEventListener("click", function() {
console.log(hdfValue.value)
});
})()
<form>
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" id="myhiddenfield" value="1">
<input type="button" name="action" value="Go">
</form>
var listvalues = []
$('.check').on('change', function() {
var val = this.checked ? this.value : '';
listvalues.push(val)
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
I have a code which should push and pop checkbox value based on checkbox check and uncheck, for example if I check and checkbox it should show the value in a div and if I unselect the checkbox the value should disappear from div, and it should not allow anyone to append duplicate data.
But what I did appends even if it is duplicate it appends the data. Can anyone help me on this?
and i wanted to create separate div for each checkbox
Instead of push & pop value from array, you can get all checked values with listvalues = $('.check:checked').toArray().map(x => x.value); and display it.
$('.check:checked') will only return .check which are checked. Then .toArray() will convert jquery object into array & get use .map(x => x.value) to fetch only value from checked elements.
var listvalues = []
$('.check').on('change', function() {
listvalues = $('.check:checked').toArray().map(x => x.value).join(', ');
$('#show').html(listvalues);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
To remove you can use filter to exclude the unchecked item. I'm not sure what you want to achieve with different divs, please explain.
var listvalues = []
$('.check').on('change', function() {
if(this.checked){
listvalues.push(this.value);
}
else {
listvalues = listvalues.filter(item => item != this.value);
}
$('#show').html(listvalues.sort());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" class="check" value="1" />1
<input type="checkbox" class="check" value="2" />2
<input type="checkbox" class="check" value="3" />3
<input type="checkbox" class="check" value="4" />4
<div id="show"> </div>
I would like to have the possibility with javascript to deselect checkbox "demo2" when I deselect checkbox "demo1".
only deselect
<input type="checkbox" name="demo1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car">
<label for="vehicle2"> I have a car</label><br>
I gues you just want to have "radio" like behaviour.
You can see below how it can be done with pure JS.
<html>
<body>
<script>
function switcher(obj) {
if(obj.checked == true) {
document.getElementsByName('demo2')[0].checked = false;
document.getElementsByName('demo1')[0].checked = false;
obj.checked= true
}
}
</script>
<input type="checkbox" name="demo1" value="Bike" onclick="switcher(this)">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car" onclick="switcher(this)">
<label for="vehicle2"> I have a car</label><br>
</body>
</html>
<table>
<td style="width:40%;" bgcolor="#FFDDDD">
<label>
<input type="checkbox" value="1" name="crs_domain[1]" unchecked="">
Math;
</label>
<label>
<input type="checkbox" value="2" name="crs_domain[2]" unchecked="">
Science;
</label>
<label>
<input type="checkbox" value="3" name="crs_domain[3]" unchecked="">
Bio;
</label>
</td>
</table>
I am doing tedious work about updating tick the checkbox according an excel file.
Example: Science and Bio need to be tick. Than i need to tick the checkbox of Science and Bio, after that submit.
I realize that i can change the html element from unchecked to checked, then click Submit it will be the same result.
<label>
<input type="checkbox" value="2" name="crs_domain[2]" checked="">
Science;
</label>
So i wanna write an Extension to do stuff like: when i copy "Science, Bio". The extension will auto change my html element, than i just need to copy the subject who need change, than submit, no need tick one by one.
I test var x = document.getElementsByTagName("label") on browser console, x[1] will be the element. But cannot x[1].checked let unchecked become checked.
So my question is how to let unchecked become checked.
var secondInput = document.getElementsByTagName("input")[1];
secondInput.checked = true;
After submit trigger SetCheckBox(). Also set id of each checkbox
function SetCheckBox() {
document.getElementById("science").checked = true;
document.getElementById("bio").checked = true;
}
<body onload="SetCheckBox()">
<table>
<td style="width:40%;" bgcolor="#FFDDDD">
<label>
<input id="math" type="checkbox" value="1">
Math;
</label>
<label>
<input id="science" type="checkbox" value="2">
Science;
</label>
<label>
<input id="bio" type="checkbox" value="3">
Bio;
</label>
</td>
</table>
</body>
I want to check all checkboxes using javascript. When I click on submit button all the checkboxes should be checked. However all the checkboxes are checked just for a few seconds.
What am I doing wrong?
html:
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading<br/>
<input type="checkbox" name="h" value="2" id="g">php<br/>
<input type="checkbox" name="h" value="3" id="g">playing<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming<br/>
<input type="checkbox" name="h" value="5" id="g">Coding<br/>
<input type="submit" name="sub" value="submit" onclick="checkall(document.myform.h)" >
</form>
javascript code:
<script type="text/javascript">
function checkall(chk){
for(var i = 0; i < chk.length; i++) {
chk[i].checked = true;
}
}
</script>
the problem is you are using a submit button within a form, which on click will submit the form.
So one solution is to change the button form a submit button to a normal button which will not trigger the submit of the form.
function checkall(chk) {
var i;
for (i = 0; i < chk.length; i++) {
chk[i].checked = true;
//return true;
}
}
<form method="post" name="myform">
<input type="checkbox" name="h" value="1" id="g">Reading
<br/>
<input type="checkbox" name="h" value="2" id="g">php
<br/>
<input type="checkbox" name="h" value="3" id="g">playing
<br/>
<input type="checkbox" name="h" value="4" id="g">Gaming
<br/>
<input type="checkbox" name="h" value="5" id="g">Coding
<br/>
<!--<input type="radio" name="gen" value="male">Male<br/>-->
<!--<input type="radio" name="gen" value="female">Female<br/>-->
<input type="button" name="sub" value="submit" onclick="checkall(document.myform.h)">
</form>
You created a form.And form will be submit after click on submit button.You can use following approach to select all checkbox only.
step 1- Write following statement in html.
<input type="checkbox" name="h" value="1" class="g">Reading<br/>
<input type="checkbox" name="h" value="2" class="g">php<br/>
<input type="checkbox" name="h" value="3" class="g">playing<br/>
<input type="checkbox" name="h" value="4" class="g">Gaming<br/>
<input type="checkbox" name="h" value="5" class="g">Coding<br/>
<input type="button" name="sub" value="check all" id='custom_button'>
step 2- Write following statement in js file-
jQuery('#custom_button').click(function(){
jQuery('.g').each(function() { //loop through each checkbox
this.checked = true; //deselect all checkboxes with class "checkbox1"
});
});
Above statement will select all checkbox after click on button.
If you want to check example please use this link - http://jsfiddle.net/oxg3p1ny/1/
your code is working just stop from form submit will solve your problem use <form method="post" name="myform" onsubmit="return false"> and use ajax to get data.
Working Fiddle