I'm trying to use this link as my resource: http://www.w3schools.com/js/js_form_validation.asp
I understand how it works for textboxes, but how do you make it detect form validation for checkboxes? For example, if I have a page lined with checkboxes (all with the same "name" value), I want to make sure that at least one of the boxes is checked... How do I do this? I'm a little confused about what post request is sent if a checkbox is not checked, and how javascript should catch it. Thank you.
Edit----
Got it to work, here's some code for future people:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Validate(){
if(!validateForm()){
alert("Something happened");
return false;
}
return true
}
function validateForm()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i<c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
return false;
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return Validate()" method="post">
Value: <input type="checkbox" name="fname" value="value">
Value2: <input type="checkbox" name="fname" value="value2">
...<more boxes here>
<input type="submit" value="Submit">
</form>
</body>
</html>
Here is an example that does what you are asking and can be tested within this page:
function Validate(){
if(!validateForm()){
alert("You must check atleast one of the checkboxes");
return false;
}
return true
}
function validateForm()
{
var c=document.getElementsByTagName('input');
for (var i = 0; i<c.length; i++){
if (c[i].type=='checkbox')
{
if (c[i].checked){return true}
}
}
return false;
}
<form name="myForm" action="demo_form.asp" onsubmit="return Validate()" method="post">
Option 1: <input type="checkbox" name="option1" value="1"><br />
Option 2: <input type="checkbox" name="option2" value="2"><br />
<input type="submit" value="Submit Form">
</form>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
<form name="feedback" action="#" method=post>
Your Gender: <input type="checkbox" name="gender" value="Male"> Male
<input type="checkbox" name="gender" value="Female"> Female
<input type="reset" value="Reset">
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
</form>
Related
When radio button value is 1 or 2 or 3, I would like to run validation for first and last name.
<form action="index.php" method="post" name="index">
<input type="radio" name="hello" value="abc">
<input type="radio" name="hello" value="def">
<input type="radio" name="hello" value="ghi">
<input type="radio" name="hello" value="jkl">
<input type="radio" name="hello" value="mno">
<input type="text" id="first-name" name="first-name">
<input type="text" id="last-name" name="last-name">
</form>
<script>
if ( $('input:radio[name=hello]:checked').val() == "abc" || $('input:radio[name=hello]:checked').val() == "def" || $('input:radio[name=hello]:checked').val() == "ghi" )
{
if( ($('input[name=first-name]').val().length<1 ))
{
$('#first-name').focus();
return false;
}
if( ($('input[name=last-name]').val().length<1 ))
{
$('#last-name').focus();
return false;
}
}
</script>
I wrote something like this but it doesn't work.
Even I choose value for "mno", the first-name validation work.
Also this function won't validate the last-name.
any idea what i did wrong?
You are using javascript for validation but you should use this javascript in a function and call that function from your form, until it will not work because you are not calling this javascript that mean it is not working.
Here is the simple code for validation by which you can see how to validate a form. hope this code will help you.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
Hey guys i am having some problems with javascript, and i was wondering whether you could help me out?
This is my HTML code
<div class="Answer1">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result2();">
</form>
</div>
and this is my javascript
function result() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
function result2() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer2.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
If I comment out one of these it works perfectly fine but if its not commented it doesnt work :( I dont understand what ive done wrong :(
You have two form with the same value for name attribute and two input with the same value for name.
js
function result()
{
var score =document.getElementsByName('answer1')[0].value;
if(score == 8)
{
document.getElementsByName('form1')[0].action = "http://www.wordpress.com";
document.getElementsByName('form1')[0].submit();
}
else
{
document.getElementsByName('form1')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
function result2()
{
var score = document.getElementsByName('answer2')[0].value;
if(score == 8)
{
document.getElementsByName('form2')[0].action = "http://www.wordpress.com";
document.getElementsByName('form2')[0].submit();
}
else
{
document.getElementsByName('form2')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
html
<div>
<form name="form1">
Enter your answer here :
<input type="text" size="10" name="answer1" value="">
<input type="button" value="Check" onclick=" result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" name="answer2" value="">
<input type="button" value="Check" onclick=" result2();">
</form>
</div>
To have same id for several elements put javascript in 'gridlock'. Identify your element with an unique id name is usually faster and easier for DOM / Javascript / jQuery to find the node/element faster.
This format is appropriate method if all of elements are in the same page.
<form name="form1">
Enter your answer here :
<input type="text" size="10" id="answer1" name="answer1" value="">
<input type="button" value="Check" onclick="result1();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" id="answer2" name="answer2" value="">
<input type="button" value="Check" onclick="result2();">
</form>
I have a page that has 6 forms that all have a value with the same name 'audit_id_upload'. Currently I have one of them being validated (I'm just looking for empty values) with...
function validateForm()
{
var x=document.forms["audit_upload"]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
}
</script>
Can I adapt this to validate the other forms as well without having to repeat it 5 more times?
Thanks
Since you have a input element with audit_id_upload in every form, you could pass the name of your form to this function and use it to validate the item.
function validateForm(fName)
{
var x=document.forms[fName]["audit_id_upload"].value;
if (x==null || x=="")
{
alert("Please Select an Audit");
return false;
}
return true;
}
and call it on the for onSubmit event.
<form name='f1' onsubmit="return validateForm('f1')">
</form>
<form name='f2' onsubmit="return validateForm('f2')">
</form>
<form name='f3' onsubmit="return validateForm('f3')">
</form>
Try this:
<html>
<script type="text/javascript">
function test(theform)
{
if (theform.thefield.value == "foo") return true;
else return false;
}
</script>
<body>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
<form action="" onsubmit="return test(this);">
<input type="text" value="" name="thefield" />
<input type="submit" />
</form>
</body>
</html>
I am sure this is any easy question, but I can't figure out what I am doing wrong.
What I am trying to accomplish is when the checkbox is "checked" I want it to enable the textbox.
Here is my code.
<html>
<title> iSCSI Admin v0.1 </title>
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="textname" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
</body>
</html>
Try this:
<input id="textname" type="text" />
function enabledisable() {
if (document.getElementById("Checkbox1").checked) {
document.form1.textname.disabled = false;
}
else {
document.form1.textname.disabled = true;
}
}
Ok you fixed the question. You need to put the checkbox in the form.
Try this:
<body>
<script type="text/javascript">
function enabledisable() {
if (document.form1.checkbox1.checked) {
document.form1.textname.disabled=false;
} else {
document.form1.textname.disabled=true;
}
}
</script>
<form name="form1">
<fieldset style="width:640px;">
<legend>Enable textbox <input type="checkbox" name="checkbox1" onclick="enabledisable()"></legend>
Text:
<input type="text" name="textname" disabled="true" >
</fieldset>
</form>
</body>
document.form1.textname.disabled='disabled';
document.form1.textname.disabled='';
http://jsfiddle.net/nqaJZ/
Note: I added -> id="checkbox1" to your checkbox field.
Note: I changed the if condition as well -> document.getElementById("checkbox1").checked
Note: I changed your code which enables / disables textfield as well -> document.form1.text.disabled=false;
notice I changed it from targetname (which was not there) to your textfield name which you had was "text.
Hope it helps.
iSCSI Admin v0.1
<body>
<fieldset style="width:640px;">
<legend>
Enable textbox
<input type="checkbox" id="checkbox1" name="checkbox1" onclick="enabledisable()">
</legend>
<form name="form1">
Text:
<input type="text" name="text" disabled>
</form>
</fieldset>
<script type="text/javascript">
function enabledisable() {
if (document.getElementById("checkbox1").checked) {
document.form1.text.disabled=false;
} else {
document.form1.text.disabled=true;
}
}
</script>
</body>
hi
i want two check two fields
if the value of two fields is same then its shows a message two me i have a code but
its not working can you tell me what worng with this code
<script type="text/javascript">
function checkForm(form1){
if(form1.field1.value == form1.field2.value ){
alert(" values are identical");
form1.field1.focus();
return true;
}else{
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkform1(this);" >
</form>
Change your if condition like this
if(document.form1.field1.value==document.form1.field2.value)
You're calling checkform(), but that's not defined anywhere. Also, checkform1(this) uses the button as the element form1, which screws everything up. Use this.parentNode, which passes the form as the argument.
Here's some working code:
<script>
function checkForm(form1) {
if (form1.field1.value == form1.field2.value) {
alert(" values are identical");
form1.field1.focus();
return true;
} else {
return false;
}
}
</script>
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm(this.parentNode);" >
</form>
You need to add document. in front of your form selections. And your method name is wrong from the method you are calling from your click event.
I've fixed it and included an example here : http://jsfiddle.net/jomanlk/Fu2wJ/1/
function checkForm(form1) {
if (document.form1.field1.value == document.form1.field2.value) {
alert(" values are identical");
document.form1.field1.focus();
return false;
}
else {
return true;
}
}
<form name="form1" method="POST" action="" >
<input type="text" name="field1">
<input type="text" name="field2">
<input type="submit" onClick="return checkForm();" >
</form>
Apart from the fact that checkForm1 function does not exist , the main problem lies in
<input type="submit" onClick="return checkform1(this);" >
Here the this refers to the input and not the form.
To make your code working change the function name to checkForm and
<input type="submit" onClick="return checkform1(this.form);" >