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>
Related
I am working in php/JQuery and this is what I have coded so far ...
username.php
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").change(function(){
if($('#username').val().length == 0){
$('#message').empty();
}
else{
$("#message").html("<img src='images/loader.gif' /> checking...");
var username = $("#username").val();
$.post( "check.php", { user: $("#username").val() }, function (data){
if(data == 0){
$("#message").html("<img src='images/tick.png' /><span style='font-size:13px; color: black'> Username available</span>");
proceed = true;
}
else{
$("#message").html("<img src='images/err.png' /><span style=font-size:13px; color: red'> Username already taken</span>");
proceed = false;
}
});
}
});
});
</script>
</head>
<body>
<form id="user">
<table>
<tr>
<td>Username</td>
<td>:</td>
<td><input type="text" name="username" id="username"/></td>
<td id="message"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="text" name="password" id="password" /></td>
</tr>
</table>
<button type="submit" name="submit" >Check</button>
</form>
</body>
</html>
Now what I want to achieve is:
As I backspace/delete the whole text in the textbox with the ID = "username" , this should clear the text that appears in the td with the ID = "message"
How can achieve this with javascript.
Any help will be much appreciated.
Use keyup/input event instead of change or Both events together for backward compatibility.
Try this:
$(document).ready(function() {
$("#username").on('input, keyup', function() {
if ($('#username').val().length == 0) {
$('#message').empty();
} else {
$("#message").html("<img src='images/loader.gif' /> checking...");
var username = $("#username").val();
$.post("check.php", {
user: $("#username").val()
}, function(data) {
if (data == 0) {
$("#message").html("<img src='images/tick.png' /><span style='font-size:13px; color: black'> Username available</span>");
proceed = true;
} else {
$("#message").html("<img src='images/err.png' /><span style=font-size:13px; color: red'> Username already taken</span>");
proceed = false;
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="user">
<table>
<tr>
<td>Username</td>
<td>:</td>
<td>
<input type="text" name="username" id="username" />
</td>
<td id="message"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input type="text" name="password" id="password" />
</td>
</tr>
</table>
<button type="submit" name="submit">Check</button>
</form>
Hi and sorry for my bad English
I have a contact page and i am using javascript to make a "captcha". so peaople must make a math and if thats correct they can send me a e-mail. Now my problem is that javasctipt give a alert that the math is wrong or not filled but the e-mail is still seended.
my html:
<script type="text/javascript">
function validate () {
var ta = document.getElementById("ta").value;
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1+ digit2;
if (answer === null || answer === "") {
alert("reken de cijfers uit");
return false;
} else if (answer != sum){
alert("je som is fout");
} else if (ta === null || ta === ""){
alert("schrijf een bericht");
} else {
document.getElementById("answer").innerHTML = "bezig met sturen";
document.getElementById("answer").innerHTML = "";
}
}
function randNums () {
var rand_num1 = Math.floor(Math.random()*10)+1;
var rand_num2 = Math.floor(Math.random()*10)+1;
document.getElementById("digit1") .innerHTML=rand_num1;
document.getElementById("digit2") .innerHTML=rand_num2;
}
</script>
<body onload="randNums() ;">
<form action="/cgi-bin/form.cgi" method="POST" onsubmit="return validate ();">
<input type="hidden" name="DEBUG" value="0">
<input type="hidden" name="MAILFILE" value="peymankarimi/form/sjabloon.txt">
<input type="hidden" name="MAILTO" value="peyman_50#hotmail.com">
<input type="hidden" name="REPLYFAULT" value="peymankarimi/form/formulier.html">
<input type="hidden" name="REPLYOK" value="peymankarimi/form/verzonden.html">
<table border="0" width="374" id="contactformulier">
<tr>
<td width="137">Naam:</td>
<td width="230"><input type="text" size="31" name="naam" placeholder="Naam"></td>
</tr>
<tr>
<td width="137">Voornaam:</td>
<td width="230"><input type="text" size="31" name="voornaam" placeholder="Voornaam"></td>
</tr>
<tr>
<td width="137">Woonplaats:</td>
<td width="230"><input type="text" size="31" name="woonplaats" placeholder="Woonplaats"></td>
</tr>
<tr>
<td width="137">Telefoonnummer:</td>
<td width="230"><input type="text" size="31" name="telefoon" placeholder="Telefoonnummer"> </td>
</tr>
<tr>
<td width="137">E-mailadres: <br></br></td>
<td width="230">
<input type="text" size="31" name="MAILFROM" placeholder="E-mailadres"> <br></br> </td>
</tr>
</tr>
<tr>
<td width="137">Onderwerp:</td>
<td width="230"><input type="text" size="31" maxlength="30" name="SUBJECT"> </td>
</tr>
<tr>
<td colspan="2">Uw vragen, opmerkingen, suggesties, ... :<br>
<textarea id="ta" name="omschrijving" rows="6" cols="43" ></textarea>
<br />
<strong> Tel deze cijfers op </strong>
<span id="digit1"> </span> +
<span id="digit2"> </span> =
<input type="text" id="answer" size="2"; />
<br />
<p align="right"><input type="submit" name="cmdVerzenden" value="Verzenden">
<input type="reset" name="cmdWissen" value="Wissen"></td>
</form>
</tr>
</table>
</form>
</body>
Your validate function needs to return false on all errors to stop the form from submitting. You only seem to have it for one error.
function validate () {
var ta = document.getElementById("ta").value;
var answer = document.getElementById("answer").value;
var digit1 = parseInt(document.getElementById("digit1").innerHTML);
var digit2 = parseInt(document.getElementById("digit2").innerHTML);
var sum = digit1+ digit2;
if (answer === null || answer === "") {
alert("reken de cijfers uit");
return false;
} else if (answer != sum){
alert("je som is fout");
return false;
} else if (ta === null || ta === ""){
alert("schrijf een bericht");
return false;
} else {
document.getElementById("answer").innerHTML = "bezig met sturen";
document.getElementById("answer").innerHTML = "";
}
}
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 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">