I was trying to figure out how to make a form login with difference
like some user was admin, other is user and the other is vip
I've tried to add else and change the variable but it didn't work.
<html>
<head>
<script language="javascript">
var vipz = new Array();
var vasses = new Array();
function init() {
vipz.push("vadmin");
vasses.push("vadmin");
vipz.push("vuser");
vasses.push("vuser");
vipz.push("velcius");
vasses.push("vitz");
users.push("admins");
passes.push("admins");
users.push("vipz");
passes.push("vipz");
users.push("celciuss");
passes.push("bitzs");
ausers.push("adminsa");
apasses.push("adminsa");
ausers.push("vipza");
apasses.push("vipza");
ausers.push("celciussa");
apasses.push("bitzsa");
}
function login() {
var ddl = document.getElementById("op");
var selectedValue = ddl.options[ddl.selectedIndex].value;
for (var i = 0; i < vipz.length; i++) {
if (document.getElementById("user").value == vipz[i]) {
if (document.getElementById("pass").value == vasses[i]) {
if (selectedValue == "vip") {
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into " + vipz[i];
}
}
}
}
for (var j = 0; j < users.length; j++) {
if (document.getElementById("user").value == users[j]) {
if (document.getElementById("pass").value == passes[j]) {
if (selectedValue == "user") {
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into " + users[j];
}
}
}
}
for (var k = 0; k < users.length; k++) {
if (document.getElementById("user").value == users[k]) {
if (document.getElementById("pass").value == passes[k]) {
if (selectedValue == "admin") {
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into " + users[k];
}
}
}
}
}
</script>
</head>
<body onLoad="init();">
<fieldset>
<table>
<tr>
<td>
<label>User</label>
</td>
<td>
<input type="text" id="user" />
</td>
</tr>
<br>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pass" />
</td>
</tr>
<br>
<tr>
<td>
<select type="opt" id="op" name="cards">
<option value="admin">admin</option>
<option value="user">user</option>
<option value="vip">vip</option>
</td>
<td>
<input type="button" value="Submit" onClick="login();" />
</td>
</tr>
<p id="result"></p>
</fieldset>
</body>
</html>
Here the only problem is that, you've forgotten to declare all arrays.
Add all missing declarations.
var users = new Array();
var passes = new Array();
var ausers = new Array();
var apasses = new Array();
Then It will work.
You have not define ausers , users ,passes, apasses array
Added missing array declarations.
<html>
<head>
<script language="javascript">
var vipz = new Array();
var vasses = new Array();
var ausers = new Array();
var apasses = new Array();
function init(){
vipz.push("vadmin");
vasses.push("vadmin");
vipz.push("vuser");
vasses.push("vuser");
vipz.push("velcius");
vasses.push("vitz");
users.push("admins");
passes.push("admins");
users.push("vipz");
passes.push("vipz");
users.push("celciuss");
passes.push("bitzs");
ausers.push("adminsa");
apasses.push("adminsa");
ausers.push("vipza");
apasses.push("vipza");
ausers.push("celciussa");
apasses.push("bitzsa");
}
function login(){
var ddl = document.getElementById("op");
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i = 0;i<vipz.length;i++){
if(document.getElementById("user").value == vipz[i]){
if(document.getElementById("pass").value == vasses[i]){
if (selectedValue == "vip"){
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into "+vipz[i];
}
}
}
}
for(var j = 0;j<users.length;j++){
if(document.getElementById("user").value == users[j]){
if(document.getElementById("pass").value == passes[j]){
if (selectedValue == "user"){
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into "+users[j];
}
}
}
}
for(var k = 0;k<users.length;k++){
if(document.getElementById("user").value == users[k]){
if(document.getElementById("pass").value == passes[k]){
if (selectedValue == "admin"){
alert("You have logged in");
document.getElementById("result").innerHTML = "You have logged into "+users[k];
}
}
}
}
}
</script>
</head>
<body onLoad="init();">
<fieldset>
<table>
<tr><td><label>User</label></td>
<td><input type="text" id="user" /></td></tr>
<br>
<tr><td><label>Password</label></td>
<td><input type="password" id="pass" /></td></tr>
<br>
<tr><td>
<select type="opt" id="op" name="cards">
<option value="admin"> admin </option>
<option value="user"> user </option>
<option value="vip"> vip </option>
</td>
<td><input type="button" value="Submit" onClick="login();" /></td></tr>
<p id="result"></p>
</fieldset>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var u = document.forms["myForm"]["uname"];
if (f.value == "") {
document.getElementById("fname-error").innerHTML = "Please Enter your First
Name";
document.getElementById("fname-error").style.color = "Red";
status = false;
} else {
document.getElementById("fname-error").innerHTML = "Valid First Name";
document.getElementById("fname-error").style.color = "Green";
status = true;
}
if (l.value == "") {
document.getElementById("lname-error").innerHTML = "Please Enter your Last
Name";
document.getElementById("lname-error").style.color = "Red";
status = false;
} else {
document.getElementById("lname-error").innerHTML = "Valid Last Name";
document.getElementById("lname-error").style.color = "Green";
status = true;
}
if (a.value == "") {
document.getElementById("age-error").innerHTML = "Please Enter your age";
document.getElementById("age-error").style.color = "Red";
status = false;
} else {
document.getElementById("age-error").innerHTML = "Age Selected";
document.getElementById("age-error").style.color = "Green";
status = true;
}
if (g.value == "") {
document.getElementById("gender-error").innerHTML = "Please select your
gender";
document.getElementById("gender-error").style.color = "Red";
status = false;
} else {
document.getElementById("gender-error").innerHTML = "Gender Selected";
document.getElementById("gender-error").style.color = "Green";
status = true;
}
if (m.value.length < 10 || m.value.length > 10) {
document.getElementById("mobile-error").innerHTML = "Please Enter a valid
Mobile Number";
document.getElementById("mobile-error").style.color = "Red";
status = false;
} else {
document.getElementById("mobile-error").innerHTML = "Valid Mobile Number";
document.getElementById("mobile-error").style.color = "Green";
status = true;
}
if (u.value == "") {
document.getElementById("uname-error").innerHTML = "Please Choose a
Username";
document.getElementById("uname-error").style.color = "Red";
status = false;
} else {
document.getElementById("uname-error").innerHTML = "Valid Username";
document.getElementById("uname-error").style.color = "Green";
status = true;
}
return true;
}
function checkPass(passId) {
if (/^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{6,16}$/.test(passId)) {
document.getElementById("pass1-error").innerHTML = "You have entered valid
Password.";
document.getElementById("pass1-error").style.color = "Green";
return true;
}
return false;
}
function ValidatePassid() {
var passID = document.forms["myForm"]["passid1"];
if ((passID.value == null) || (passID.value == "")) {
document.getElementById("pass1-error").innerHTML = "Please Enter your
password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
if (checkPass(passID.value) == false) {
passID.value = "";
document.getElementById("pass1-error").innerHTML = "Invalid Password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
return true;
}
function Validate() {
var pass1 = document.forms["myForm"]["passid1"];
var pass2 = document.forms["myForm"]["passid2"];
if (pass1.value != pass2.value) {
document.getElementById("pass2-error").innerHTML = "Passwords do not
match.";
document.getElementById("pass2-error").style.color = "Red";
return false;
} else {
document.getElementById("pass2-error").innerHTML = "Passwords match.";
document.getElementById("pass2-error").style.color = "Green";
return true;
}
return true;
}
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)) {
document.getElementById("email-error").innerHTML = ("You have entered a
valid email");
document.getElementById("email-error").style.color = "Green";
return true;
}
return false;
}
function ValidateEmail() {
var emailID = document.forms["myForm"]["email"];
if ((emailID.value == null) || (emailID.value == "")) {
document.getElementById("email-error").innerHTML = "Please Enter your Email
ID";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
if (checkEmail(emailID.value) == false) {
emailID.value = "";
document.getElementById("email-error").innerHTML = "Invalid Email Adderess";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" id="MyForm">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" name="fname" />
<div id="fname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" name="lname" />
<div id="lname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" minlength ="0" maxlength = "100"/>
<div id="age-error" class="error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list="genders" name="gender" />
<datalist id="genders">
<option value="Male">
<option value="Female">
<option value="Other">
</datalist>
<div id="gender-error" class="error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength="10" maxlength ="10"/>
<div id="mobile-error" class="error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="userid" name="uname" />
<div id="uname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="passid1" minlength="6" />
<div id="pass1-error" class="error"></div>
</td>
</tr>
<tr><td>Confirm Password:</td>
<td>
<input type="password" name="passid2" minlength="6"/>
<div id="pass2-error" class="error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" />
<div id="email-error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button onlick="return !!(validateform() & ValidatePassid() &
Validate() & ValidateEmail())">Submit</button>
<span id="display">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
I should not use any server side languages since it is a school project, I tried to display the data using onclick but it is not working. Can any one solve this problem and guide me through it. Even if you suggest to use any server side languages I can't use them, because they didn't teach those. Only basic JavaScript can be used to dispaly the form values.
Use jQuery validation js...the prior reason for suggesting you is that you don't have to do manual code as that js will automatically track this.
https://jqueryvalidation.org/
Hope, this will help you.
The problem is that the code works absolutely fine for displaying the validation errors once I click on the submit button, but after the messages are displayed.. and again when I click on the submit button (without reloading ie. the error messages are still on the display), it redirects to the success page even though it has error messages.
Have a look at the code:
var flag = 0;
function username() {
usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
pass = document.form1.pass.value;
cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
cpass = document.form1.cpass.value;
pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
email = document.form1.em.value;
if (email == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
return false;
} else {
return true;
}
}
<form name="form1" action="success.html" onSubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>
thank you
Here is a snippet to work with.
There are few issues in the code:
In the function email(), you are assigning value to the email variable.
There are many variables created NOT within the function scope.
More optimizations can be made rather than using global functions and variables which will make the code more readable and maintainable.
var flag = 0;
function username() {
var usrn = document.form1.txt.value;
if (usrn == "") {
document.getElementById("user").innerHTML = "Please enter a username";
flag = 1;
} else if (usrn.length < 8) {
document.getElementById("user").innerHTML = "minimum 8 characters required";
flag = 1;
}
}
function password() {
var pass = document.form1.pass.value;
var cpass = document.form1.cpass.value;
if (pass == "") {
document.getElementById("password").innerHTML = "Please enter a password";
flag = 1;
} else if (pass.length < 8) {
document.getElementById("password").innerHTML = "minimum 8 characters required";
flag = 1;
} else if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function cpassword() {
var cpass = document.form1.cpass.value;
var pass = document.form1.pass.value;
if (cpass == "") {
document.getElementById("cpassword").innerHTML = "Please confirm password";
flag = 1;
} else if (cpass != pass) {
document.getElementById("cpassword").innerHTML = "passwords do not match";
flag = 1;
} else
return;
}
function email() {
var emailValue = document.form1.em.value;
if (emailValue == "") {
document.getElementById("emailid").innerHTML = "Please enter Email-ID";
flag = 1;
}
}
function check(form) {
flag = 0;
username();
password();
email();
if (flag == 1) {
console.log("False");
return false;
} else {
console.log("True");
return true;
}
}
<form name="form1" action="success.html" onsubmit="return check(this)" method="post">
<table cellpadding="10">
<tr>
<caption>FILL FORM</caption>
</tr>
<tr>
<td>
<label for="txt">Enter Username</label>
</td>
<td>
<input type="text" id="txt">
<div class="error" id="user" onBlur="username()"></div>
</td>
</tr>
<tr>
<td>
<label for="pass">Enter Password</label>
</td>
<td>
<input type="password" id="pass" onBlur="password()">
<div class="error" id="password"></div>
</td>
</tr>
<tr>
<td>
<label for="cpass">Confirm Password</label>
</td>
<td>
<input type="password" id="cpass" onBlur="password()">
<div class="error" id="cpassword"></div>
</td>
</tr>
<tr>
<td>
<label for="em">Enter Email-ID</label>
</td>
<td>
<input type="email" id="em" onBlur="email()">
<div class="error" id="emailid"></div>
</td>
</tr>
<tr>
<td colspan=2>
<button type="submit" class="btn">Submit</button>
</td>
</tr>
</table>
</form>
whenever there is validation error. return false from the function. it should fix this.
This is my Form Validation it was working perfect and what my problem is i need to display the form values within a single alert message so please provide a suggestion for me
<!DOCTYPE html>
<html>
<head>
<title>1.Form ValidationM</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="Wrapper">
<header>
<h1 class="logo">Header</h1>
<nav class="navdesktop">
<ul class="menu-item">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Category</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="RegHead"><h1>Registration Form</h1></div>
<div class="Form-Wrapper">
<div class="Divstyle">
<!--<h1>Form Validation</h1>-->
<form name="myForm" onsubmit="return myFunction()">
<label>FirstName:</label><input type="text" class="TagColor" name="fname"/><br><span class="Required"></span><br>
<label>LastName:</label><input type="text" class="TagColor" name="lname"/><br><span class="Required"></span><br>
<label>Phone No:</label><input type="text" class="TagColor" name="phno"/><br><span class="Required"></span><br>
<label>Email-Id :</label><input type="email" class="TagColor" name="email"/><br><span class="Required"></span><br>
<label>Gender: </label><br>
<label>Male:</label><input type="radio" name="gender" value="male"/>
<label>Female:</label><input type="radio" name="gender" value="female"/><br><span id="WrongMsg"></span><br><br>
<label>Please choose Yes or No option for Select Country:</label><br>
<label>Yes</label><input type="radio" name="option" id="YesOp" onclick="DropRad()">
<label>No</label><input type="radio" name="option" id="NoOp" onclick="DropRad()"><br><br>
<div id="Pass">
<label>Select Country</label>
<select id="mySelect">
<option value="0">Select Country</option>
<option value="1">INDIA</option>
<option value="2">PAKISTAN</option>
<option value="3">AUSTRALLIA</option>
<option value="4">AMERICA</option>
</select><br><br><span id="DropRequired"></span><br>
</div>
<label>Language: </label><br>
<label>Tamil:</label><input type="checkbox" name="check" value="Tamil"><br><br>
<label>English:</label><input type="checkbox" name="check" value="English"><br><br>
<label>Telugu:</label><input type="checkbox" name="check" value="Telugu"><br><br>
<label>Kannada:</label><input type="checkbox" name="check" value="Kannada"><br><br>
<label>Malayalam:</label><input type="checkbox" name="check" value="Malayalam"><br><span id="ErrorMsg"></span><br><br>
<input type="submit" value="submit" name="submit">
</form>
</div>
</div>
</div>
<script>
document.getElementById("Pass").style.display = 'none';
function myFunction()
{
var res = document.forms.myForm.length;
flag = true;
for (var i = 0; i < res; i++)
{
if ((document.forms.myForm[i].className) == 'TagColor')
{
var x = document.forms.myForm[i].value;
if (x == "" || x == null)
{
document.getElementsByClassName("Required")[i].innerHTML = "required";
document.getElementsByClassName("Required")[i].style.color = "red";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid red";
document.getElementsByClassName("TagColor")[i].style.background = "lightblue";
flag=false;
}
else
{
document.getElementsByClassName("Required")[i].innerHTML = "";
document.getElementsByClassName("Required")[i].style.color = "white";
document.getElementsByClassName("TagColor")[i].style.border = "1px solid black";
document.getElementsByClassName("TagColor")[i].style.background = "white";
var txt = document.getElementsByClassName("TagColor");
var sad = " ";
for(var j=0;j<txt.length;j++)
{
var dispp = txt[j].value;
sad += " ," + dispp;
}
alert(sad);
}
}
}
var gen = document.getElementsByName("gender");
for(var i=0;i<gen.length;i++)
{
if(gen[i].checked == false)
{
document.getElementById("WrongMsg").innerHTML = "required";
document.getElementById("WrongMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("WrongMsg").innerHTML = "";
var disp = " ";
var Radd = document.getElementsByName("gender");
for(var i=0;i<Radd.length;i++)
{
if(Radd[i].checked)
{
disp = Radd[i].value;
alert(disp);
flag = true;
}
}
}
}
var c = document.getElementsByName("check");
for(var i=0;i<c.length;i++)
{
if(c[i].checked == false)
{
document.getElementById("ErrorMsg").innerHTML = "required";
document.getElementById("ErrorMsg").style.color = "red";
flag = false;
}
else
{
document.getElementById("ErrorMsg").innerHTML = "";
var display = "";
var chk = document.getElementsByName("check");
for(var i=0;i<chk.length;i++)
{
if(chk[i].checked)
{
display += "," + chk[i].value;
}
}
alert(display);
}
}
return flag;
}
function DropRad()
{
var YesRadio = document.getElementById("YesOp");
var NoRadio = document.getElementById("NoOp");
Pass.style.display = YesOp.checked ? "block" : "none";
var e = document.getElementById("mySelect");
var optionSelIndex = e.options[e.selectedIndex].value;
var optionSelectedText = e.options[e.selectedIndex].text;
if (optionSelIndex == 0)
{
document.getElementById("DropRequired").innerHTML = "Required";
document.getElementById("DropRequired").style.color = "red";
}
else
{
document.getElementById("DropRequired").innerHTML = "";
document.getElementById("DropRequired").style.color = "white";
alert("Your Country is: " + optionSelectedText);
}
}
</script>
</body>
</html>
<form onchange="serialize(this)">
<select name="status">
<option value="*">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<select name="size">
<option value="*">All</option>
<option value="small">Small</option>
<option value="big">Big</option>
</select>
check here
I'm making this calculator and have no idea why nothing comes into tulos box. Here is the code, I hope someone can help me. I'm starter with these kind of things, so there might be some really big mistakes in code.
<html>
<head>
<title>Laskurit</title>
</head>
<body>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
paino *= 20 == koti1;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
paino *= 9,75 == ulko1;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table><tr><td>Paino: <td><input type="text" name="paino"><br>
<tr><td>Kokonaishinta(€): <td><input type="text" name"hinta"><br>
<tr><td>Mistä/mihin?<br>
<td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
<tr><td>
<p>Korvausmäärä(€):</p>
<td><p><input type="text" size="40" name="tulos"></p>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
Not exactly sure what you are trying to accomplish but there were a few syntax errors in your code. Here working code
<html>
<head>
<title>Laskurit</title>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
var koti1 = paino *20;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
var ulko1 = paino *9.75;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
</head>
<body>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table border=0>
<tr><td>Paino: </TD><td><input type="text" name="paino"></td></tr>
<tr><td>Kokonaishinta(€):</tD><td><input type="text" name="hinta"></td></tr>
<tr><td>Mistä/mihin?</td><td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
</td></tr>
<tr><td>
<p>Korvausmäärä(€):</p></td>
<td><p><input type="text" size="40" name="tulos"></p></td>
</tr>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
This is very simple code, and similar to my other question.
When I click submit, the alert box shows up three times for option one, twice for two, and once for three.
Here is the part of the code where the problem is most probably located:
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
And here is my whole code. It all works fine except for this.
<!-- saved from url=(0055)file:///C:/Users/Bartek/Downloads/Exam%20entry4.1.2.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="file:///C:/Users/Bartek/Downloads/success.html">
<input type="radio" name="r1" value="GCSE">GCSE
<input type="radio" name="r1" value="AS">AS
<input type="radio" name="r1" value="A2">A2
<table width="50%" border="0">
<tbody>
<tr>
<td id="name" style="color: black; ">Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td id="subject" style="color: black; ">Subject</td>
<td>
<input type="text" name="subject">
</td>
</tr>
<tr>
<td id="enumber" style="color: black; ">Examination Number</td>
<td>
<input type="text" name="enumber">
</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>
</tbody></table>
</form>
<script>
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.enumber.value.length != 4) {
msg += "The examination number must be exactly four characters long \n";
document.ExamEntry.enumber.focus();
document.getElementById('enumber').style.color = "red";
result = false;
}
var chosen = ""
var len = document.ExamEntry.r1.length
for (var i = 0; i < len; i++) {
if (document.ExamEntry.r1[i].checked) {
chosen = document.ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
if (msg == "") {
return result;
} {
alert(msg);
return result;
}
}
</script>
</body>
</html>
This is GCSE computing coursework.
for (var i = 0; i <len; i++) {
if (document. ExamEntry.r1[i].checked) {
chosen = document. ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}
chosen won't be "" if it was set before; you don't set it back to "" if the item wasn't checked, and so it'll confirm the last one that was. Just merge them.
for(var i = 0; i < document.ExamEntry.r1.length; i++) {
if(document.ExamEntry.r1[i].checked) {
confirm(document.ExamEntry.r1[i].value);
}
}
You were missing an else.
if (!msg) {
return result;
} else {
alert(msg);
return result;
}