Develop Reference

Form - checklist value to not transferred to PHP

I'm trying to populate the multiple selected choice from checklist into PHP. However, only the "Reading" choice is populating in the new window and not the other choices that I have selected. For example, I have selected "Painting & Travelling" but after I clicked submit, the value that showing is "Reading".Kindly advise how to fix this. Thanks in advance. I'm new to web development.
Javascript
function validate(){
var x3=document.getElementById("hobbies");
if (x3.value == "")
{
alert("No blank values allowed")
return false;
}
else
{
window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+x3.value+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
}
Form
<form onsubmit="return validate()" method= "get">
<label>Hobbies : </label><br><br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading"/>Reading<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Painting"/>Painting<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling"/>Traveling<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Baking"/>Baking<br/><br/>
</div>
</form>

Please try the following:
<form onsubmit="return validate()" method= "get">
<label>Hobbies : </label><br><br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading" />Reading<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Painting" />Painting<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling" />Traveling<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Baking" />Baking<br/><br/>
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function validate() {
var x3 = document.getElementsByName("hobbies[]");
var selectedVals = "";
for(var i = 0; i < x3.length; i++) {
if((x3[i].checked) && (x3[i].value != '')) {
selectedVals += (selectedVals == '')?x3[i].value:','+x3[i].value;
}
}
if(selectedVals == "") {
alert("No blank values allowed")
return false;
}
else {
window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+selectedVals+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
}
}
</script>
Hope this may help.

You need to fetch the values of checkbox one by one in loop:
<form onsubmit="return validate()" method= "get" name="demoForm">
<label>Hobbies : </label><br><br>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Reading"/>Reading<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Painting"/>Painting<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Traveling"/>Traveling<br/>
<input type="checkbox" id="hobbies" name="hobbies[]" value="Baking"/>Baking<br/><br/>
<button type="submit">click</button>
</form>
<script type="text/javascript">
function validate(){
var hobby = document.forms['demoForm'].elements[ 'hobbies[]' ];
var len = hobby.length;
var values="";
for (var i=0;i<len;i++)
{
if (hobby[i].checked)
{
values += hobby[i].value+",";
}
}
values = values.replace(/,\s*$/, "");
window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+values+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0 ');
}
</script>
You can also fetch the values using $_GET['hobbies']

You set all elements with the same id
id is unique attribute so whatever you select the javascript will always return the first element value on x3 you can do this if you only want to submit selected checkboxes
<script type="text/javascript">
function validate() {
var x3 = document.getElementsByName("hobbies[]");
var values= "";
for(var i = 0; i < x3.length; i++) {
if(x3[i].checked) {
if(x3[i].value==''){
alert('No blank values allowed');
return false;
}
else{
values+= x3[i].value+',';
}
}
}
window.open('https://quiet-odyssey-258110.appspot.com/?hobbies[]='+values+'','mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
}
}

javascript disable checkbox when another checkbox is checked with same name [duplicate]

I have a group of check boxes with same name, what I need is when I click any one of them, other checkboxes must get disabled. how should I apply Javascript over it?
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
<input type="checkbox" name="finallevelusers[]" value="1"/>
Please help...

You could do
$('input').attr('disabled',true);
...if you really need it. But you might be better off using radio buttons.
Try the demo

<script type="text/javascript">
for (i=0; i<document.test.finallevelusers.length; i++){
if (document.test.finallevelusers[i].checked !=true)
document.test.finallevelusers[i].disabled='true';
}
</script>
probably you want them enabled again when user uncheck the checkbox
for (i=0; i<document.test.finallevelusers.length; i++){
if (document.test.finallevelusers[i].disabled ==true)
document.test.finallevelusers[i].disabled='false';
}

<script type="text/javascript">
function disableHandler (form, inputName) {
var inputs = form.elements[inputName];
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = function (evt) {
if (this.checked) {
disableInputs(this, inputs);
}
else {
enableInputs(this, inputs);
}
return true;
};
}
}
function disableInputs (input, inputs) {
for (var i = 0; i < inputs.length; i++) {
var currentInput = inputs[i];
if (currentInput != input) {
currentInput.disabled = true;
}
}
}
function enableInputs (input, inputs) {
for (var i = 0; i < inputs.length; i++) {
var currentInput = inputs[i];
if (currentInput != input) {
currentInput.disabled = false;
}
}
}
</script>
</head>
<body>
<form name="aForm" action="">
<p>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
<label>
<input type="checkbox" name="finallevelusers[]" value="1">
</label>
</p>
</form>
<script type="text/javascript">
disableHandler(document.forms.aForm, 'finallevelusers[]');
</script>

Hope This solution helps you-
your DOM could be something like this :
<div class="checkboxes">
<input type="checkbox" name="sameCheck" class="checkbox" id="1" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="2" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="3" onchange="checkChange()">
<input type="checkbox" name="sameCheck" class="checkbox" id="4" onchange="checkChange()">
</div>
And your logic is this :
let checkbox = document.querySelectorAll('.checkbox')
let b = false;
function checkChange(){
b = !b
if(b){
for(let i = 0 ; i< checkbox.length; i++){
if(checkbox[i].checked === false){
checkbox[i].disabled = 'true';
}
}
}else{
for(let i = 0 ; i< checkbox.length; i++){
checkbox[i].removeAttribute('disabled');
}
}
}

Try code like this
<script>
function uncheck(){
for(var ii=1; ii<=4; ii++){
if(document.getElementById("q6_"+ii).checked==true){
document.getElementById("q6_"+ii).checked=false;
}
}
}
</script>

Javascript looping through Page elements to change states?

This is relatively simple, but I'm missing something. I have 10 checkboxes on a page, in a table in a form. They all have names and id's of add0, add1, add2, etc. I wanted to build a "check/uncheck all" checkbox, but my code doesn't seem to be working. On firefox, using firebug, but it can't seem to follow the script execution.
function checkboxprocess(current)
{
for (i = 0; i < 10; i++)
{
if (current.checked)
{
document.getElementById("add" + i).checked = true;
}
else
{
document.getElementById("add" + i]).checked = false;
}
}
}
Checkbox:
echo "Select All: <input type=\"checkbox\" name=\"add\" id=\"add\" value=1 onChange=\"checkboxprocess(this)\"><br>";

You have extra ] in your code:
document.getElementById("add" + i]).checked = false;
And you don't have to check if is current checked each time in the loop, you can do it easily like this:
function checkboxprocess(current) {
for (i = 0; i < 10; i++) {
document.getElementById("add" + i).checked = current.checked;
// current.checked will return true/false
}
}
<form>
Select All: <input type="checkbox" onChange="checkboxprocess(this)">
<br /> <br />
<input type="checkbox" id="add0">
<input type="checkbox" id="add1">
<input type="checkbox" id="add2">
<input type="checkbox" id="add3">
<input type="checkbox" id="add4">
<input type="checkbox" id="add5">
<input type="checkbox" id="add6">
<input type="checkbox" id="add7">
<input type="checkbox" id="add8">
<input type="checkbox" id="add9">
</form>

Alert when selected similar value from multiple check box with the same class name

When I select for a second time from the below check box with the same value it should alert 'value is already checked' How do I do that using jquery?
<div>
<input type="checkbox" class="check" value="1"/>
</div>
<div>
<input type="checkbox" class="check" value="2"/>
</div>
<div>
<input type="checkbox" class="check" value="1"/>
</div>
<div>
<input type="checkbox" class="check" value="3"/>
</div>
<div>
<input type="checkbox" class="check" value="4"/>
</div>
<div>
<input type="checkbox" class="check" value="3"/>
</div>
I tried with below code but nothing is working
var itemVal=false;
$(document).on('change','.check:checked',function(){
selVal=$(this).val();
$('.check:checked').each(function(){
if($(this).val()==selVal)
itemVal=true;
});
if(itemVal==true){
alert('Proceed');
}else{
alert('Please choose same name');
}
});

Try this:
$('.check').change(function(event){
var arr = $(".check:checked").map(function() {
return $(this).val();
}).get();
var sorted_arr = arr.sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
if (sorted_arr[i + 1] == sorted_arr[i]) {
results.push(sorted_arr[i]);
}
}
if(results.length >0){
alert('value is already checked')
}
});
Demo:
http://jsfiddle.net/9a8o37h0/1/

Like this:
$('.check').click(function () {
if(!this.checked)
alert("Value is already Checked");
});
If you want to keep it checked add this before the alert
this.checked = true;

Javascript: Check Uncheck Grouped Checkboxes

I have a form like:-
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="modules[1]" onclick="checkgroup(this)" value="1">Module 1<br>
<input type="checkbox" name="units[1][1]">Unit 1
<input type="checkbox" name="units[1][2]">Unit 2
<input type="checkbox" name="units[1][3]">Unit 3<br>
<input type="checkbox" name="modules[2]" onclick="checkgroup(this)" value="2">Module 2<br>
<input type="checkbox" name="units[2][1]">Unit 4
<input type="checkbox" name="units[2][2]">Unit 5
<input type="checkbox" name="units[2][3]">Unit 6<br>
<input type="checkbox" name="modules[3]" onclick="checkgroup(this)" value="3">Module 3<br>
<input type="checkbox" name="units[3][1]">Unit 7
<input type="checkbox" name="units[3][2]">Unit 8
<input type="checkbox" name="units[3][3]">Unit 9
</form>
I want to check/uncheck all the sub checkboxes contained under each Module (Main Checkbox).
For example if i check "Module 1" then only Unit 1,2 and 3 should be checked and on uncheck of "Module 1" those Units should be unchecked. Same thing should behave for other modules.
I am looking for a Javascript function to perform this.

Try this
function checkgroup(obj){
var element = [];
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].name.indexOf('units[' + obj.value + ']') == 0)
{
element.push(inputs[i]);
}
}
if(obj.checked){
for(i=0;i<element.length;i++){
element[i].checked = true;
}
}else{
for(i=0;i<element.length;i++){
element[i].checked = false;
}
}
}