Form validation with javascript reg expression

Form validation with javascript reg expression - javascript

So, I have this form and all forms check if they're empty. However, I can't get the reg expression to validate that the name is using the correct syntax. Any clues to why this is, would be appreciated!
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<script>
function validate() {
var fName = document.getElementById("firstName");
var lName = document.getElementById("lastName");
var phone = document.getElementById("phone");
var ad = document.getElementById("address");
var city = document.getElementById("city");
var zip = document.getElementById("zip");
var birthdate = document.getElementById("birthdate");
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var relation = document.getElementById("relation");
var nameExp = /^[a-zA-Z]+$/;
if (fName.value == "") {
fName.focus();
fName.style.background = "red";
}
if (lName.value == "") {
lName.focus();
lName.style.background = "red";
}
if (phone.value == "") {
phone.focus();
phone.style.background = "red";
}
if (ad.value == "") {
ad.focus();
ad.style.background = "red";
}
if (city.value == "") {
city.focus();
city.style.background = "red";
}
if (zip.value == "") {
zip.focus();
zip.style.background = "red";
}
if (birthdate.value == "") {
birthdate.focus();
birthdate.style.background = "red";
}
if (user.value == "") {
user.focus();
user.style.background = "red";
}
if (pass.value == "") {
pass.focus();
pass.style.background = "red";
}
if (relation.value == "") {
relation.focus();
relation.style.background = "red";
alert("All fields must be filled out!");
return false;
} else {
return (true);
}
console.log(nameExp.test(document.getElementById.firstName.value));
if (!nameExp.test(document.getElementById.firstName)) {
alert("You need to enter a valid name");
document.getElementById.firstName.focus();
return false;
}
if (!document.getElementById.firstName.value.match(nameExp)) {
alert("You need to enter a valid name");
document.getElementById.firstName.focus();
return false;
}
else
console.log("This is correct");
return (true);
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="form" onSubmit="validate();" action="" method="post">
<table>
<tr>
<td>Enter Name</td>
<td><input id="firstName" type="text" name="firstName"> </td>
</tr>
<tr>
<td>Enter Last Name </td>
<td><input id="lastName" type="text" name="lastName">
</tr>
<tr>
<td>Phone Number</td>
<td><input id="phone" type="text" name="phone"> </td>
</tr>
<tr>
<td>Address</td>
<td><input id="address" type="text" name="address"> </td>
</tr>
<tr>
<td>City</td>
<td><input id="city" type="text" name="city"> </td>
</tr>
<tr>
<td>State</td>
<td class="selection">
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</td>
<tr>
<td>Zip </td>
<td><input id="zip" type="text" name="zip"> </td>
</tr>
<tr>
<td>Birthdate</td>
<td><input id="birthdate" type="text" name="birthdate"> </td>
</tr>
<tr>
<td>Username</td>
<td><input id="user" type="text" name="userName"> </td>
</tr>
<tr>
<td>Password</td>
<td><input id="pass" type="text" name="password"> </td>
</tr>
<tr>
<td>Sex</td>
<td><input name="sex" type="radio" checked="checked" value="Male"> Male
<input name="sex" type="radio" id="mypassword" value="Female"> Female
</td>
</tr>
<tr>
<td>Relationship</td>
<td><input id="relation" type="text" name="relationship"> </td>
</tr>
</table>
<input type="submit" name="submit" value="insert">
<input type="submit" name="update" value="update">
<input type="submit" name="search" value="search">
</form>
</body>
</html>

First of all document.getElementById.firstName should be changed to document.getElementById("firstName").
This part of code:
console.log(nameExp.test(document.getElementById("firstName").value));
if (!nameExp.test(document.getElementById("firstName").value)) {
alert("You need to enter a valid name");
document.getElementById("firstName").focus();
return false;
}
should be added just after var nameExp = /^[a-zA-Z]+$/; because the function returns false/true for if/else condition (if (relation.value == "")) and the code underneath it will never be called.
Moreover it's not common to use parenthesizes for return - Just use return true; or return false;
Also as #NeatNit said, you should use the proper onSubmit attribute for the form like so: onSubmit="return validate();".

The problem is that your return value is not actually going anywhere. Change:
<form id="form" onSubmit="validate();" action="" method="post">
Into:
<form id="form" onSubmit="return validate();" action="" method="post">

Related

Is there any way i can make my function add a row to my table?

im having issues with my code not inserting the information into my table, im new to programming and when i click the add button it should in my opinion insert the new information into the table. It seems like its inserting but it doesnt show on my screen or in the table. Im trying to make a table that can insert my schoolbooks into a table.
any tips or tricks?
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Semester Books</h2>
<table id="schoolBooks">
<tr>
<th>Title</th>
<th>Year</th>
<th>E-book</th>
</tr>
<tr>
<td>Programming Language</td>
<td>2018</td>
<td>yes</td>
</tr>
<tr>
<td>Database Systems</td>
<td>2000</td>
<td>yes</td>
</tr>
<tr>
<td>Algorithms and Data Structure</td>
<td>1995</td>
<td>no</td>
</tr>
<tr>
<td>Programming in C++</td>
<td>1999</td>
<td>no</td>
</tr>
<tr>
<td>Compiler Design</td>
<td>2018</td>
<td>yes</td>
</tr>
</table>
<br>
<form onsubmit="addRow();return false">
<div>
<label for="title">Title:</label>
<input type="text" id="aTitle" name="user_title" required="required" pattern="[A-Za-z0-9]{1,20}">
</div>
<br>
<div>
<label for="name">Year:</label>
<select name="dropdown" id="aYear" name="user_year">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<br>
<div>
<label for="mail">E-Book</label>
<br>
<input type="radio" id="aYes" name="user_points" value="yes"> Yes<br>
<input type="radio" id="bNo" name="user_points" value="no"> No <br>
</div>
<button type="submit"> Add </button>
</form>
<script>
function addRow() {
var table =
document.getElementById("schoolBooks");
var row = table.insertrow(-1);
var title = row.insertCell(0);
var year = row.insertcell(1);
var ebook = row.insertCell(2);
var ebookValue = getRadioVal();
var titleValue = document.getElementById("aTitle").value;
var yearValue = document.getElementById("aYear").value;
title.innerHTML = titleValue;
year.innerHTML = yearValue;
ebook.innerHTML = ebookValue;
}
function getRadioVal() {
var ebookValue = "";
if (document.getElementById("aYes").checked) {
pointValue = document.getElementById("aYes").value;
} else if (document.getElementById("bNo").checked) {
pointValue = document.getElementById("bNo").value;
}
return ebookValue;
}
</script>

First issue ->
// You had to use e.preventDefault() to prevent the page
from reloading when submitting the form
Second issue -> "insertrow" should be "insertRow" and "insertCell" should be "insertCell".
Code after correction:
<h2>Semester Books</h2>
<table id="schoolBooks">
<tr>
<th>Title</th>
<th>Year</th>
<th>E-book</th>
</tr>
<tr>
<td>Programming Language</td>
<td>2018</td>
<td>yes</td>
</tr>
<tr>
<td>Database Systems</td>
<td>2000</td>
<td>yes</td>
</tr>
<tr>
<td>Algorithms and Data Structure</td>
<td>1995</td>
<td>no</td>
</tr>
<tr>
<td>Programming in C++</td>
<td>1999</td>
<td>no</td>
</tr>
<tr>
<td>Compiler Design</td>
<td>2018</td>
<td>yes</td>
</tr>
</table>
<br>
<form id="main_form">
<div>
<label for="title">Title:</label>
<input type="text" id="aTitle" name="user_title" required="required" pattern="[A-Za-z0-9]{1,20}">
</div>
<br>
<div>
<label for="name">Year:</label>
<select name="dropdown" id="aYear" name="user_year">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<br>
<div>
<label for="mail">E-Book</label>
<br>
<input type="radio" id="aYes" name="user_points" value="yes"> Yes<br>
<input type="radio" id="bNo" name="user_points" value="no"> No <br>
</div>
<button type="submit"> Add </button>
</form>
JS:
<script>
document.getElementById("main_form").onsubmit = function(e){
e.preventDefault();
addRow();
}
function addRow() {
var table = document.getElementById("schoolBooks");
var row = table.insertRow(-1);
var title = row.insertCell(0);
var year = row.insertCell(1);
var ebook = row.insertCell(2);
var ebookValue = getRadioVal();
var titleValue = document.getElementById("aTitle").value;
var yearValue = document.getElementById("aYear").value;
title.innerHTML = titleValue;
year.innerHTML = yearValue;
ebook.innerHTML = ebookValue;
}
function getRadioVal() {
var ebookValue = "";
if (document.getElementById("aYes").checked) {
pointValue = document.getElementById("aYes").value;
} else if (document.getElementById("bNo").checked) {
pointValue = document.getElementById("bNo").value;
}
return ebookValue;
}
</script>

validating all the html rows when the form is submitted

I am working on the html table where user can enter the details and click on submit button to submit the data to the backend.
I have 3 mandatory columns (Spring,Role,Project) which are mandatory to enter by the user before sending to the backend when clicked on submit button.
If user enters the data in first two rows and click on submit button, i want to validate if user has entered data in mandatory fields Sprint,Role and Project for each row and
if user has missed to enter data in mandatory fields then i want to show error message near that row saying "Please enter the mandatory fields". I am confused as how to show error message for each row if user has not entered data in the
madatory fields when user click on submit button after entering data in first 3 rows. Any inputs would be helpful.
I have total of 6 rows where user can enter details in all or few of them and click on submit button. Only i need to validate the rows and show error message near each row which has missing data in the mandatory fields.
Demo link : https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview
Sample html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function submitData(){
alert("submit");
}
</script>
</head>
<body>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="sid" value=""></td>
<td>
<select class="sprint" >
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project" >
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">

check if all data entered or not then the rest data is entered partially
if (sprint && role && project) {.....}
else if (!sprint && !role && !project) {} // do nothing
else {....}
Demo:
function submitData() {
var dataPassed = false,
dataCount = 0,
hasEnteredData = false;
$('#productTable tr:not(:first)').each(function(index) {
var sprint = $(this).find('.sprint :selected').text(),
role = $(this).find('input[name="role"]').val(),
project = $(this).find('.project :selected').text();
if (sprint && role && project) {
dataPassed = true
dataCount++;
}
else if (!sprint && !role && !project) {
// all empty, skip
}
else {
alert('Required data missing in row: ' +
(index + 1) + '\nfill: Sprint, Role, Project')
dataPassed = false;
hasEnteredData = true;
return false;
}
})
if (dataPassed) {
alert('Success, Data count: ' +
dataCount + ' rows, submit?');
// do submit
}
else if (!hasEnteredData) {
alert('No data entered')
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productTable" border="1">
<tr>
<th>SID</th>
<th>Sprint <span style="color:red;">*</span></th>
<th>Role<span style="color:red;">*</span></th>
<th>Comments</th>
<th>Project<span style="color:red;">*</span></th>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" name="sid" value="">
</td>
<td>
<select class="sprint">
<option value=""></option>
<option value="">121.1</option>
<option value="">121.2</option>
<option value="">121.3</option>
<option value="">122.1</option>
<option value="">122.2</option>
</select>
</td>
<td>
<input type="text" name="role" value="">
</td>
<td>
<input type="text" name="Comments" value="">
</td>
<td>
<select class="project">
<option value=""></option>
<option value="">ProA</option>
<option value="">ProB</option>
<option value="">ProC</option>
<option value="">ProD</option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" value="submit" onclick="submitData()">

Don't submit unless all data is entered

I have a function for a registration page where if the data required isn't entered by the user then it alerts the user to fill it in. The form still submits the information though so not sure what I'm doing wrong. I want it to not submit until all data is submitted and correct.
function checkdetails()
{
if (document.form1.txtname.value == "")
{alert("Please fiill in your forename.");
}
if (document.form1.txtsurname.value == "")
{alert("Please fill in your surname.");
}
if (document.form1.txtusername == "")
{alert("Please create a username.");
}
if (document.form1.DOBDay.selectedIndex == 0)
{alert("Please select the day you were born.");
}
if (document.form1.DOBMonth.selectedIndex == 0)
{ alert("Please select the month you were born");
}
if (document.form1.DOBYear.selectedIndex == 0)
{alert("Please fill in the year you were born.");
}
if (document.form1.txtemail.value == "")
{alert("Please enter your e-mail address.");
}
if (document.form1.terms.checked == false)
{alert("Please tick that you have read the Terms and Conditions.");
}
}
<form action="Home.html" method="post" name="form1" onsubmit="Display()">
<table bgcolor="white" width="700" border="0" align="center">
<col width="200">
<col width="200">
<tr>
<th colspan = "2" align = "center" bgcolor="grey"> Fill the form to sign up. </th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Forename*</td>
<td>Surname*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtname" id="txtname" class="info" />
<td><label>
<input type="text" name="txtsurname" id="txtsurname" class="info" />
</label></td>
</tr>
<tr>
<td> Create Username*</td>
<td> Birthday</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtusername" id="txtusername" class="info"/>
</label></td>
<td><select name="DOBMonth">
<option> Month </option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay">
<option> Day </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="DOBYear">
<option> Year </option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
<tr>
<td>Email*</td>
<td>Confirm Email*</td>
</tr>
<tr>
<td><label>
<input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" />
<td><label>
<input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)"/>
</label></td>
</tr>
<tr>
<td>Password*</td>
<td>Confirm Pasword*</td>
</tr>
<tr>
<td><label>
<input type="password" name="txtpassword" id="txtpassword" class="info"/>
<td><label>
<input type="password" name="txtpassword2" id="txtpassword2" class="info"/>
</label></td>
</tr>
<td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="checkbox" name="terms" value="terms" id="terms" />
I agree to the Terms and Conditions</label>
</td></tr>
<br><br><br>
<tr>
<td colspan="2"><label>
<input type="checkbox" name="notify" value="notify" id="notify" />
I want to receive notifications by text/email about new products in stock.</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails()" />
</label></td>
<td><label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>

it's better to use html5 attribute required !
<input type="text" name="input" required >

return false; should prevent it from performing it's action.
<form name="testForm" onsubmit="return validate();">
<script type="text/javascript">
function validate()
{
if(check if your conditions are not satisfying)
{
alert("validation failed false");
returnToPreviousPage();
return false;
}
alert("validations passed");
return true;
}
</script>
However, as stated in answer above, html5 required attribute is best practice. You will need to consider more than just empty fields though. For example, will need to regex check your email field, etc.
http://www.html5-tutorials.org/form-validation/validating-email/

javascript- update total with discount button

/*hey. i have a order site where you can order a hotelroom. Depending on how many persons that are staying and how long you get a total price in a box. But how do I get that if you check the member button you get a discount of 20% of the total order. */
orderingsite
var prices = new Object();
function updateTotal () {
var total = 0.00;
for (var price in prices) {
total += parseInt(prices[price]);
}
document.getElementById("medlem").value=updateTotal;
document.getElementById("total").value = total;
}
function doClear()
{
document.AddressForm.customer.value = "";
document.AddressForm.adress.value = "";
document.AddressForm.city.value= "";
document.AddressForm.zip.value = "";
document.AddressForm.phone.value= "";
document.AddressForm.email.value= "";
document.ComputerForm.cases[0].checked = false; //nullstiller alle verdier fra start
document.ComputerForm.cases[1].checked = false;
document.ComputerForm.cases[2].checked = false;
document.ComputerForm.monitors[0].checked = false;
document.ComputerForm.monitors[1].checked = false;
document.ComputerForm.monitors[2].checked = false;
document.ComputerForm.faces[0].checked = false;
document.ComputerForm.faces[1].checked = false;
document.ComputerForm.faces[2].checked = false;
document.ComputerForm.dager[1].checked = false;
document.ComputerForm.dager[2].checked = false;
document.ComputerForm.dager[3].checked = false;
document.ComputerForm.dager[4].checked = false;
document.ComputerForm.dager[5].checked = false;
document.ComputerForm.dager[6].checked = false;
document.ComputerForm.pers[1].checked = false;
document.ComputerForm.pers[2].checked = false;
document.ComputerForm.pers[3].checked = false;
document.ComputerForm.pers[4].checked = false;
document.ComputerForm.pers[5].checked = false;
document.ComputerForm.pers[6].checked = false;
return;
}
//function totalPrice()
//{
// var t1 = document.ComputerForm.cases.selected.value;
// var t2 = document.ComputerForm.monitors.selected.value;
// var t3 = document.ComputerForm.printers.selected.value;
// var total = document.AddressForm.total.value;
// total.value = t1.value + t2.value + t3.value;
// }
</script>
<h1 align="center">ordering site</h1> <table border="black" cellpadding="10px" align="center"> <tr> <td>
<table cellpadding="10px">
<form name="ComputerForm">
<tr>
<td>
<strong>Member?</strong></br>
<input type="radio" name="cases" value="0" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> member </br>
<input type="radio" name="cases" value="0" onchange="javascript:prices['cases'] = this.value; updateTotal();" /> not a member </br>
</td>
<td>
<tr>
<td>
<strong>Hotelroom</strong> <br/>
<input type="radio" name="monitors" value="250.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> singelrooom </br>
<input type="radio" name="monitors" value="500.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> double room </br>
<input type="radio" name="monitors" value="1000.00" onchange="javascript:prices['monitors'] = this.value; updateTotal();" /> Suite </br>
</td>
<tr>
<td>
<strong> clean up</strong></br>
<input type="radio" name="faces" value="500" onchange="javascript:prices['faces'] = this.value; updateTotal();" /> clean up - + 500,-NOK </br>
<input type="radio" name="faces" value="0" onchange="javascript:prices['faces'] = this.value; updateTotal();" /> wash your self - 0,-NOK </br>
</td>
</tr>
<b><strong>weeks</strong></b>
<select name="dager" id="dagerid" onchange="javascript:prices['dager'] = this.value; updateTotal();" />
<option value="1000" >1</option>
<option value="2000">2</option>
<option value="3000">3</option>
<option value="4000">4</option>
<option value="5000">5</option>
</select>
<br>
<br>
<b><strong>Ant. personer:</strong></b>
<select name="pers" id="persid" onchange="javascript:prices['pers'] = this.value; updateTotal();" />
<option value="1000">1</option>
<option value="2000">2</option>
<option value="3000">3</option>
<option value="4000">4</option>
<option value="5000">5</option>
</select>
<br>
<br>
<b><strong>Avreise fra;</strong></b>
<select name="antpersoner" id="antpersoner" onchange="priceChange(this);">
<option value="1">Gardermoen</option>
<option value="2">Værnes</option>
<option value="3">Stokmarknes international airport</option>
<option value="4">Rygge</option>
<option value="5">Torp</option>
</select>
<br>
<br>
<b>Avreisedato:</b>
<select name="dag" id="dag">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="mnd" id="mnd">
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
<option value="Januar">Januar</option>
<option value="Februar">Februar</option>
<option value="Mars">Mars</option>
</select>
<select name="år" id="år">
<option value="2011">2013</option>
<option value="2012">2014</option>
<option value="2013">2015</option>
</select>
</form>
</table> </td> <td>
<table padding="10px">
<tr>
<form name="AddressForm">
Total price is:
</td>
<td>
NOK<input type="text" name="total" readonly value="0.00" size="8" id="total">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
Navn:
</td>
<td>
<input type="text" name="kunde" placeholder="Skriv inn fullt Navn" required />
</td>
</tr>
<tr>
<td>
birthdate:
</td>
<td>
<input type="number" name="birthdate" placeholder=" DD:MM:ÅR " required />
</td>
</tr>
<tr>
<td>
adress:
</td>
<td>
<input type="text" name="adress" placeholder="your adress " required />
</td>
</tr>
<tr>
<td>
zip:
</td>
<td>
<input type="text" name="poststed" placeholder="Skriv inn inn postedet ditt" required />
</td>
</tr>
<tr>
<td>
city:
</td>
<td>
<select name="kommune" >
<option value=""></option>
<option value="ST">Sør trøndelag</option>
<option value="OS">Oslo</option>
<option value="NL">Nordland</option>
<option value="SF">Sandefjord</option>
</select>
</td>
</tr>
<tr>
<td>
number:
</td>
<td>
<input type="text" name="phone" placeholder="write ur number" />
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type="text" name="email" placeholder="your email">
</td>
</tr>
</form>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<input type="button" value="order" onClick="doSubmit()" />
</td>
<td>
<input type="button" value="clear" onClick="doClear()" />
</td>
</tr>
</table> </td> </tr> </table>
<!-- side -->
<div class="side2">
<div id="undertekst">
<p> Undertekst / nyttige lenker </p>
</div>
</body>

Calculation Percentage Remainder

I am trying to auto calculate the remainder percentage from 4 dropdown select option. This is the code I have so far, but I can't seem to get it to work. After the calculation, the undeveloped percentage should be the total percentage added up minus 100%. For example, if each of the 4 had 10% used, the Undeveloped would be 60%. Any help is much appreciated.
<html>
<head>
<title>Calculation</title>
<script language="javascript" type="text/javascript">
function calcPercentUseSum(){
var Percent1 = document.getElementsByName("SingleFamilyUsePercent");
var strUser = Percent1.options[Percent1.selectedIndex].value;
var Percent2 = document.getElementsByName("MultifamilyUsePercent");
var strUser = Percent2.options[Percent2.selectedIndex].value;
var Percent3 = document.getElementsByName("CommericalUsePercent");
var strUser = Percent3.options[Percent3.selectedIndex].value;
var Percent4 = document.getElementsByName("IndustrialUsePercent");
var strUser = Percent4.options[Percent4.selectedIndex].value;
document.getElementsByName("Undeveloped").value = Percent1
+ Percent2
+ Percent3
+ Percent4;
}
</script>
</head>
<body>
<form method="post" action>
<table width="640">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<th rowspan="3" colspan="3" valign="bottom" align="left"> Present Use:</th>
</tr>
<tr>
<td style="height: 21px"> </td>
<td style="height: 21px"></td>
</tr>
<tr>
<th colspan="3" align="left" style="height: 18px"> </th>
</tr>
<tr>
<td style="height: 25px"> </td>
<td colspan="2" style="height: 25px"> </td>
<td style="height: 25px">Single Family</td>
<td style="height: 25px"><select size="1" name="SingleFamilyUsePercent"
onchange="calcPercentUseSum" value="Single Family" tabindex="92">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Multifamily</td>
<td><select size="1" name="MultifamilyUsePercent" onchange="calcPercentUseSum"
value="Multifamily" tabindex="93">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Commericial</td>
<td><select size="1" name="CommericalUsePercent" onchange="calcPercentUseSum"
value="Commericial" tabindex="94">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Industrial</td>
<td><b>
<select size="1" name="IndustrialUsePercent" onchange="calcPercentUseSum"
value="Industrial" tabindex="95" style="height: 21px">
<option value=""></option>
<option value="0%">0%</option>
<option value="5%">5%</option>
<option value="10%">10%</option>
<option value="15%">15%</option>
<option value="20%">20%</option>
<option value="25%">25%</option>
<option value="30%">30%</option>
<option value="35%">35%</option>
<option value="40%">40%</option>
<option value="45%">45%</option>
<option value="50%">50%</option>
<option value="55%">55%</option>
<option value="60%">60%</option>
<option value="65%">65%</option>
<option value="70%">70%</option>
<option value="75%">75%</option>
<option value="80%">80%</option>
<option value="85%">85%</option>
<option value="90%">90%</option>
<option value="95%">95%</option>
<option value="100%">100%</option>
</select></b></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td>Undeveloped</td>
<td><input name="Undeveloped" readonly="readonly" type="text" /></td>
</tr>
</table><br />
<input type="submit" value="Save Form" name="tbSubmit" tabindex="253" />
</form>
</body>
</html>

Take a look at your function. You're fetching the proper value from each of the <select> options, but then you're storing the result in a variable called strUser which you've [re]declared 4 times. You're overwriting the value, and then not even using it.
You're trying to sum (using +) the actual HTML <select> elements, rather than the selected values you're (trying) to pull out.
Assign the values to separate variables, and then cast them to integers. I would remove the "%" sign off the value attributes in your HTML so they're easier to work with. Once you've done that then you essentially just have to do
var Percent1 = document.getElementsByName("SingleFamilyUsePercent")[0];
var Value1 = Percent1.options[Percent1.selectedIndex].value;
var Percent2 = document.getElementsByName("MultifamilyUsePercent")[0];
var Value2 = Percent2.options[Percent2.selectedIndex].value;
...
var Total = parseInt(Value1) + parseInt(Value2);
var Remainder = 100 - Total;
document.getElementsByName("Undeveloped")[0].value = Remainder;
I put [0]s on there because (I'm pretty sure) getElementsByName returns a list of elements, rather than a single one. Really, you should prefer to give your inputs ID attributes and then use getElementById instead.

Here is a working example that builds on some of the suggestions mentioned in previous answers:
http://jsfiddle.net/wdqgF/
JavaScript
calcPercentUseSum = function () {
var Use1 = document.getElementById("SingleFamilyUsePercent"),
Use2 = document.getElementById("MultifamilyUsePercent"),
Use3 = document.getElementById("CommericalUsePercent"),
Use4 = document.getElementById("IndustrialUsePercent");
var Perc1 = Use1.options[Use1.selectedIndex].value,
Perc2 = Use2.options[Use2.selectedIndex].value,
Perc3 = Use3.options[Use3.selectedIndex].value,
Perc4 = Use4.options[Use4.selectedIndex].value;
function cleanVal(n) {
// You do not want to call parseInt on an empty string "".
// parseInt("") will return NaN,
// and NaN plus a number will return NaN.
// e.g., "NaN + 5 + 10 + 20" returns NaN. Avoid this.
if (n === "") {
return 0;
} else {
return parseInt(n, 10);
}
}
var sumPerc = cleanVal(Perc1) + cleanVal(Perc2) + cleanVal(Perc3) + cleanVal(Perc4);
var Total = function () {
if ( Perc1 === "" && Perc2 === "" && Perc3 === "" && Perc4 === "" ) {
// To cover the scenario where the user selects item(s),
// but then reverts all items back to their first/empty option
return "";
} else if ( sumPerc > 100 ) {
// To cover the case where the Present Use Totals exceed 100%.
return "0%";
} else {
return (100 - sumPerc) + "%";
}
};
document.getElementById("Undeveloped").value = Total();
};
Note how in each <select>, an id is now present.
sample from altered HTML
<select size="1" name="SingleFamilyUsePercent" id="SingleFamilyUsePercent"
onchange="calcPercentUseSum()" value="Single Family" tabindex="92">
<option value=""></option>
<option value="0">0%</option>
...

Develop Reference

JavaScript is the programming language of the Web.

Form validation with javascript reg expression - javascript

The problem is that your return value is not actually going anywhere. Change: <form id="form" onSubmit="validate();" action="" method="post"> Into: <form id="form" onSubmit="return validate();" action="" method="post">

Related

Is there any way i can make my function add a row to my table?

validating all the html rows when the form is submitted

Don't submit unless all data is entered

javascript- update total with discount button

Calculation Percentage Remainder

Categories

Resources