I am trying to add a function, or additional JavaScript to the existing function for a confirmation, I need to insert an additional number field to the form to take the users examination number, the examination number is 4 digits and the JavaScript form will need to validate that it is 4 digits I am new to this and any help is much appreciated.
here is my code so far
<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 ";
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(msg==" "){
return result;
}
{
alert(msg)
return result;
}
}
</script>
}
</style>
</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>
<tr>
<td id="subject ">Subject</td>
<td><input type="text " name="subject " /></td>
</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>
You can use RegExp ^[0-9]{1,4}$ to test the value that matches 4 digits and can type only numbers 0-9
Include this in your javascript function
var inputVal=document.ExamEntry.name.value;
var patt = new RegExp("^[0-9]{1,4}$");
var res = patt.test(inputVal);
if(!res)
{
alert("Please enter a valid 4 digit number");
}
Code will be look like
<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";
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;
}
var patt = new RegExp("^[0-9]{1,4}$");
if (!patt.test(document.ExamEntry.examNumber.value)) {
msg+="You must enter 4 digit examination number \n";
document.ExamEntry.subject.focus();
document.getElementById('examNumber').style.color="red";
result = false;
}
return result;
}
function onSubmit(){
if(confirm('Are you sure to submit')){
return validateForm();
}
return false;
}
</script>
</style>
</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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit"
onclick="return onSubmit();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
Simple Html is fine
<input type="text" name="pin" maxlength="4" size="4">
Related
I am having a problem with my javascript not working inside my includes file that is a SHTML file. This is for a class I am tacking, but any way since we do not have SSI we have to use SHTML so we can use #includes here is what I have. I have just like the book ask but is not working. now this is my head document
<!DOCTYPE html>
<!-- head_document.shtml -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<base href="http://studentwebfiles.us/CPM190/MSchultz/ssi/index.shtml">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/tablet.css"
media="screen and (max-width: 900px)">
<script src="scripts/feedbackFormValidate.js"></script>
<title> Every Little Detail Auto Supplies - USA's Largest Supplier</title>
</head>
now this is my feedback.shtml file. Everything works beside the javascript
include virtual="../common/document_head.shtml"-->
<body>
<header>
<!--#include virtual="../common/logo_row.shtml"-->
<!--#include virtual="../common/mainmenu_row.shtml"-->
</header>
<h3>Customer Feedback Form</h3>
<form id="contactForm" onsubmit="feedbackFormValidate()">
<table>
<tr>
<td>Salutation:</td>
<td><select name="salute">
<option> </option>
<option>Mrs.</option>
<option>Ms.</option>
<option>Mr.</option>
<option>Dr.</option>
</select></td>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" size="40"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" size="40"></td>
</tr>
<tr>
<td>E-mail Address:</td>
<td><input name="email" size="40" type="text"></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><input type="text" name="phone" size="40"></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type="text" name="subject" size="40"></td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="30" name="message" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2">Please check here if you wish to receive a reply:
<input type="checkbox" name="reply" value="yes"></td>
</tr>
<tr>
<td><input type="submit" value="Send Feedback"></td>
<td class="RightAligned">
<input type="reset" value="Reset Form"></td>
</tr>
</table>
</form>
<footer>
<!--#include virtual="../common/footer_row.shtml"-->
</footer>
</body>
This is my . js file
function feedbackFormValidate()
{
var contactFormObj = document.getElementById("contactForm");
var firstName = contactFormObj.firstName.value;
var lastName = contactFormObj.lastName.value;
var phone = contactFormObj.phone.value;
var email = contactFormObj.email.value;
var everythingOK = true;
if (!validateName(firstName))
{
alert("Error: Invalid first name.");
everythingOK = false;
}
if (!validateName(lastName))
{
alert("Error: Invalid last name.");
everythingOK = false;
}
if (!validatePhone(phone))
{
alert("Error: Invalid phone number.");
everythingOK = false;
}
if (!validateEmail(email))
{
alert("Error: Invalid e-mail address.");
everythingOK = false;
}
if (everythingOK)
{
if (contactFormObj.reply.checked)
alert("Warning: The e-mail feature is currently not supported.");
alert("All the information looks good.\nThank you!");
return true;
}
else
return false;
}
function validateName(name)
{
var p = name.search(/^[-'\w\s]+$/);
if (p == 0)
return true;
else
return false;
}
function validatePhone(phone)
{
var p1 = phone.search(/^\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/);
var p2 = phone.search(/^\d{3}[-\s]{0,1}\d{4}$/);
if (p1 == 0 || p2 == 0)
return true;
else
return false;
}
function validateEmail(address)
{
var p = address.search(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})$/);
if (p == 0)
return true;
else
return false;
}
any help or ideas would be great! Thanks
figured it out Ipages keep kicking out onsubmit.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have been working on this code for my GCSE assessment but I can't seem to get the JavaScript to work , I have looked through my code for a couple of weeks now and I still can't find the logic error within it I suspect that I have missed something out to get the Java to work , if anyone can help it would be extremely helpful
my current code I am looking through:
<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.getElemenById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.geElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.exam number.value=="") {
msg+="You must enter your exam number \n";
document.ExamEntry.subject.focus();
document.geElementById('exam number').style.color="red";
result = false;
}
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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="exam number">Exam Number</td>
<td><input type="text" name="Exam Number" /></td>
</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>
Tidying up your snippet presents the real issue:
function ValidateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElemenById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.geElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.exam number.value=="") {
msg+="You must enter your exam number \n";
document.ExamEntry.subject.focus();
document.geElementById('exam number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
<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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="exam number">Exam Number</td>
<td><input type="text" name="Exam Number" /></td>
</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>
SyntaxError: missing ) after condition
if (document.ExamEntry.exam number.value=="") {
---------------------------^
if your variable has a space in it, you cant use the dot notation, but you can use the square bracket notation. Change that line to:
if (document.ExamEntry["Exam Number"].value=="") {
I am doing a GCSE computing coursework task and I am trying to get the validation right on a set of 3 radio buttons however the code for the radio buttons (which I copy and pasted from an external source that I do not remember now) however this copy and pasted code seems to override the validation for the other fields (Two text input fields and a number input field) The code is shown below.
<!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";
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 the exam number \n";
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";
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];
break;
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else{
return confirm('You have chosen '+checked.value+' is this correct?');
}
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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="number" name="examnumber" size="4" maxlength="4"></td>
</tr>
<tr>
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br/>
<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>
</body>
</html>
You still had quite some errors in the HTML document:
duplicate ID's
unclosed <input> tags
missing 'else' in javascript
duplicate </body> tag
extra double quotes in <script> tag
I fixed these. I also moved the alert of your msg variable above the check for the options, so that they don't interfere with each other. In order to get the first field to focus instead of the last in line, I've added a check to see if result is still true:
<!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?');
}
}
</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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4"/></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" /></td>
</tr>
</table>
</form>
</body>
</html>
I am just wondering if anyone can help me insert radio buttons into my HTML webpage to insert the difficulty of the exam, This is my question
5. Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Here is my code, Can anyone help me out please
<!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";
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.subject.value=="") {
msg+="You must enter your Exam ID Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS";
}
</style>
</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>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr> <tr>
<td id="Exam Number">Exam ID Number</td>
<td><input type="Number" name="ID Number"maxlength="4" ></td>
</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>
</body>
</html>
JFiddle:
http://jsfiddle.net/Jgv9q/
Simply add the radio buttons in your html and run code to find out which one was checked. You should be referencing w3Schools when just learning but got you started here.
http://jsfiddle.net/hyysy/1/
<tr>
<td>Exam Level</td>
<td><input type="radio" name="exam" value="GCSE">GCSE<br>
<input type="radio" name="exam" value="AS">AS<br>
<input type="radio" name="exam" value="ALevel">ALevel</td>
</tr>
and then to find out which is checked, you can use:
var x = document.getElementsByName('exam')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
Read more here:
http://www.w3schools.com/html/html_forms.asp
The code is very simple. But this is the first thing off this kind that I am doing, and I simply do not understand what it is that I am doing wrong.
Also this is the raw code straight from OCR.
This is GCSE computing coursework. I don't have to fix it, but I don't know how I'm supposed to test the stuff I'm going to add without the base code working.
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm(document) {
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 (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>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</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>
Your code has couple of syntax errors. I have removed that.
here is the fiddle link
<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>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" onclick= " return validateForm();" /><!--js function inside quotes-->
</td>
<td>
<input type="reset" name="Reset" value="Reset" />
</td>
</tr>
</table>
</form>
<script>
//function had illegal parameter
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";
// document.getElementById(‘name’).style.color = "red";--->Id should be in quotes
result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
// document.getElementById(‘subject’).style.color = "red";--->Id should be in quotes
result = false;
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>