Develop Reference

How to disable input fields on page load if a checkbox is not checked?

I want to disable all the user input fields in a form, if the 'Status Active' checkbox is unchecked. The target is to load the page with all the details but if the Status is not active then the checkbox will show as unchecked and the rest of the input fields will remain disabled, till the user checks the checkbox. He can then edit the data and save it.
However, if the record is active, then all the fields will be enabled for editing straight away.
I have already achieved this, but the only problem is even when the record is active, the input fields are getting disabled. Can anyone please point out where is the error in my code?
<script type='text/javascript'>
$(function(){
if($('#square').not(':checked')){
$('#prizename, #prizedesc, #comment').attr('disabled','disabled');
}
});
function checkDisable(){
var square = document.getElementById('square');
var prizename = document.getElementById('prizename');
var prizedesc = document.getElementById('prizedesc');
var comment = document.getElementById('comment');
if(square.checked){
prizename.disabled = false;
prizedesc.disabled = false;
comment.disabled = false;
}
if(!square.checked ){
prizename.disabled = true;
prizedesc.disabled = true;
comment.disabled = true;
}
}
</script>
<php codes here>
<div>
<table>
<tr>
<td>Prize Status - Active:</td>
<td><div class="square">
<input type="checkbox" name="status" id="square" value="1" onchange="checkDisable()" <?php if ($status == 1) echo 'checked'; ?> />
</div>
</td>
</tr>
</table>
<label>Prize Name <input type="text" name="prizename" id="prizename" value="<?php echo isset($_POST['prize']) ? $prizename : '' ?>" > </label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc" value="<?php echo isset($_POST['prize']) ? $prize_description : '' ?>" > </label>
<label>Comment <textarea name="comment" id="comment" rows="4" ><?php echo $comment ?> </textarea> </label>
</div>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>

$('#square').not(':checked')
this condition is not satisfied because it will return the object. You have to check with length. Please check in your code.
if($('#square').not(':checked').length > 0)
Or
if(!$('#square').is(":checked"))

I have altered your code - Working from my side.
HTML: (Just insert your variables again)
<table>
<tr>
<td>Prize Status - Active:</td>
<td>
<div class="square">
<input type="checkbox" name="status" id="square" value="1">
</div>
</td>
</tr>
</table>
<label>Prize Name <br><br><input type="text" name="prizename" id="prizename"
value="Juan" ></label>
<label>Prize Description <input type="text" name="prizedesc" id="prizedesc"
value="Description" ></label>
<label>Comment <textarea name="comment" id="comment" rows="4"
>Comment</textarea></label>
<div class="button-section">
<input id="save_button" type="submit" name="submit" value="Save">
</div>
JS: (The first bit executes on page load and the second part is listening for the change event on the checkbox)
if($('#square').not(':checked').length > 0){
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
} else {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
}
const checkbox = document.getElementById('square');
checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('prizename').disabled = false;
document.getElementById('prizedesc').disabled = false;
document.getElementById('comment').disabled = false;
} else {
document.getElementById('prizename').disabled = true;
document.getElementById('prizedesc').disabled = true;
document.getElementById('comment').disabled = true;
}
})

Form Validation in JavaScript (without using jquery)

I have this assignment in my class where we are to make a simple form with three required fields (out of five). I am having problems with getting my code to work.
This is via my professor...with what he wants
{
On submitting the form, the browser should check that :
Values for the required fields have been entered
Use regular expressions to check that the form of the entered input is proper for the email, telephone, and website fields. The forms to check for are:
Email: [alphanumeric string including . and _ ]# [alphanumeric string including . and _ ]. [alpha string]
Telephone: Either (ddd)ddd-dddd or ddd-ddd-dddd etc
Website: www.[alphanumeric string including . _ -].[com or net etc]
If any error is found, the form should not be submitted and appropriate error messages should be generated.
}
All validation must be "client side" i.e. on the browser using Javascript (not on any server and no Jquery or any programming other than Javascript and the required HTML). Use of any authoring tools is strictly and expressly forbidden.
This what I have now. Please help. Below is the code. What am I doing wrong?
<script language = "JavaScript">
<!--
function validateForm(){
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a‌​-zA-Z]{2,})?$/);
}
-->
</script>
<body>
<form name="contact" action="" method="post" onSubmit = "return validateForm();">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>

Try this out:- https://jsfiddle.net/vduwxjmv/
This can be done without JavaScript also using required attribute at each html control for which value is mandatory. And for clear you can use input type as reset.
HTML:-
<form name="contact" action="" method="post">
Name: <input type="textbox" name="Name" value="" required> <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value=""> <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" required> <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" required><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear" />

You can do a check by using the following JavaScript code
var result = $("#form")[0].checkValidity();
or you may change input button
<input type="submit" value="Submit Contact Details">

<!DOCTYPE html>
<html>
<body>
<form name="contact" method="post">
Name: <input type="text" class="form-control" name="Name" placeholder="Name" required="required" /> <font color = red>*Required </font><br>
Company: <input type="text" class="form-control" name="Company" placeholder="Company" /> <font color = red>Optional </font><br>
Email: <input type="email" class="form-control" name="Email" placeholder="Email" required="required" /> <font color = red>*Required </font><br>
Telephone: <input type="text" class="form-control" name="Telephone" placeholder="Telephone"/> <font color = red>Optional </font><br>
Website: <input type="text" class="form-control" name="Website" placeholder="Website" required="required" /><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"><br>
</form>
</body>
</html>
change the type from button to submit.
on giving the type as reset ,it will clear the contents.
on giving required="required", that field will be considered as a mandatory one.

<html>
<head>
<script language = "JavaScript">
function validateForm(thisVar){ alert('method Called From: ');alert(thisVar.value);alert(thisVar.name);
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a‌​-zA-Z]{2,})?$/);
}
</script>
</head>
<body>
<form name="contactForm" action="" method="post" onSubmit = "return validateForm(this);">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details" onclick="validateForm(this);">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>
You can validate it by two ways ---
use Submit type button
call validationForm on button click
Like --
<input type="submit" value="Submit Contact Details">
or
<input type="button" onclick="return validationForm();" value="Submit Contact Details">
you can check method call from to times 1st from onclick 2nd from onsubmit
Dont forget to appreciate (vote up).

Javascript function change text colour

So I am creating an exam entry form for school and when a user enters anything wrong, the name of the field will turn red (what the user has input will remain the same) I need to be able to do this with an onclick event activated by my reset button however the function I have right now does not do this. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="return resetNames();" /></td>
</tr>
</table>
</form>
</body>
</html>

I think your closing braces may be in the wrong place... move one of the two closing braces at the end of your JavaScript to the end of the validateForm() function.

try something like this
YOUR CODE
function validateForm() {
....
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
CHANGE TO
function validateForm() {
......
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
Reason you have nested your function one inside another.

functions are not being called or are not running

I have been working on this for a week now and cannot figure out for the life of me what I have missed or if I have put something somewhere that it is not supposed to be. the code was working fine until I began making changes to the confirmSubmit() function and now it seems like nothing is working properly other than displaying the page. I had my teacher look at it too and he said that he couldn't find out either. I just don't know anymore maybe one of you all can help me solve this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="AS400.css" type="text/css" />
<title>Registration</title>
<script type="text/javascript">
/* <![CDATA[ */
// This JavaScript removes default values form field
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
// This JavaScript allows characters except numbers
function AcceptLetters(objtextbox)
{
var exp = /[^\D]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
// This JavaScript allows numbers only
function AcceptDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
//This JavaScript confirms everything is filled out
function confirmSubmit()
{
var submitForm = window.confirm("Are you sure you want to submit the form?");
var Special offers = false;
var offers = false;
if (document.forms[0].name.value=="Name" || document.forms[0].name.value == "") {
window.alert("Please input your name.");
return false;}
if (document.forms[0].email.value == "E-Mail Address" || document.forms[0].email.value == "") {
window.alert("Please input your email.");
return false;}
if (document.forms[0].password1.value == "" || document.forms[0].password2.value == "") {
window.alert("Please input your password twice.");
retrun false;}
if (document.forms[0].SQ.value == "" || document.forms[0].SQ.value == "none") {
window.alert("Please choose a security question.");
return false;}
if (document.forms[0].sq_answer.value == "Question Answer"|| document.forms[0].sq_answer.value == "") {
window.alert("Please input a sequrity question answer.");
return false;}
for (var i = 0; i <= 1; ++i) {
if (document.forms[0].SpecialOffers[i].checked == true) {
Special offers = true;
break;}
}
if (Special offers == false) {
window.alert("You must select yes or no to special offers.");
return false;
}
for (var k = 0; k <= 3; k++) {
if (document.forms[0].Offers[k].checked == true) {
offers = true;
break;}
}
if (offers == false) {
window.alert("You must choose one offer.");
return false;}
else
return true;
}
/* ]] */
</script>
</head>
<body>
<form action="FormProcessor.html" method = "get" enctype = "application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<table width="50%">
<tr><th colspan="2"><h1>Registration Page</h1></th></tr>
<tr><th colspan="2"><h2>Personal Information<h2></th></tr>
<tr><th colspan="2">(Fields with asterisks are mandatory)</th></tr>
<tr><td>* Name: </td>
<td><input type="text" name="name" value="Name" maxlength="20" onFocus="doClear(this)" onkeyup="AcceptLetters(this)" /></td></tr>
<tr><td>* E-Mail:</td>
<td><input type="text" name="email" value="E-mail Address" onFocus="doClear(this)" /> </td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h3>Security Information</h3></th></tr>
<tr><td>* Password:</td><td><input type="password" name="password1" /></td></tr>
<tr><td>* Confirm Password:</td><td><input type="password" name="password2" /></td></tr>
<tr><td>* Security Question:</td>
<td><select id="selection" name="SQ">
<option value="none">Please Choose One</option>
<option value="color">What is your favorite color?</option>
<option value="name">What is your Mother's maiden name?</option>
<option value="pet">What is your pets name?</option>
<option value="school">What high school did you graduate from?</option>
</select></td></tr>
<tr><td>Answer:</td><td><input type="text" name="sq_answer" value="Question Answer" onFocus="doClear(this)" /></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h4>* Preferences</h4></th></tr>
<tr><th colspan="2">Would you like any special offers sent to your E-mail address?</th></tr>
<tr><th colspan="2">Yes<input type="radio" name="SpecialOffers" value="Yes"/>No<input type="radio" name="SpecialOffers" value="No" /></th></tr>
<tr><th colspan="2"><h5>Interests</h5></th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Entertainment</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Shopping</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Business</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Exercise</th></tr>
<tr><td></td></tr>
<tr><th colspan="2"><input id="submit" type="submit" value="Submit"/><input id="reset" type="reset" value="Reset"/></th></tr>
</table>
</form>
</body>
</html>

You have few syntax errors:
Special offers variable can't have spaces in it.
Keyword is not retrun its return.

I wish to make my code validate a field to make sure it is a number of four digits. How can I do this?

I am currently doing a GCSE course which allows me to ask for assistance from IT sources as long as I reference them in my investigation. I wish to make the following code validate that there is a number of four digits in the Examination Number entry field. I'm okay with simple validation but this is another step for me.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
document.getElementById('examtype').style.color="red";
}
}
if(checked==null)
{
msg+="Please choose an option";
result = false;
}
else{
confirm("You have chosen "+checked.value+" is this the correct course?");
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onClick="return validateForm();" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>

Regarding checking if it is number, you can use some regex:
e.g.
var reg = /^\d{4}$/ig;
var regExRes = reg.exec(document.ExamEntry.examnumber.value);
if (document.ExamEntry.examnumber.value == "" || (regExRes == null || regExRes.length == 0)) {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color = "red";
result = false;
}
To avoid entering anything beside number, I would suggest you to use something like jquery pluging called masked input
EDIT:
line changed from var reg = /\d{4}/ig; to var reg = /^\d{4}$/ig;