|
JavaScript - Form Validation Numeric Field And Select At Least One Checkbox
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>
Similar TutorialsHi guys, This has been asked before, and i've seen many of the previous posts. And tried for hours. But finally i've broken and have to ask for help. What am I doing wrong here? Can someone please explain? Code: var u=document.forms["lead"]["name"].value;
var v=document.forms["lead"]["city"].value;
var x=document.forms["lead"]["country"].value;
var y=document.forms["lead"]["mobile"].value;
var z=document.forms["lead"]["email"].value;
if (u==null || u=="")
{
alert("Please enter your first name.");
return false;
}
if (v==null || v=="")
{
alert("Please enter your city.");
return false;
}
if (isNaN(lead.y.value))
{
alert("bloody work!");
return false;
}
if (x=="Argentina" && y.length < 11)
{
alert("Please enter a valid Argentinian phone number.");
return false;
}
Thanks in advance. Hey all. I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field. Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously. How can I add a checkbox validation to this? Thats it. Any help is appreciated. Code: <script type="text/javascript">
var textFields = ["digsig"];
function validateForm( )
{
var oops = ""; // must initialize this!
var form = document.sig;
for ( var t = 0; t < textFields.length; ++t )
{
var field = form[textFields[t]];
var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
if ( value.length < 1 )
{
oops += "You MUST enter your Digital Signature";
}
}
if ( oops != "" )
{
alert("ERROR:" + oops);
return false;
}
}
}
</script>
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"> </td> <td class="td_no_border2"> </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 I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
I am Gururaj. I have written a form in HTML which contains username,lastname,email,password and submit. I have written a javascript to validate this form [validate(username,lastname,email,password)]. On submit this javascript function will be called and hence form get validated. I am passing all the arguements(username,lastname,email and password) to the javascript function.. Is it possible to make me a code such that it should call an individual function for each field in the form.for ex:if i have not entered username, last name in the form and attempt to submit, only username arguement should be passed to the function as it comes first in the form. In other sense i want to validate individual text field validation of my form. So can anybody help me.It will be very needful to me. I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script>
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd;
}
function checkForm() {
var chosen = getRBtnName('Consent');
if (chosen < 0) {
alert( "Please choose one answer when you are asked to select a number." );
return false;
} else { return true; }
}
</script>
<form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()">
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td colspan="3">I consent to providing my electronic signature.</p></td>
</tr>
<tr>
<td colspan="3" valign="top">
<input type="radio" name="Consent" value="Y" />
Yes
<input type="radio" name="Consent" value="N" />
No
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td>I consent to electronic receipt of my information reporting documentation.</td>
</tr>
<tr>
<td valign="top">
<input type="radio" name="Consent1099YesNo" value="Y" />
Yes
<input type="radio" name="Consent1099YesNo" value="N" />
No</td>
</tr>
<tr>
<td valign="top">
For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation?
<input type="radio" name="USPersonYesNo" value="Y" />
Yes
<input type="radio" name="USPersonYesNo" value="N" />
No</tr>
</table>
<input type="submit" value="submit" value="Submit" />
</form>
Any help would be greatly appreciated. Hey guys, I am having a bit of an issue here. I have a form which has 3 checkboxes in it: (sorry, ignore the asp) Code: <input name="certs" id="certs" type="checkbox" <% If certs="on" Then Response.Write("checked=""checked""") %> />
<input name="nocerts" id="nocerts" type="checkbox" <% If nocerts="on" Then Response.Write("checked=""checked""") %> />
<input name="certsna" id="certsna" type="checkbox" <% If certsna="on" Then Response.Write("checked=""checked""") %> />
Anyways, I want to enforce the following: - Only one checkbox can be checked from these 3, no more - At least one checkbox must be checked before submission I have found a couple small scripts to validate that at least one is pressed, but I do not know how to make sure no more than one is pressed, and how to combine scripts is beyond me. Can anyone offer any assistance? Is this difficult to do? Hi All I am not a genius when it comes to javascript so if anyone could help, I would really be grateful. scenario: I am creating a custom product (75g) which will be made up of 3 others products (25g + 25g + 25g). The 3 options will be made up of a combination of smaller products each with their own options (25g, 50g, 75g) which will allow the customer to have one of each or fill up all 3 with just one type. Here is what I have in code already: Code: <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Sour Worms</h4> <div class="back"> <input name="id[14][48]" value="48" id="attrib-14-48" type="checkbox"><label class="attribsCheckbox" for="attrib-14-48">25g</label><br> <input name="id[14][49]" value="49" id="attrib-14-49" type="checkbox"><label class="attribsCheckbox" for="attrib-14-49">50g</label><br> <input name="id[14][50]" value="50" id="attrib-14-50" type="checkbox"><label class="attribsCheckbox" for="attrib-14-50">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Sugar Bears</h4> <div class="back"> <input name="id[15][51]" value="51" id="attrib-15-51" type="checkbox"><label class="attribsCheckbox" for="attrib-15-51">25g</label><br> <input name="id[15][52]" value="52" id="attrib-15-52" type="checkbox"><label class="attribsCheckbox" for="attrib-15-52">50g</label><br> <input name="id[15][53]" value="53" id="attrib-15-53" type="checkbox"><label class="attribsCheckbox" for="attrib-15-53">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Fruit Cocktail</h4> <div class="back"> <input name="id[16][54]" value="54" id="attrib-16-54" type="checkbox"><label class="attribsCheckbox" for="attrib-16-54">25g</label><br> <input name="id[16][55]" value="55" id="attrib-16-55" type="checkbox"><label class="attribsCheckbox" for="attrib-16-55">50g</label><br> <input name="id[16][59]" value="59" id="attrib-16-59" type="checkbox"><label class="attribsCheckbox" for="attrib-16-59">75g</label><br> </div> <br class="clearBoth"> </div> <br class="clearBoth"> <div class="wrapperAttribsOptions"> <h4 class="optionName back">Organic Jelly Bears</h4> <div class="back"> <input name="id[17][57]" value="57" id="attrib-17-57" type="checkbox"><label class="attribsCheckbox" for="attrib-17-57">25g</label><br> <input name="id[17][58]" value="58" id="attrib-17-58" type="checkbox"><label class="attribsCheckbox" for="attrib-17-58">50g</label><br> <input name="id[17][60]" value="60" id="attrib-17-60" type="checkbox"><label class="attribsCheckbox" for="attrib-17-60">75g</label><br> </div> <br class="clearBoth"> </div> What I need to do is to some how ensure that the product is filled with 75g worth of the other products. Another option may to not use the 'grams' but rather use the 3 compartments that will be filled so 25g = 1, 50g = 2, 75g = 3 etc. Note: Name, Values, Ids are made dynamically by the cart, and I cannot change those as they are used for adding to cart and updating account info etc. PLEASE PLEASE PLEASE if anyone can help, I would really appreciate it. ----------------------------- Jay Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help. Example: <input type="checkbox" name="box1" id="box1" value="4th July 2009,"> <input type="hidden" name="price1" id="price1" value="0"> So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699. There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked. So for the next checkbox and hidden field i use box2 and price2. Thanks for your help. I have a simple html form with 2 text fields and submit button 1 user name 2 pwd/token and 1 checkbox 'First time user' if 'first time user' is selected then the 'Submit' button to be enabled only if the customer puts exactly 6 digits on pwd/token. if it's unchecked then the submit button to be enabled only if the customer enters 10 digits(pin_token code) please send me code will be very thankful for your 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 Hello, After pulling out all my hairs, I am seeking some help with a JS validation script which would be for a case where we have multiple radio buttons which required a response from user and as a additional case if certain radio option is selected user should select one or more options listed as check boxes under that specific radio button. I have attached an image showing sample scenario with this post. If someone has an Idea how to to do please sail me thru. I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic <input type="checkbox" name="facebook" value="1" /> if($_POST['facebook'] == 1) echo "<input type='text' name='facebook_url' />"; Could someone tell me how I should do this. Thanks. Here is my validation script from dreamweaver i also have it in php for server side. But I trying to get a checkbox to make a text field required when you select it. Right now I have it so when you hit submit whether the text field is filled out or whether the checkbox is selected or not the error message comes up no matter what i do please help. the link to the page is http://www.mark-10.com/inquiries2 Code: function validateCheckbox() {
if(document.forms["form1"].sales.checked) {
if(document.forms["form1"].telephone.value.length < 12) { // xxx-xxx-xxxx
return false ;
}
else {
return true;
}
}
}
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
}
if(!validateCheckbox()) {
errors+="If checkbox checked, please include telephone number";
}
if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
Hi, I'm trying to build up a multi-select filter with checkboxes. I found few good scripts but I've got a problem to adapt them.. The script below can filter results based on criteria (that you can select via checkboxes). The results displayed are checked or unchecked boxes. What I want is : display results with div (for ex:<div>result1</div>) and not checkbox. How can I do that? Code: <script type="text/javascript" src="js/jquery.js.css"></script>
<script type="text/javascript">
$(function() {
$('#search input:checkbox').click(function() {
var classes = $('#search input:checkbox:checked').
map(function() { return $(this).val(); }).get().join('.');
classes = (classes ? '.' : '') + classes;
$('#results input:checkbox').attr('checked', false).
filter(classes).attr('checked', true);
});
});
</script>
</head>
<body>
<div id="search">
<fieldset>
<label><input type="checkbox" value="animal"> Animal</label>
<label><input type="checkbox" value="vegetable"> Vegetable</label>
</fieldset>
<fieldset>
<label><input type="checkbox" value="small"> Small</label>
<label><input type="checkbox" value="large"> Large</label>
</fieldset>
</div>
<div id="results">
<p><input type="checkbox" class="small animal"> Cat</p>
<p><input type="checkbox" class="medium animal"> Tiger</p>
<p><input type="checkbox" class="large animal"> Elephant</p>
<p><input type="checkbox" class="small vegetable"> Pea</p>
<p><input type="checkbox" class="large vegetable"> Pumpkin</p>
</div>
</ul>
</body>
</html>
Thanks for your help Hi all, I have a script that checks and unchecks all boxes depending on the current state of the box. I have used it on one page and it works perfectly fine... copied it over to a new page where I wanted to reuse and can't get it to work. Code: <script type="text/javascript">
function check_all(form, input_name, self){
if(!input_name){
return;
}
var input = form.getElementsByTagName('input');
for(var i = 0; i < input.length; i++){
if(input[i].name.indexOf(input_name)!=-1){
input[i].checked = self.checked;
}
}
}
</script>
Code: <input type="checkbox" name="notimportant" onclick="check_all(document.form1, 'check', this)" value="test" /><b>All</b> Code: <input type="checkbox" name="check_list[]" value="<?php echo $row2['email'];?>"> Code: <form name="form1" action="emailspecificcandidates.php" method="post"> As I say this script works perfectly on another page, and as far as i can see i have copied everything over correctly. Can anyone spot anything wrong? Many thanks, Greens85 EDIT: I think this may be broken because of the way I presenting it with php on my page... i copied a seperate entity of the script onto the page and it worked first time. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<script type="text/javascript">
var strWord = document.myForm.txtWord.value;
function validateWord()
{
while(strWord == document.formname.myForm.value.length > 8 && var ichars = "PJ" );
{
alert ("OK.");
}
}
</SCRIPT>
<form name="myForm" action="" method="" onsubmit="return false">
<p>
<input name="txtWord" size="25" value="Enter Word Here">
</p>
<p>
<input type="button" value="Validate The Word" name="cmdValidateWord" onclick ="validateWord()">
</p>
</html>
Hi, I'm having trouble getting this code to work. It needs to check if the user has entered the correct characters into a field. A valid word should have a P at the start, and contain a J somewhere in it. If the word is valid, a box pops up saying "OK" once the user has clicked the ValidateWord button. It also needs to keep this kind of structure (ie. a while construct & validated through pressing a button). This is purely for personal education about performance of "while" constructs for field validation. Any help is hugely appreciated. |
|||||||