JavaScript - Checkbox That Needs To Be Ticked Before The Form Is Submitted

How come this doesn't work? I take it because 'unchecked' is not valid?

Code:

if (document.forms["form"]["targetname"].value == "" && document.forms["form"]["unknownname"] == "unchecked")

confused.

my validation of the clicking on a checkbox doesn't seem to send the value with the form. Should I be adding value='whatever' in the xhtml?



Code:

<form method="post" id='myForm' name='myForm' onsubmit="return checkform(this)" action="/cgi-bin/script/520/9/98">
  <script type='text/javascript'>
//<![CDATA[

      function checkform(form) {
      //validate the terms checkbox
if (!document.myForm.acceptance.checked) { // ! means "not" 
    document.getElementById("trmserr").innerHTML = "You must accept the terms and conditions";
    document.getElementById("myForm").acceptance.value = ""; // clear the field
    setTimeout("document.getElementById('myForm').acceptance.focus()", 25); // refocus on it
    return false;
} else {
    document.getElementById("trmserr").innerHTML = "";
}
				
return true; 
}

		  <span id="trmserr" class='formErrorWarning'></span>
          <p>
            <a class='tooltip' href='#'>
<span class='compulsory'>*</span>
<span class='the_tip'>This is required because, by proceeding, you are accepting these terms and conditions for this purchase. They will be emailed to you along with your order confirmation.</span></a>  <input type="checkbox" id='acceptance' name="acceptance" /> I have read and I accept the terms and conditions.</p>

It works if JS is disabled and it works only sometimes when it is enabled.

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 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

Guys,

For some reason my script only works when I have at lease two checkboxes.

To simulate the problem just run it once with two html input checkbox elements
-> check one checkbox and press submit -> it works
-> Now remove one input checkbox field and check the remaining checkbox & submit -> Bamm doesn't work...

What am I doing wrong ?

Code:

<html> 
<head> 
            <script> 
            function Check(chk) 
            { 
            for (i=0; i < chk.length; i++) chk[i].checked=document.ListActionForm.Check_ctr.checked ; 
            } 
        function desubmit() 
            { 
            if(get_args()==false) {alert("nothing_selected");return false;} 
            if(labelling(true)) return false; 
            } 
            function labelling(s) {return true;} 
        function get_args() 
            { 
            s=chkboxa2str(document.ListActionForm['listaction[]']); 
            if(s)alert(s); 
            if(s.length<8)return false; 
            else return s; 
            } 
            function chkboxa2str(chkbox_a) {  
            var list = "";  
                for(var i = 0; i < chkbox_a.length; i++){ if(chkbox_a[i].checked) { list += chkbox_a[i].value + " "; } } 
            return list;  
            } 
            </script> 
</head> 
<body> 
<form action="?h=1296078874" method="post" name="ListActionForm" onsubmit="return desubmit()"> 
<input type='checkbox' name='listaction[]' value='2010102909103530'> Testbox 1<br> 
<input type='checkbox' name='listaction[]' value='2010102909103532'> Testbox 2<br> 
<input type="Submit" name="Submit" value="Versturen" > 
</form> 
</body> 
</html>

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>

Hey all, I'm trying to get the two followup questions underneath the checkbox to show up only if someone places a check there, but for some reason the way I've got it set up now it's simply hiding the area I want to show up altogether, and the checkbox has no effect on it.

Rather than waste tons of space pasting it here, here's the pastebin:

http://pastebin.ca/1822165
alternatively here is the live version:

http://soniajacobwedding.com/site/rsvptest.html

I'd prefer to have the form collapse when the additional questions are hidden, though if i can get this working at all I'd be pretty happy.

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 !

Hello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank.

I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code.
Code:

<script type="text/javascript"> 
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
	formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	//document.writeln(formArray[i] + "<br />");
	var sDataName = formArray[i].split("=")
	
switch (sDataName[0]) {

case ".lib_use":
     for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
     if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
     document.getElementsByName(".lib_use").item(j).checked = true;
     //alert("lib_use set");
              }
 }
 break;
case ".lib_comp":
     if (sDataName[1] == 1) {
     document.getElementsByName(".lib_comp").checked = true;
     document.getElementsByName(".lib_comp").value= 1;
   } 
   else {
    document.getElementsByName(".lib_comp").checked = false; 
   document.getElementsByName(".lib_comp").value= 0;
 }			 
 break;	
default:
      alert("not caught = " + sDataName[0]);
       continue;
		
	}
}
}
/* ]]> */
</script>

<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />

The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes.

Thanks for looking at this, and giving any suggestions you might have!

What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


Code:

<div id="navBar">
	<ul>
    	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
    	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
    	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
    	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
    	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
	</ul>	

</div><!--end navBar -->


<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
</form>

Code:

<script>

var links = new Array("home", "portfolio", "stuff", "about me", "contact");

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
		var linkPosition = "link"+i;
	links[i] = name.linkPosition.value;
		changeLink(i);
	}
	
}

function changeLink(number) {

document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
}
</script>

ANY HELP WOULD BE AWESOME!!!

I just replaced the functions to look like this...

Code:

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
	links[i] = name.linker+i.value;
		changeLink(i);
	}
	
}

function changeLink(linkNumber) {

document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
}

Now the links are updating but I get NaN for each link.

I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript?

Thanks,

Marcelo
Brazil

I'm using submodal-1.6 for popup.

When the popup closes I wanted parent page to refresh.I've tried the following
window.opener.location.load();
window.opener.location.load(true);
location.load();
window.parent.location.reload();

All works for IE, but when coming to mozilla ,firefox the refresh is a step delayed, i.e when I open my popup to add an itme to my cart on parent page ,for the first time it does not show anything , but when I try to add another item , the first one shows.

Any advice would be really great.

hello there
im unsure if this is the correct place to post this so if its not im sorry

what im trying to do is make a javascript pop-up message in real time alerting members who are online at that time to a game submitted
i help run a fifa10 online league site and we are venturing into the 2v2 part of the site.

now when a player goes to the 2v2 page they are presented with a submit button to submit a 2v2 game to the system. then this already shows up on the pagebut what we are after is a little pop up box which after the game button is pressed to submit the game the pop-up shows to the whole site that a 2v2 game has been submitted for playing.

we want this so you dont have to sit on the 2v2 page to wait for a submitted game.

does anybody have any ideas on how we would go about this??
thanks for your time and i hope some1 can help - even if its just in the slightest

Hello everyone! I hope you can help me. I am writing a submit form that has to have an indication if a form is missing information upon hitting the submit button. I have followed along the steps with my text and I can't seem to figure out what I am doing wrong. Can anyone help me?

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/htm14/loose.dtd">


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

<head>



<title>Kudler Fine Foods Contact Page</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">



<!---Kami Demnyan

21 December 2009-->



<script type="text/javascript">

/*<![CDATA[*/

<!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters-->

function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert ("Please enter a numerical value");
return false;
}
}

<!--This code ensures that all of the fields contain text, its not functioning, I'm using page 263 in the text as my

guide-->

function submitForm() {
if (document.forms[0].name.value == ""
|| document.forms[0].address.value == ""
|| document.forms[0].city.value == ""
|| document.forms[0].state.value == ""
|| document.forms[0].zip.value == ""
|| document.forms[0].phone.value == ""
|| document.forms[0].email.value == "") {
window.alert("Please enter your missing information");
return false;
}
else
return true;
}


/*]]>*/

</script>

</head>


<body>


<h1> KUDLER FINE FOODS </h1>

<h2> JOIN OUR MAILING LIST</h2>

<!--This is where the user will input all of their information to join the mailing list-->

<form action="completeform.html" method="get" onsubmit="return onSubnit();"

enctype="application/x-www-form-urlencoded">


<p>Name<br />

<input type="text" name="name" size="50" /></p>



<p>Address<br />

<input type="text" name="address" size="50" /></p>



<p>City, State, Zip <br />

<input type="text" name="city" size="30" />

<input type="text" name="state" size="3" />

<input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p>



<p>Telephone<br />

<input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p>



<p>Email Address<br />

<input type="text" name="email" size="50" /></p>

<!--This is where the submit and reset buttons are located-->


<p><input type="submit" value="Submit Form" />
<p><input type="reset" value="Reset Form" />


</form>

</body>

</html>

ALSO: My instructor does not want me to use the onchange tag, is there a suitable replacement for that?

Any help would be greatly appreciated, thank you.

Kami

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