JavaScript - Checkbox Validation Help!

First of all Thank you for looking at my issues. Just so you know, I am not a coder

I have a new set of problems I'm hoping someone can help me with.
Please read all three problems listed below as they are all intertwined. Thank you for any assistance you have with these issues.

First, here is the url to my test form
http://www.rocpinions.com/test-main-form.html

Next, Here is the code I am using.

The code is set up on dog cat other and none.
The test check 1 etc are all individual check box groups

Code:

<script type="text/javascript">
function checkI()
{
var other=0;
 var checkL = document.getElementsByName('form[PetsInHouse][]');
   for (var i=0;i<checkL.length-1;i++){
     if(document.getElementById('PetsInHouse3').checked){
      document.getElementById('PetsInHouse'+i).disabled = true;
      document.getElementById('PetsInHouse'+i).checked = false;
		}
     else {
      document.getElementById('PetsInHouse'+i).disabled = false;
		}
		if(document.getElementById('PetsInHouse'+i).checked){
		other++
		}
	 }
	 document.getElementById('PetsInHouse3').disabled=other>0?true:false;
	}
</script>

And here is the call I am using

onclick="checkI();"

Problem 1
This code works fine as is is set up and does what it should. The problem is i am also using this on longer sets of check boxes and I would like to instead of disabling I would like to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 2
I am using Joomla cms and a form constructor called RS Form Pro. It stores the data submitted in the form to a data base. As it is now, all the info in the check box group is submitted to ONE column. I need to submit it to individual columns for each choice. I can accomplish this by using individual check box groups for EACH item. This will put it in separate columns in the data base but I still need to have it set up so if someone clicks dog cat and other then if they choose the check box "None" it would empty all other check boxes and check the check box "None" and visa versa if none was checked and they checked dog, it would empty the None check.

Problem 3
How it submits data to the data base
Right now, it submits the data from the check boxes by the name of the check box. What I would like to have is a 1 if it IS checked and a 0 if IS NOT checked.

Again, Thank you for any assistance

DeZiner

I am trying to use some JavaScript code that I found by searching the web, my goal is to have a form with a "required" checkbox to force my users to acknowledge they have read my "Terms and Conditions" section. The code that I found ALMOST works properly - it does pop-up the "Alert" window when the checkbox is blank and the submit button is clicked... however, if the user closes the Alert window in order to click the checkbox in compliance, the "submit.form" command is executed before they have a chance. In other words, there is no "pause" in the execution of the script to allow the user to make the correction by clicking the checkbox.

Here is the code:
Code:

<script LANGUAGE="JavaScript">
<!-- 
function ValidateForm(form){ 
ErrorText= ""; 
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; } 
if (ErrorText= "") { form.submit() }} 
-->
</script>

Here is the HTML for the checkbox:
Code:

<input name="terms" type="checkbox" value="Yes" />

Here is the HTML for the submit button that calls the function:
Code:

<input type="submit" value="Continue" onclick="ValidateForm(this.form)" />

I've searched for other examples of code to accomplish this objective, but I'm hoping for a quicker solution by coming to the experts who can see the flaw in this JavaScript.

Thanks for any help,
Rob

I have a form, on which I have multiple checkboxes and text fields.

Now I want that the form can't submit untill at least 1 checkbox is selected or a text field is filled.

But even with the javascript validation I already have the form still submits.

Any help on this one?
Here is the whole page on which the checkboxes, text fields and javascript validation a
PHP Code:
<script type="text/javascript" language="javascript">
function checkCheckBoxes() {
    if (document.form2.nbs_vmb[].checked == false)
        {
        alert ('Select at least checkbox to make a selection!');
        return false;
        }
    else
        {
        return true;
        } 
</script>
<div id="left2">
<div id="left_02">
<div id="toppage">
  <h3><?php echo $tcm_label[59]; ?></h3>
</div>
<div style="margin:0px 1px 0px 1px">
  <form id="form_ins_contact" onsubmit="return checkCheckBoxes();" name="form2" action="test.php" method="POST" >
    <table width="680" height="350" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[36]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_lid_vmb" /></td>
        <td class="td_no_border2"></td>
        <td class="td_no_border2"></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[37]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_selfburns" /></td>
        <td align="right"><strong><?php echo $tcm_label[29]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_zip" type="text" id="nbs_zip" maxlength="6" size="6" /></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[40]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_profrelatie" /></td>
        <td align="right"><strong><?php echo $tcm_label[60]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_contact_year" type="text" id="nbs_contact_year" maxlength="4" size="4" /></td>
      </tr>
      <tr>
        <td width="160" align="right"><strong><?php echo $tcm_label[42]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_revalinet" /></td>
        <td align="right"><strong><?php echo $tcm_label[38]; ?></strong></td>
        <td class="td_no_border" width="194"><input name="nbs_year" type="text" id="nbs_year" maxlength="4" size="4" /></td>
      </tr>
      <tr>
          <td align="right"><strong><?php echo $tcm_label[44]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_juridischehulp"  /></td>
        <td align="right"><strong><?php echo $tcm_label[41]; ?></strong></td>
        <td class="td_no_border" width="194"><input name="nbs_vmb[]" type="checkbox" value="nbs_psychonet" /></td>
      </tr>
      <tr>
          <td align="right"><strong><?php echo $tcm_label[45]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_nomail" /></td>
        <td align="right"><strong><?php echo $tcm_label[43]; ?></strong></td>
        <td class="td_no_border"><input name="nbs_vmb[]" type="checkbox" value="nbs_reintegranet" /></td>
      </tr>
      <tr>
        <td align="right" class="td_no_border2">&nbsp;</td>
        <td class="td_no_border2">&nbsp;</td>
        <td></td>
        <td class="td_no_border2"><img src="../images/intra icon.png" width="96" height="96" /></td>
      </tr>
    </table>
    <table width="281" border="0" align="center" cellpadding="0" cellspacing="2">
      <tr>
        <td align="center" class="td_no_border2" nowrap="nowrap">
            <input type="submit" name="submit" class="buttons" value="Export Selecties" />
        </td>
      </tr>
    </table>
  </form>
  </div>
</div>
</div>

Thanks in advanced.

I am finishing up my Form page, and totally forgot to have a numeric only field. So I added it and I can't get it to work. I also am having issues throwing an error when you don't select at least one topping.

And are these lines correct?
Code:

document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);

Code:

document.cookie = "extra=" + encodeURIComponent(extra);

Here is a link to the page hosted on my dropbox

http://dl.dropbox.com/u/49211616/dw/...orderPage.html

Javascript:
Code:

function validateOrder ()
{
	var crustSelection = document.orderForm.crust.value; 
	var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough 
	var count = 0; //Amount of Toppings Selected
	var choice = ""; //Toppings Selected list
	var x = ""; //Don't need for the Cookie
	var extra = 0; //extra charge for toppings over 3
	try{
		  
        var error = ""; // Initialize Var to store the error messages.
        

	if(document.getElementById("delivery").checked != true &&
           document.getElementById("takeout").checked != true)
	{
           error=error+"Order Type is required.\n"
                }
	if(document.getElementById("fname").value == "")  
	{
        error = error + "First Name is required.\n";
        	}
        if(document.getElementById("lname").value == "") 
	{
        error = error + "Last Name is required.\n";
        	}
        if(document.getElementById("address").value == "") 
	{
        error = error + "Street address is required.\n";
        	}
        if (isNaN(document.getElementById("quantity")))
	{
error = error + "Enter Pizza Quantity in Numbers Only.\n";
			} 
	    if(document.getElementById("crust").value == "") 
	{
        error = error + "Crust Type is required.\n";
        	} 
		if(document.getElementsByName("toppings").value == 0) 
	{
        error = error + "Select at Least One Topping.\n";
        	} 

	if(error == "") 
	{
        // save all the information in the cookie
document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value);
document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value);
document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value);
document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout");
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value);
document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);      
alert("Order successfully Placed!");
		}
		else 
		{
             alert(error);
        }
    }
	catch(ex) 
	{
        alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message);
    }
	
for (var i=1; i<11; i++) 
{
x = document.orderForm['toppings' + i].value;
if (document.orderForm['toppings' + i].checked) 
{
choice = choice + "  " +  x ;
count ++;   
} 
}  
if (choice.length <= 0) 
{
choice = choice + "NONE";
}
if (count > 3)
{
	extra = (count - 3) * 1 
}
document.cookie = "extra=" + encodeURIComponent(extra);  
}
</script>

HTML:
Code:

<form name = "orderForm" onsubmit="validateOrder()">
<table width="600" border="0">
  <tr>
    <th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30>
<br />
<br />
<b>Last Name</b><br />
<input type="text" id="lname" name="lname" size=30>
<br />
<br />
<b>Street Address</b><br />
<input type="text" id="address" name="address" size=30>
<br />
<br />
<input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font>
<input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th>
    <th scope="col" width="200" align="Left">
    How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5>
    <br />
    <br />
    <select name="crust" id="crust">
  <option selected value="false">Select Crust Type</option>
  <option value="regular">Regular Crust</option>
<option value="thin">Thin Crust</option>
  <option value="deep">Deep Dish</option>
  <option value="Parmesagn">Parmesagn Cheese</option>
  <option value="sourdough">Sourdough</option>
</select>
<br />
<br />
Select at Least One Topping:
<br />
<br />
<input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br>
<input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br>
<input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br>
<input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br>
<input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br>
<input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br>
<input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br>
<input name = "toppings8" type = "checkbox" value = "onion"> Onion<br>
<input name = "toppings9" type = "checkbox" value = "olive"> Olive<br>
<input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th>
  </tr>
</table>
<input name="submit" type="submit" value="submit" /><input name="" type="reset" />
</form>

So here's what i want to do:

i have 2 checkboxes,

when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B

how can i do that?

thanks a lot !

Hi,

If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript.

Thanks,
Cs1h

Hello all, new here Seems like a very nice place to be apart of.

I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it.

The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem.

I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs.

<problem>
I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location.
<problem>

I would like to keep the JS close to how it is now as I have a library to use this JS over and over again.

Any pointers in the right direction or solutions to my problem would be greatly appreciated.

Thanks! Hopefully it is not to hard huh

If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again!

Hi,

I have a checkbox and when I "check" I want to add a <p> inside of an <div> and when I "uncheck" I want to remove the <p> from <div>.

I've tried this but it's not working

Code:

$('#checkbox').change(function(){
        $('div').html('<p>Some Text</p>');
}, function() {
        $('div').remove('<p>Some Text</p>');
});

I hope you can help..

Regards

Looking for a simple method to Toggle textbox yes/no using CheckBox

This example does not work!
But I hope this will help explain what I am trying to do

Code:

<SCRIPT LANGUAGE="JavaScript">
function YesOrNo() {
  if(document.formname.checkboxname.checked)
  {
  document.formname.textname.disabled='Yes';
  }
  else
  {
  document.formname.textname.disabled='No';
}}
</SCRIPT>

<form name="formname">
   <input type="text" size="10" name="textname">
   <input type="checkbox" onclick="YesOrNo()" name="checkboxname" value="Yes">
</form>

I am making a google CSE for a client site and I need to concatenate checkbox values together on the end of another form value.

So I have a text box and the checkboxes:
Code:

<input name="q" cid="q" size="25" maxlength="50" value"off road tires">
<input type="checkbox" name="q" id="q" value="cooper|hankook" />
<input type="checkbox" name="q" id="q" value="Mickey Thompson|Bfgoodrich|GBC" />
<input type="checkbox" name="q" id="q" value="Hoosier|Nitto" />

For Google the URL string needs to be like this:
Code:

results.html?q=off road tires AND inurl:cooper|hankook|Mickey Thompson|Bfgoodrich|GBC

this string says the person did not check the last box.

I am having a hard time trying to do this. If you guys know a better way to accomplish the same thing I am all ears but I thought I would bring it to the experts and see what they had to say. Thanks for the help!

I was trying to get total amount from these all checkbox, when I submit, but I don't know somewhere wrong. Please help me out. Here is my code:


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Form </title>

<script language = "JavaScript">


// The event handler functions for the check boxes

function appleHandler() {
var number = document.orderForm.apples.value;
total = total + number * 0.59;
}

function orangeHandler() {
var number = document.orderForm.oranges.value;
total = total + number * 0.49;
}

function bananaHandler() {
var number = document.orderForm.bananas.value;
total = total + number * 0.39;
}


// The event handler function to produce the total cost message
// when "submit" is clicked

function finish() {
total = total * 1.05;
alert("Thank you for your order \n" +
"Your total cost is: $" + total + "\n");
}

</script>
</head>

<body>
<h3> Order Form </h3>

<form name = "orderForm" onSubmit = "finish()">
<p>
<input type = "checkbox" name = "apples" size = "3"
onClick = "appleHandler()" />
Apples
</p><p>
<input type = "checkbox" name = "oranges" size = "3"
onClick = "orangeHandler()" />
Oranges
</p><p>
<input type = "checkbox" name = "bananas" size = "3"
onClick = "bananaHandler()" />
Bananas
</p><p>
<input type = "reset" name = "reset" />
<input type = "submit" name = "submit" />
</p>
</form>

</body>
</html>

Firebug returns an error saying msg.elements is undefined. I'm trying to make a function that will enabled a delete button if any of the check boxes in a list are checked.

Code:

function selectone () {
	var msg = document.getElementsByName('pm');
	var i = 0;
	
	for(i; i < msg.elements.length; i++)
	{
		if(msg.elements[i].checked == true)
		{
			document.getElementById('multiple_action').disabled = false;
			document.getElementById('drop_button').setAttribute("class", "drop_button");
		}
		else
		{
			document.getElementById('multiple_action').disabled = true;
			document.getElementById('drop_button').setAttribute("class", "drop_button disabled");
		}
	}
}

I am trying to make a checkbox on the screen so that when I check or uncheck it a word will print on the screen. Unfortunately it is not working. The checkbox shows up but nothing happens when I check/uncheck it.
Also, even though that part of the code isn't working everything that comes after it that is suppose to print onto the screen is also not printing. I am assuming it is because there is an error and cannot reach that part of the code. I am used to programming in Java and using eclipse which has a debugger in it and was wondering if there is a nice editor/debugger like eclipse I can use for JavaScript.

Thanks.

Code:

<html>
<title>Welcome :D</title>
<head>
    <style type="text/css">
	body {
		background-color:F0F0F0;	
	}
    </style>
</head>
<body>
 CheckBox1 <input type="checkbox" id="tandc" onClick="validate()" />

<script type="text/javascript">

    fuction validate(){
    	if(cb1.onClick){
	   document.write("Print something");
	   }else{
	   document.write("Now print something?");
	   }
	}
	



    document.write("</br></br></br></br>");
    document.write("Hello, thank you for visiting my webpage I hope you like it.");
</script>

</body>

</html>

All,
I have the following checkbox code:
PHP Code:
echo "<input name=\"picbigid[]\" type=\"checkbox\" value=\"$pic[src_big]\">"; 


I then want to select all the checkboxes so I have this code:
[PHP]
echo "<input type=\"button\" name=\"CheckAll\" value=\"Check All\" onClick=\"checkAll(document.photos.picbigid)\">&nbsp;&nbsp;<input type=\"button\" name=\"UnCheckAll\" value=\"Uncheck All\" onClick=\"uncheckAll(document.photos.picbigid)\">";
[PHP]

My JS function is:
Code:

function checkAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = true ;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
	field[i].checked = false ;
}

If I do it like this:
PHP Code:
echo "<input name=\"picbigid\" type=\"checkbox\" value=\"$pic[src_big]\">"; 


It works but I can't have it like that because the form posts to another PHP page that needs the input name as an array.

Any ideas?

Thanks!

I am using a checkbox to turn on and off some labels on a line on a google map, which is working fine if the line is already drawn, using this function:
Code:

function distboxclick(labelsbox) {
        if (labelsbox.checked) {
          for (var i=0; i<distmarkers.length; i++) {
          if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.show();
        	}
        } else {
          for (var i=0; i<distmarkers.length; i++) {
          if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.hide();
       	 }
        }
	}

but the thing is that I want the labels to be turned off to begin with and switched on if the box is checked.

Which is also fine, using this snippet:
Code:

if (prevMarker){
var dist = getSegmentDistance(prevMarker.mMarker, distmarker);
var label = new ELabel(point, dist, "labelstyle", new GSize(10,-15));
distmarkers[numMarkers-1].mLabel = label;
distlabels.push(label);
map.addOverlay(label);
label.hide(); 
drawOverlay();
	}

but what I am trying to do now is make sure that if the box is checked before the line starts to be drawn then the labels will come up straight away.

So I figured all I had to do was add in the following to the above:
Code:

if (labelsbox.checked){
label.show(); }
else {
label.hide(); }

and pass the labelsbox variable to the function where that is all happening.

But instead I get a "labelsbox is undefined" error... If I take that if statement out I see that labelsbox is defined, but that doesn't really help. I guess I'm putting things in the wrong order or something, but I'm kind of baffled. You can see my test page here. Thanks in advance for any suggestions.