fill details inside checked checkbox - javascript

when I checked any checkbox , then it should gives a error message for all details whatever inside checked checkbox. In my code if I select 1st checkbox then it shows one textbox and one dropdown list, wants to do validation to fill textbox and dropdown list value, until it don't check another options ,& same with all checkbox. Rightnow I just take textbox and dropdown list for only 1st checkbox but it is for every checkbox.
In simple words, unless i don't fill textbox value and dropdown value, it does not allow to check next option.
I don't know to do. can anyone please tell me how to do this.
<script>
function validate()
{
document.getElementById("error").innerHTML="atleast check one checkbox.";
//alert("");
var chk=document.getElementsByName("chkbox");
var hasChecked = false;
for(var i=0; i<chk.length; i++)
{
if(chk[i].checked)
{
hasChecked= true;
break;
}
}
return true;
}
function toggle(source) {
checkboxes = document.getElementsByName('a[]');
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="a) selected 1"> a)select 1<br /><br />
Name : <input type="text" name="fname" /><br /><br />
Country : <select><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="b) selected 2"/> b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="c)selected 3"/> c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="d)selected 4"/> d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" onClick="toggle(this)" value="e)Or all of the above"/> e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="validate()" name="submit" value="Submit" />
</form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$a=#$_POST['a'];
$supplies = #implode(',',$_POST['a']);
echo $supplies;
}
?>

Below is the solution:
<script>
function validate()
{
var inputTags = document.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
if (inputTags[i].type == 'checkbox') {
if(inputTags[i].checked){
checkboxCount++;
}
}
}
if(checkboxCount == 0){
document.getElementById("error").innerHTML="atleast check one checkbox.";
return false;
}else{
checkboxesahas = document.getElementsByClassName('aopt');
for(var i=0, n=checkboxesahas.length;i<n;i++)
{
if(checkboxesahas[i].checked){
ahaselements = document.getElementsByClassName('ahaselement');
for(var j=1;j<=ahaselements.length;j++) {
ahaselementid = 'ahaselement'+j;
if(document.getElementById(ahaselementid).value == ''){
document.getElementById("error").innerHTML="value missing in one or more of checked checkbox element.";
return false;
}
}
}
}
}
return true;
}
function toggle(source) {
checkboxes = document.getElementsByClassName('aopt');
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="a) selected 1"> a)select 1<br /><br />
Name : <input type="text" name="fname" id="ahaselement1" class="ahaselement" /><br /><br />
Country : <select name="country" id="ahaselement2" class="ahaselement"><option value="">no</option><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="b) selected 2"/> b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="c)selected 3"/> c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="d)selected 4"/> d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" onClick="toggle(this)" value="e)Or all of the above"/> e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="return validate()" name="submit" value="Submit" />
</form>
</body>
</html>
<?php
if(isset($_POST['submit']))
{
$a=#$_POST['a'];
$supplies = #implode(',',$_POST['a']);
echo $supplies;
}
?>
PS : I have filled validation in error id via innerHTML same way as you did. Also there are some changes made in checkboxes and other elements. Please check that also.
Let me know if there is any issue. Thank You! :)

Related

how to select multiple checkbox validation in javascript

Here is my Form. I need validation in JavaScript.
At least one checkbox selected in validation.
I hop you all are understand what I need.
please give me solution for that.
If any query then feel free ask.
<form action="#" method="post" name="studentregistration" onsubmit="return(validate());">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" value="Chess" id="hobby">Chess
<input type="checkbox" name="hobby" value="Music" id="hobby">Music<br>
<input type="checkbox" name="hobby" value="Cricket" id="hobby">Cricket
<input type="checkbox" name="hobby" value="Reading" id="hobby">Reading
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>
If you're trying to validate that at least one checkbox is checked, then this should work for you using jQuery:
$('input[type="checkbox"]:checked').length > 0
In "pure" js, you could remove the onsubmit attribute and do this instead:
document.querySelector('form[name="studentregistration"]').onsubmit = function(e) {
e.preventDefault();
var cbx = document.querySelectorAll('form[name="studentregistration"] input[name="hobby"]:checked');
if(cbx.length > 0) {
// at least one checked - do something
}
else {
// none checked
}
}
See a live demo!
Complete solution.
In order to submit the form after validation you must use:
document.getElementById("myForm").submit();
document.getElementById("submitform").addEventListener("click",submit_form);
function submit_form(e){
var ob = "";
var chess = document.getElementById("hobby1").checked;
var music = document.getElementById("hobby2").checked;
var cricket = document.getElementById("hobby3").checked;
var reading = document.getElementById("hobby4").checked;
if(chess == true){
ob += "hobby: chess selected!\n";
}
if(music == true){
ob += "hobby: music selected!\n";
}
if(cricket == true){
ob += "hobby: cricket selected!\n";
}
if(reading == true){
ob += "hobby: reading selected!\n";
}
if(ob==""){
alert("No hobbys selected");
}
else{
alert(ob);
//document.getElementById("myForm").submit();
}
//for testing purposes
e.preventDefault();
return false;
}
<form id = "myForm" action="#" method="post" name="studentregistration">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" id="hobby1">Chess
<input type="checkbox" name="hobby" id="hobby2">Music<br>
<input type="checkbox" name="hobby" id="hobby3">Cricket
<input type="checkbox" name="hobby" id="hobby4">Reading
</td>
</tr>
<tr>
<td>
<input type="button" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>
if($("#hobby").is(':checked')){
alert("checkbox checked");
}
else{
alert("Please select at least one checkbox");
}
Here is another easy answer
var test = document.getElementsByName("hobby[]");
if(test[0].checked==false && test[1].checked==false && test[2].checked==false && test[3].checked==false)
{
alert("Please Check");
return false;
}

Compare the value of selected radio button

I have below code for radio button. When particular user select the 2nd radio button(value="Selection_MQ--") then I need to check if user has selected that particular button only then show message via alert message correct answer, and if select first one(value="Selection_MA--") then wrong answer. how I can do this?
<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center"><input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
var Answer_1_data = $('input[name="Answer_1"]:checked').val();
Using Jquery
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var Answer_1_data = $('input[name="Answer_1"]:checked').val();
if(Answer_1_data){
if(Answer_1_data=="Selection_MQ--")
alert("Correct Anwser");
else
alert("Wrong Answer");
}
});
});
</script>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
<input type="button" id="btn" value="Submit">
Using Javascript
<script type="text/javascript">
function answer()
{
var ans = document.getElementsByName('Answer_1');
for (var i = 0, length = ans.length; i < length; i++) {
if (ans[i].checked) {
if((ans[i].value)=="Selection_MQ--")
alert("Correct Answer");
else
alert("Wrong ANswer");
}
}
}
</script>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MA--" /></td>
<td valign="center"><span class="answer text">No</span></td>
<td valign="center">
<input type="radio" class="question selection" name="Answer_1" id="Answer_1" value="Selection_MQ--" /></td>
<td valign="center"><span class="answer text">Yes</span></td>
<input type="button" id="btn" value="Submit" onclick="answer()">
If you have radio buttons with the same name, users can only select one, so that part is easy. All you need to do then is show the correct message depending on which one is checked. All just plain javascript.
// Object with correct answers
var answers = {
Answer_1: 'Selection_MQ--'
}
// Function to check if answers are correct
function checkAnswer(){
alert(this.value == answers[this.name]? 'Correct!' : 'Wrong :-(');
}
// Attach listeners to radio buttons
window.onload = function() {
[].forEach.call(document.querySelectorAll('input[name="Answer_1"]'), function (radio){
radio.addEventListener('click',checkAnswer, false);
});
};
<fieldset><legend>Questions</legend>
<label for="Answer_1a"><input type="radio" class="question selection" name="Answer_1" id="Answer_1a" value="Selection_MA--">No</label>
<label for="answer_1b"><input type="radio" class="question selection" name="Answer_1" id="Answer_1b" value="Selection_MQ--">Yes</label>
</fieldset>
This is a good candidate for delegation, where the radios are wrapped in a fieldset and a single listener placed on the fieldset to check answers, rather than putting a listener on every radio button.
// return true if radio button is checked otherwise false
function radioButtonIsChecked( radioButton ) {
if ( radioButton.is( ':checked' ) {
return true;
} else {
return false;
}
}
// get the radio button element value
function getRadioButtonValue( radioButton ) {
if ( radioButtonIsChecked( radioButton ) {
return radioButton.val();
} else {
return null;
}
}
// try the code
for ( var i = 0; i < $( 'input[name="Answer_1"] ').length; i++ ) {
if ( "Selection_MQ--" == getRadioButtonValue( $('#Answer_' + i ) ) {
alert( "Correct Answer" );
} else {
alert( "wrong answer" );
}
}

Submit Value from price calculator [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have an order form that should filled with identity and price calculated with javascript. But I have no idea how to submit the calculated value to php file.
This is the code :
<html>
<head><title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>
<body>
<table width="1020">
<form action="kirim.php" method="POST" >
<tr>
<td colspan="2"><h2>Form Pemesanan</h2></td>
</tr>
<tr>
<td width="80">Nama</td>
<td><input name="nama" type="text" id="nama" size="30" required="true"></td>
</tr>
<tr>
<td>Nomor HP</td>
<td><input name="nomor" type="text" id="nomor" size="30" required="true"></td>
</tr>
<tr>
<td><p>Email</p> </td>
<td><input name="email" type="text" id="email" size="30" required="true"></td>
</tr>
<tr>
<td></td>
<td><center>Nama Server</center></td><td><center>Masa Aktif</center></td><td><center>Jumlah (Rp.)</center></td><td><center>Diskon (Rp.)</center></td>
<tr>
<td>Server</td>
<td>
<input type="checkbox" name="server1" value="SSH AMERIKA (Nodes Direct)">SSH AMERIKA (Nodes Direct)
</td>
<td width="450">
<input onclick="hitung(this.value)" type="radio" id="a1" name="serverr1" value="10000">1 bulan
<input onclick="hitung(this.value)" type="radio" id="a2" name="serverr1" value="25000">3 bulan
<input onclick="hitung(this.value)" type="radio" id="a3" name="serverr1" value="50000">6 bulan
<input onclick="hitung(this.value)" type="radio" id="a4" name="serverr1" value="75000">9 bulan
<input onclick="hitung(this.value)" type="radio" id="a5" name="serverr1" value="100000">12 bulan</td>
<td width="120" id="amerika"></td>
<td width="100" id="amerika2"></td>
<tr>
</form>
</table>
<script>
var harga=0, harga2=0, harga3=0, harga4=0, hargasementara=0, hargasementara2=0, hargasementara3=0, hargasementara4=0;
//------------------------------------------------------HITUNG RADIO BUTTON 1-----------------------------------------------
function hitung(){
var hargasementara;
if (document.getElementById('a1').checked) {
hargasementara=10000;
harga=document.getElementById('a1').value;
}
else if (document.getElementById('a2').checked){
hargasementara=30000;
harga=document.getElementById('a2').value;
} else if (document.getElementById('a3').checked){
hargasementara=60000;
harga=document.getElementById('a3').value;
}
else if (document.getElementById('a4').checked){
hargasementara=90000;
harga=document.getElementById('a4').value;
}
else if (document.getElementById('a5').checked) {
hargasementara=120000;
harga=document.getElementById('a5').value;
}
else {
hargasementara=0;
}
document.getElementById("amerika").innerHTML = hargasementara;
document.getElementById("amerika2").innerHTML = hargasementara-harga;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 2-----------------------------------------------
function hitung2(){
var hargasementara2;
if (document.getElementById('i1').checked) {
hargasementara2=15000;
harga2=document.getElementById('i1').value;
}
else if (document.getElementById('i2').checked) {
hargasementara2=45000;
harga2=document.getElementById('i2').value;
} else if (document.getElementById('i3').checked) {
hargasementara2=90000;
harga2=document.getElementById('i3').value;
} else if (document.getElementById('i4').checked) {
hargasementara2=135000;
harga2=document.getElementById('i4').value;
} else if (document.getElementById('i5').checked) {
hargasementara2=180000;
harga2=document.getElementById('i5').value;
} else {
hargasementara2=0;
}
document.getElementById("indonesia").innerHTML = hargasementara2;
document.getElementById("indonesia2").innerHTML = hargasementara2-harga2;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 3-----------------------------------------------
function hitung3(){
var hargasementara3;
if (document.getElementById('s1').checked) {
hargasementara3=15000;
harga3=document.getElementById('s1').value;
}
else if (document.getElementById('s2').checked) {
hargasementara3=45000;
harga3=document.getElementById('s2').value;
} else if (document.getElementById('s3').checked) {
hargasementara3=90000;
harga3=document.getElementById('s3').value;
} else if (document.getElementById('s4').checked) {
hargasementara3=135000;
harga3=document.getElementById('s4').value;
} else if (document.getElementById('s5').checked) {
hargasementara3=180000;
harga3=document.getElementById('s5').value;
} else {
hargasementara3=0;
}
document.getElementById("singapura").innerHTML = hargasementara3;
document.getElementById("singapura2").innerHTML = hargasementara3-harga3;
akhir();
}
//------------------------------------------------------HITUNG RADIO BUTTON 4-----------------------------------------------
function hitung4(){
var hargasementara4;
if (document.getElementById('ss1').checked) {
hargasementara4=20000;
harga4=document.getElementById('ss1').value;
}
else if (document.getElementById('ss2').checked) {
hargasementara4=60000;
harga4=document.getElementById('ss2').value;
} else if (document.getElementById('ss3').checked) {
hargasementara4=120000;
harga4=document.getElementById('ss3').value;
} else if (document.getElementById('ss4').checked) {
hargasementara4=180000;
harga4=document.getElementById('ss4').value;
} else if (document.getElementById('ss5').checked) {
hargasementara4=240000;
harga4=document.getElementById('ss5').value;
} else {
hargasementara4=0;
}
document.getElementById("singapuraa").innerHTML = hargasementara4;
document.getElementById("singapuraa2").innerHTML = hargasementara4-harga4;
akhir();
}
function akhir(){
hargaakhir=harga*1+harga2*1+harga3*1+harga4*1;
document.getElementById("jumlah").innerHTML = hargaakhir;
}
</script>
<p> Jumlah Total Setelah Diskon:</p>
<p id="jumlah"></p>
</body>
So, I want hargaakhir variable (result of calculation) is submitted with the form to kirim.php
Thanks before,
as well as writing to the html element jumlah create a hidden form input
<input type="hidden" name="sum" value="">
populate it with the js and retrieve after the form was submitted with $_POST['sum']
In your "kirim.php" if you do
echo $_POST['serverr1'];
you'll get the form value since in your radio button you define the element name as "serverr1"

Stuck trying to assign JS vars to hidden fields

I've been fighting with this for a couple of days now...need some guidance please.
I have pared down a much bigger form to a "sample" size to demonstrate what I am after.
The area in question is blocked off in a very recognizable area in the calcFees function.
I also tried to get fancy and have the vars self post to the form so they could be seen, but that does not work.
UPDATE: Here is a bit more info as to what I am running into.
//At this point the var regularfee is = 26.5
// (confirmed by console.log(regularfee);)
// I want to assign it to the hidden field with the id="regularfee"
// I have tried both of the following lines:
document.getElementById('regularfee').value=regularfee.value;
// console.log(document.getElementById('regularfee.value')); shows "null"
document.getElementById('regularfee').value=regularfee;
// console.log(document.getElementById('regularfee')); shows "[object HTMLDivElement]"
What am I doing wrong?
END OF UPDATE *****************************
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="multiForm" action="post.php" method="POST" id="app" name="app">
<div id="page1" class="page" style="visibility:visible;">
Name: <input type="text" size="40" name="name1" >
<br><br>
<table border="1" cellpadding="5" width="50%">
<tbody>
<tr>
<td align="center" colspan="3"><strong>Membership Classification</strong></td>
</tr>
<tr><td width="1000">
<input name="paymethod" type="radio" class="pay" id="paypal" value="paypal" />I would like to use PayPal   
<input name="paymethod" type="radio" class="pay" id="check" value="check" />I would like to pay by check
</td>
<td style="width:150px" align="right">Fee
</td>
<td style="width:150px">
</td></tr>
<tr>
<td><input name="memberclass" type="radio" class="membership" id="regular" value="regular"/> Regular Membership</td>
<td align="right"><div id=regularfee></td>
<td><div align="right" id=regselectedfee></td>
</tr>
<tr><td colspan="2" align="right">Total </td>
<td><div align="right" id=total>
</td></tr></tbody>
</table>
<input type="hidden" name="regularfee" id="regularfee" value="">
<input type="hidden" name="regselectedfee" id="regselectedfee" value="">
<input type="hidden" name="total" id="total" value="">
</form>
<br>
<input type="button" id="C1" value="Continue" onClick="showLayer('page2')">
</td></tr>
</table>
</div>
<div id="page2" class="page">
<b>Page 2
<br><br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="submit" name="submit" value="Click to see Vars" />
</div>
</form>
</body>
</html>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
var paypalselected
var checkselected
var regularfee
var memberfee1
var total
$(function () {
function clearForm()
{
paypalselected = "0";
checkselected = "0";
regularfee = 0.0;
memberfee1 = 0.0;
total = 0.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
$("#total").text(total.toFixed(2));
// clear all radio buttons
$("#regular").prop("checked", false );
}
function calcFees()
{
total = (memberfee1);
$("#total").text(total.toFixed(2));
// **********************************************************************************
// Here is where I want to plug in the 3 JS vars to the hidden fields
// regularfee, regselectedfee, total
// Here is what I've tried:
// vars are not getting plugged in
// If possible, I would like the vars to be plugged in dynamically
// just as the form is updateddynamically when user selects buttons
document.getElementById('regularfee').value=regularfee;
document.getElementById('regselectedfee').value=regselectedfee;
document.getElementById('total').value=total;
// **********************************************************************************
}
function selectPayment()
{
$(".pay").change(function () {
clearForm();
if ($("#paypal").prop("checked")) {
regularfee = 26.50;
$("#regularfee").text(regularfee.toFixed(2));
paypalselected = "1";
checkselected = "0";
}
if ($("#check").prop("checked")) {
regularfee = 25.0;
$("#regularfee").text(regularfee.toFixed(2));
checkselected = "1";
paypalselected = "0";
}
});
}
clearForm();
selectPayment();
//start of membership button selection
$(".membership").change(function () {
if (paypalselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 26.5;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of paypalselected test
if (checkselected == "1"){
if ($("#regular").prop("checked")) {
memberfee1 = 25.0;
$("#regselectedfee").text(memberfee1.toFixed(2));
calcFees();
}
} //end of checkselected test
}); //end of $(".membership").change(function () {
});
//end of main function
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
window.scrollTo(0,0);
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
p.small
{
line-height: 5px;
}
p.smalltext12
{
font-size:12px
}
</style>
You have 2 elements #total. Only the first is given a value:
document.getElementById('total').value = total;
Same for the others.
IDs must be unique to be useful.

Check All won't work in Chrome but works in Firefox

I have a Check All box wherein when the user will tick it, all the items under it will be ticked. It works fine in Firefox but won't perform the Check All function in chrome.
This is the JS function:
function Check(chk, num)
{
if(chk.value=="Check all"){
for (i = 0; i <= num; i++){
chk[i].checked = true ;
}
chk.value="UnCheck all";
}else{
for (i = 0; i <= num; i++){
chk[i].checked = false ;
}
chk.value="Check all";
}
}
HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">
<input type="checkbox" value="Check all" onclick="Check(document.myform.Product A, 9)" id="Fujitsu" name="Fujitsu"> Select All
<input type="hidden" value="1" name="product_id[1]">
<input type="checkbox" value="Product 1" id="Product 1" name="product[1]">Product A -Product 1
<input type="hidden" value="2" name="product_id[2]">
<input type="checkbox" value="Product 2" id="Product 2" name="product[1]">Product A -Product 2
</form>
For me both Firefox and Chromium crash on "document.myform.Product A". Here is your code a little modified to work:
function Check(form, all, chk, num)
{
if(form[all].value=="Check all"){
for (i = 1; i <= num; i++){
form[chk + i].checked = true ;
}
form[all].value="UnCheck all";
}else{
for (i = 1; i <= num; i++){
form[chk + i].checked = false ;
}
form[all].value="Check all";
}
}
and HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">-
<input type="checkbox" value="Check all" onclick="Check(document.myform, 'Fujitsu', 'Product_' , 2)" id="Fujitsu" name="Fujitsu"> Select All-
<input type="hidden" value="1" name="product_id[1]">-
<input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
<input type="hidden" value="2" name="product_id[2]">-
<input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>
But you can do cleaner code to do the same thing:
function Check(form, action)
{
var l = form.getElementsByTagName("input");
for (var i = 0; i < l.length; ++i)
if (l[i].type == "checkbox") l[i].checked = action;
}
and HTML:
<form target="_blank" action="" method="post" id="myform" name="myform">-
<input type="checkbox" value="Check all" onclick="Check(document.myform, this.checked)" id="Fujitsu" name="Fujitsu"> Select All-
<input type="hidden" value="1" name="product_id[1]">-
<input type="checkbox" value="Product 1" id="Product_1" name="product[1]">Product A -Product 1-
<input type="hidden" value="2" name="product_id[2]">-
<input type="checkbox" value="Product 2" id="Product_2" name="product[1]">Product A -Product 2-
</form>
It would be even better if you used a library with CSS selectors like jQuery.

Categories

Resources