I am creating a loan calculator for my website with Javascript Code and the website is https://www.usawebcash.com/missouri-installment-loans. I am getting issues with the coding of this loan calculator in Javascript. I want help for this code and the code is following:
<script language="JavaScript">
<!--
function showpay() {
if ((document.calc.loan.value == null || document.calc.loan.value.length == 0) ||
(document.calc.months.value == null || document.calc.months.value.length == 0) ||
(document.calc.rate.value == null || document.calc.rate.value.length == 0)) {
document.calc.pay.value = "Incomplete data";
} else {
var princ = document.calc.loan.value
var term = document.calc.months.value
var intr = document.calc.rate.value / 1200
document.calc.pay.value = princ * intr / (1 - (Math.pow(1 / (1 + intr), term)));
}
// payment = principle * monthly interest/(1 - (1/(1+Interest of Month)*Months))
}
// -->
</script>
Calculate button. Clicking the Reset button will clear all values
<p>
<center>
<form name=calc method=POST>
<table width=60% border=0>
<tr>
<th bgcolor="#aaaaaa" width=50%><font color=blue>Description</font>
</th>
<tr bgcolor="#aaaaaa" width=50%><font color=blue>Data Entry</font>
</th>
</tr>
<tr>
<td bgcolor="#eeeee">Loan Amount</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=loan size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Loan Length in Months</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=months size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Interest Rate</td>
<td bgcolor="#aaeeaa" align=right>
<input type=text name=rate size=10>
</td>
</tr>
<tr>
<td bgcolor="#eeeee">Monthly Payment</td>
<td bgcolor="#eeaaaa" align=right><em>Calculated</em>
<input type=text name=pay size=10>
</td>
</tr>
<tr>
<td bgcolor="#aaeeaa" align=center>
<input type=button onClick='showpay()' value=Calculate>
</td>
<td bgcolor="#eeeeaa" align=center>
<input type=reset value=Reset>
</td>
</tr>
</table>
</form>
<font size=1>Enter only numeric values <br>
Non-numeric values will cause errors are not allowed
<p align="center"><font face="arial" size="-2">This free script provided by</font>
<br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font>
</p>
Related
Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.
Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>
<script>
function validate() {
var v1 = document.myform.ename.value;
var v2 = document.myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 && v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
</script>
</head>
<body bgcolor=black>
<form name="myform" onsubmit="validate">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%"><font size="5"> Login</font></th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="Button" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2"><a href="register.html"> <font color=white>Register
Here</font>
</a></td>
</tr>
</table>
</div>
</form>
here i posted my code when i try to validate html page it doesn't give output what problem is in??
here i posted my code when i try to validate html page it doesn't give output what problem is in??
You have a few things wrong in your code, I attached the corrected code below.
First you have to change the submit button from type="button" to type="submit"
Second try to do your on submit in javascript, that way you can pass e with the event info. Then you can use e.preventDefault(); to prevent the form from submitting.
Also, your boolean algebra was a little off. You had v2.length <= 4 && v2.length == "", but the && needs to be changed to an ||.
document.getElementById('myform').onsubmit = function(e) {
e.preventDefault();
validate();
}
function validate() {
var v1 = myform.ename.value;
var v2 = myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 || v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
<body bgcolor=black>
<form name="myform" id="myform">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%">
<font size="5"> Login</font>
</th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="submit" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2">
<a href="register.html">
<font color=white>Register Here
</font>
</a>
</td>
</tr>
</table>
</div>
</form>
I hope that this helps you! If you don't understand please ask, and I will help you.
Your button needs to be type submit and also as Mike stated it needs to be onsubmit="validate()".
function validate() {
var v1 = document.myform.ename.value;
var v2 = document.myform.eid.value;
if (v1 == "" || v1 == null) {
alert("enter the user name");
}
if (v2.length <= 4 && v2.length == "") {
alert("enter the pwd greater then 4 character");
}
}
<form action="#" name="myform" onsubmit="validate()">
<div>
<table border="1">
<tr>
<th colspan="2" width="100%">
<font size="5"> Login</font>
</th>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" name="ename"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" name="eid"></td>
</tr>
<tr>
<td><input type="submit" value="Submit">
<td><input type="Reset" value="Reset"></td>
</tr>
<tr>
<td colspan="2">
<a href="register.html">
<font color=white>Register Here
</font>
</a>
</td>
</tr>
</table>
</div>
</form>
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
Fellas,
I have a javscript that calculates values defined in radio buttons. For a reason I can not figure out why the script skips a group. Its seems that the skipped group (by skipped I mean the selected value does not get added) correlates with the amount of radio buttons being used in each group.
I have been pulling my hair out on this one..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function setRadios()
{
function sumRadios(){
var total = 0, i = 0, oForm = this.form, e, len, j, c;
while(e=oForm.elements[i++]){
//This is probably the issue - Maybe it would be easier to manually define the names verses detecting them incrementally.
if(e.name.match(/^m4j-\d/)){
c=document.getElementsByName(e.name);
for(j=0;j<c.length;j++){
c[j].checked?total+=Number(c[j].value):null;
i++;
}
}
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
// Must define form name "m4jFrom"
var i = 0, input, inputs = document.getElementById('m4jForm').getElementsByTagName('input');
while (input = inputs.item(i++))
// This executes the sum onclick
if (input.name.match(/^m4j-\d/))
input.onclick = sumRadios;
}
onload = setRadios;
</script>
<style type="text/css"></style>
</head>
<body>
<form id="m4jForm" name="m4jForm" method="post" enctype="multipart/form-data" action="">
<table border="0" align="left" cellpadding="11" cellspacing="11" class="m4j_form_table">
<tbody>
<tr id="m4je-57" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-0" name="m4j-57" value="1" >
</input> 1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-1" name="m4j-57" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-61" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-0" name="m4j-62" value="1" >
</input>
1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-1" name="m4j-62" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-62" >
<td colspan="2" align="left" valign="top"><table border="3" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-0" name="m4j-63" value="1" >
</input>
1 No Calculation </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-1" name="m4j-63" value="2" >
</input>
2 if you remove this table the non calculation will move to the radios below</td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-63" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-0" name="m4j-64" value="1" >
</input>
1 </div></td>
</tr>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-1" name="m4j-64" value="2" >
</input>
2 </div></td>
</tr>
</tbody>
</table>
</div>
</div></td>
</tr>
<tr id="m4je-65" >
<td width="300" align="left" valign="top" >Total</td>
<td width="0px;" align="left" valign="top" >
<input class="m4jInputField" style="width: 100%;" id="m4j-65" name="m4j-65" type="text" size="18" maxlength="60" value= "" alt="" ></input><br>
<input type="submit" name="submit" value="send" class ="m4j_submit" >
</input>
<input id="m4jResetButton" class ="m4j_reset" type="reset" name="reset" value="reset">
</input>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
I found the solution. I owe the board the info. I hope someone gets use out of it. :)
<script type="text/javascript">
function setRadios()
{
var inputs = document.getElementById('m4jForm').getElementsByClassName('m4jRadio');
function sumRadios(){
var total = 0,
oForm = this.form;
for(var x = 0; x < inputs.length; x++){
if (inputs[x].checked) total += parseInt(inputs[x].value);
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
for(var y = 0; y < inputs.length; y++){
inputs[y].onclick = sumRadios;
}
}
onload = setRadios;
</script>
I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.
I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.
If you can find something that works. THANK YOU SO MUCH!!
Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id='register' value="Register"disabled='disabled'></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>
Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation
<script type="text/javascript">
function passwordConfirm() {
var confirmPass = document.getElementById("confirmpassid").value
if(pass != confirmPass) {
alert("Mismatching passwords");
}
}
Try not to use this but if you want you may give it a try (jQuery would be good)
var els=[];
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(i=0; i<inputs.length;i++)
{
if(inputs[i].type=='text' || inputs[i].type=='password')
{
if(inputs[i].name!='fname' && inputs[i].name!='lname')
{
inputs[i].onkeyup=check;
els.push(inputs[i]);
}
}
}
}
function check()
{
var isValid=true;
for(i=0; i<els.length;i++)
{
if(!els[i].value.length)
{
isValid=false;
break;
}
else isValid=true;
}
var reg=document.getElementById('register');
if(isValid && matctValidInputs()) reg.disabled=false;
else reg.disabled=true;
}
function matctValidInputs()
{
var re=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
var ps=document.getElementById('mypassword');
var cps=document.getElementById('myconfirmpassword');
var snum=document.getElementById('mysnumber');
var mail=document.getElementById('myemail');
if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
return true;
else return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}
Before you test the demo:
Password must be 6 characters and match with confirm password.
The Sigma Number must be a number and minimum 6 digits.
Email must match a valid email (very basic regex)
No alerts/notifications given.
DEMO.
just copy and paste my code.there might be few things you might wanna improve.If it is so,let me know
<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' && email!='')
{
document.getElementById("register").disabled=false;
}
else
document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
{
alert("password missmatches");
return false;
}
}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">
</td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id="register" value="Register" disabled='disabled' "></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>