I have written an ASP page with javascript for validating a form, then to have it redirect (form.action) to another page but it just reloads the page. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- InstanceBegin template="/Templates/nirsaplate_forms.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="Title/Keywords" -->
<title>TED CEU/PIC Tracking System</title>
<meta name="keywords">
<script type="text/javascript">
var typesAndCovered={};
typesAndCovered['CEU']=['Philosphy & Theory','Programming','Management Techniques','Business Procedures','Facility Management, Planning & Design','Research & Evaluation','Legal Liability & Risk Management','Personal & Professional Qualities'];
typesAndCovered['PIC']=['Leadership, governance and service','Education, training, scholarship and research'];
function ChangeTypeList()
{
var typeList=document.getElementById("Atype");
var coveredList=document.getElementById("typecovered");
var selType=typeList.options[typeList.selectedIndex].value;
while (coveredList.options.length)
{
coveredList.remove(0);
}
var types=typesAndCovered[selType];
if (types)
{
for (var i=0;i<types.length;i++)
{
var Atype=new Option(types[i],i);
coveredList.options.add(Atype);
}
}
}
</script>
<script type="text/javascript">
<!--
function validateForm(form) {
if (form.Atype.value == "") {
alert("You must specify activity to track: CEU or PIC?");
form.Atype.focus();
return false;
}
if (form.DateEvent.value == "") {
alert("You must specify a date for this event.");
form.DateEvent.focus();
return false;
}
if (form.NameEvent.value == "") {
alert("You must specify a name for this event.");
form.NameEvent.focus();
return false;
}
if (form.NameSession.value == "") {
alert("You must specify a session name.");
form.NameSession.focus();
return false;
}
if (form.UnitsEarned.value == "") {
alert("You must specify how many units you earned.");
form.UnitsEarned.focus();
return false;
}
if (form.CEUPICType.value == "") {
alert("You must specify a CEU/PIC type.");
form.CEUPICType.focus();
return false;
}
if (form.TEDEvent.value == "") {
alert("You must specify if this was a TED event or not.");
form.TEDEvent.focus();
return false;
}
if (form.TypeCovered.value == "") {
alert("You must specify CEU Core Competency or PIC Category.");
form.TypeCovered.focus();
return false;
}
form.action = "display.asp";
form.submit();
return true;
}
//-->
</script>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="ChangeTypeList();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center" valign="middle" bgcolor="#000033">
<td> </td>
<td align="left" width="150"><a class="tedhome" href="http://www.ted.org"> TED Home</a></td>
<td id="tedtop" width="450" height="20"> </td>
<td width="150"></td>
<td> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top" bgcolor="#003399" height="60">
<td rowspan="2" colspan="2" height="80"><img src="images/ted_head_1.jpg" alt="TED" height="80" width="500" border="0"></td>
<td height="60"><img src="images/ted_head_2.jpg" alt="" height="60" width="250" border="0"></td>
</tr>
<tr valign="top" bgcolor="#003399" height="20">
<td id="toplinks" align="right" valign="middle" height="20"><p></p></td>
</tr>
<tr bgcolor="#e3e3e3">
<td colspan="3" align="center" height="20"><div id="tagline"> </div></td>
</tr>
<!-- Begin mainNav -->
<tr bgcolor="#003399">
<td colspan="3" height="20"> </td>
</tr>
<!-- End mainNav -->
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr align="left" valign="top">
<td>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr valign="top">
<td><!-- InstanceBeginEditable name="Content" -->
<div id="Content"><h1>TED CEU/PIC Tracking System</h1>
<p><font color="#cc0000">* Required field</font></p>
<form name="form" Method="post" onSubmit="return validateForm(form)">
<table width="650" border="0" cellspacing="1" cellpadding="3" align="center" bgcolor="gray">
<tr valign="top">
<td colspan="2" bgcolor="#FFCC66"><h4>CEU/PIC Details:</h4></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Activity to Track:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="Atype" id="Atype" onchange="ChangeTypeList();">
<option value="">-- Activity Type --</option>
<option value="CEU">CEU</option>
<option value="PIC">PIC</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">* </font>Date:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="DateEvent" type="text" class="ctrl" id="DateEvent" size="10" maxlength="10"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Event:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameEvent" type="text" id="NameEvent" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> Name of Educational Session:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="NameSession" type="text" id="NameSession" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEUs/PICs Earned:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="UnitsEarned" type="text" class="ctrl" id="UnitsEarned" size="50" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Type:</strong></p></td>
<td bgcolor="#FFFFFF"><input name="CEUPICType" type="text" id="CEUPICType" size="25" maxlength="255"></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> TED Event:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select name="TEDEvent" id="TEDEvent"><option value="Yes" selected>Yes</option><option value="No">No</option></select></p></td>
</tr>
<tr valign="top">
<td bgcolor="#e3e3e3"><p><strong><font color="#cc0000">*</font> CEU/PIC Core Competency/Category Covered:</strong></p></td>
<td bgcolor="#FFFFFF"><p><select id="typecovered"></select></p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFCC66"><p><br><b>Submit your CEU/PIC tracking.</b></p><p align="center"> </p></td>
</tr>
<tr valign="top">
<td colspan="2" align="center" bgcolor="#FFFFFF"><p><input type="submit" value="Submit Data" name="submit" ><input type="reset" name="reset" value="Reset"></p></td>
</tr>
</table>
</form>
</div>
<!-- InstanceEndEditable -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<!-- InstanceEnd -->
</html>
Any assistance would be very helpful.
Thank you.
My guess is that you're entering an endless loop, and that it causes a "stack overflow" error ;)
Try removing the form.submit(); after the for.action = ...
form.action = "display.asp";
// form.submit(); // this is what triggers validateForm again and again...
You used form.TypeCovered in function validateForm(form), but the actual id is typecovered (all lower cases), that would cause an exception, so that the function fails
Related
link for image i have written a code which sends invoice details via email after completing the order. but the issue is that when i am running this code in a file.php it is working fine and giving me all the value of variable and executing the while loop
But while mailing, the while() function is not getting execueted and the invoice details are appearing null in the email.
The mail consist of details of the shopping which the user had done.
function sentInvoice($conn,$oid)
{
$url="http://localhost/user/contactus.php";
$date=date('Y');
$nego=0;
$res=mysqli_query($conn,"select order_details.*,product.id,product.pname,orders.total_price from order_details inner join product on product.id=order_details.product_id inner join orders on orders.id=order_details.order_id where order_details.order_id='$oid'");
$row=mysqli_fetch_assoc(mysqli_query($conn,"select orders.*, ecom_users.id,ecom_users.fname,ecom_users.email from orders inner join ecom_users on ecom_users.id=orders.uid where orders.id='$oid'"));
$total=0;
$dateArr=explode(" ",$row['added_on']);
$order_date=$dateArr[0];
$html='<body>
<span class="preheader">This is an invoice for your purchase on '.$order_date.'.</span>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<!-- Email Body -->
<tr>
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<!-- Body content -->
<tr>
<td class="content-cell">
<div class="f-fallback">
<h1>Hi '.$row['fname'].',</h1>
<p>Thanks for using Our Website ShopHana. This is an invoice for your recent purchase.</p>
<table class="attributes" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="attributes_content">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="attributes_item">
<span class="f-fallback">
<strong>Amount:'.$row['total_price'].'</strong>
</span>
</td>
</tr>
<tr>
<td class="attributes_item">
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Action -->
<table class="purchase" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<h3>'.$oid.'</h3>
</td>
<td>
<h3 class="align-right">'.$order_date.'</h3>
</td>
</tr>
<tr>
<td colspan="2">
<table class="purchase_content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th class="purchase_heading" align="left">
<p class="f-fallback">Description</p>
</th>
<th class="purchase_heading" align="right">
<p class="f-fallback">Amount</p>
</th>
</tr>';
while($rem=mysqli_fetch_assoc($res))
{
$pid=$rem['product_id'];
$user_id=$row['uid'];
$a_query=mysqli_fetch_assoc(mysqli_query($conn,"select negotiate from addtocart where pid=$pid and uid=$user_id"));
$nego=$a_query['negotiate'];
echo $nego;
if($nego!=0)
{
$total=$total+$nego;
}
else
{
$total=$total+$rem['price'];
}
//this part is not showing up in the email
$html.='
<tr>
<td width="80%" class="purchase_item"><span class="f-fallback">'.$rem['pname'].'</span></td>
<td class="align-right" width="20%" class="purchase_item"><span class="f-fallback">'.$rem['price'].'</span></td>
</tr>';
}
$html.='<tr>
<td width="80%" class="purchase_footer" valign="middle">
<p class="f-fallback purchase_total purchase_total--label">Total</p>
</td>
<td width="20%" class="purchase_footer" valign="middle">
<p class="f-fallback purchase_total">'.$total.'</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>If you have any questions about this invoice, simply reply to this email or reach out to our support team for help.</p>
<p>Cheers,
<br>The ShopHana Team</p>
<!-- Sub copy -->
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="content-cell" align="center">
<p class="f-fallback sub align-center">©'.$date.' ShopHana All rights reserved.</p>
<p class="f-fallback sub align-center">
[SHOPHANA, LLC]
<br>1234 Street Rd.
<br>Suite 1234
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>';
include('smtp/PHPMailerAutoload.php');
$mail=new PHPMailer(true);
$mail->isSMTP();
$mail->Host="smtp.gmail.com";
$mail->Port=587;
$mail->SMTPSecure="tls";
$mail->SMTPAuth=true;
$mail->Username="somemail9245#gmail.com";
$mail->Password="passwords";
$mail->SetFrom("shophana2337#gmail.com");
$mail->addAddress($row['email']);
$mail->IsHTML(true);
$mail->Subject="Invoice Details";
$mail->Body=$html;
$mail->SMTPOptions=array('ssl'=>array(
'verify_peer'=>false,
'verify_peer_name'=>false,
'allow_self_signed'=>false
));
if($mail->send()){
return true;
}else{
return false;
}
}
My end goal with this project is to basically have a spreadsheet (really just a giant HTML table) with the contenteditable value set to true. The other thing I need is to be able to create an input box, and drag it anywhere on the screen, including on the spreadsheet. Right now, whenever I try to drag an input box, it gives me the little red circle with a line through it in the top right corner of the box, telling me that I can't drop it anywhere.
My HTML is so long because it's a huge spreadsheet, but with a couple hundred fewer rows, it basically looks like this:
$(document).ready(function() {
$("#addTileButton").click(function() {
$("body").append("<div id=draggable></div>");
var tile = $("<form><input id=tile draggable=true type=text> </form>");
$("#draggable").append(tile);
$("#tile").draggable();
});
});
td {
border: 1px solid black;
}
#tile {
cursor: move;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
<table cellspacing="0" border="0">
<colgroup width="509"></colgroup>
<colgroup span="5" width="166"></colgroup>
<tr>
<td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
</td>
<td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Afghanistan</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Albania</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
<tr>
<td height="32" align="left" valign=bottom>Algeria</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom><font color="#000000"><br></font>
</td>
<td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
</td>
</tr>
Thanks in advance!
EDIT - I don't need the generated element to be an input field. It just has to be an element that can have text in it.
Try making a droppable div
<div id="droppable">
...
</div>
And in Jquery
$("#droppable").droppable();
i have jsp page it have username and password.if we fill up username and password and click on submit button then the browser asks Remember password then click on that it stores username and password.i donot want to store username and password in browser.i have use the autocomplete=off in jsp .
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Login</title>
<script src="http://code.jquery.com/jquery-1.11.min.js"></script>
<script type="text/javascript">
function login(btnName)
{
if(window.document.indexFrm.userIdTxt.value=="")
{
alert("Enter User Id");
window.document.indexFrm.userIdTxt.focus();
return false;
}
if(window.document.indexFrm.pwdTxt.value=="")
{
alert("Enter Password");
window.document.indexFrm.pwdTxt.focus();
return false;
}else{
window.document.indexFrm.action = "../epay/abcd.jsp";
document.indexFrm.method='post';
window.document.indexFrm.submit();
}
}
</script>
</head>
<body topmargin="0" leftmargin="0" background="../images/background.gif" onLoad = 'window.document.indexFrm.userIdTxt.focus();'>
<div id="wrapper">
<form name="indexFrm" id="indexFrm" autocomplete="off" method="post">
<table width="971" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="15" style="padding-right:4">
<div align="right">
<table border="1" width="10%" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr>
<td width="50%" height="22" bgcolor="#3F9DE5">
<p align="center">Home </td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td width="100%" height="15"></td>
</tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table border="1" width="60%" bordercolor="#7CC8FA" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="newtexts">
<tr>
<td width="100%" bgcolor="#ABDCFC" colspan="2" height="20">
<p align="center" class="newhead">LOGIN</td>
</tr>
<tr>
<td width="100%" bgcolor="#D6EEFE" colspan="2" height="21"> </td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">User
Id </td>
<td width="58%" bgcolor="#D6EEFE"><input type="text" name="userIdTxt" size="20" autocomplete="off"></td>
</tr>
<tr>
<td width="42%" bgcolor="#D6EEFE" align="right">Password
</td>
<td width="58%" bgcolor="#D6EEFE"><input type=password name="pwdTxt" id="pwdTxt" size="20" autocomplete="off"></td>
</tr>
<td width="100%" colspan="2"><input name="stdSubBtn" type="button" class="newtexts" style="font-family: MS Sans Serif; font-size: 8pt; font-weight: bold" onClick = 'login(this.name);' ></td>
</table>
<input type="hidden" name="frmName" value="indexFrm">
</form>
</div>
</body>
</html>
Autocomplete works on HTML5.0, I think you are using below to that, just change your doctype tag to
<!DOCTYPE html>
Then try.
I was wondering if I can pass the tables on the webpage to the body of the email. I was wondering if this was possible and if so point me in the right direction
My Button:
<input type="submit" value="SUBMIT EMAIL TO: GNOC" <a
href="mailto:myemail#whatever.com">
Table:
<table cellpadding="4" cellspacing="0"
border="0" width="100%">
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
colspan="3" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:Header" ID="Header"
FrameType="TitleBarOnly"/> </td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
rowspan="4" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:LeftColumn" ID="LeftColumn"
FrameType="TitleBarOnly"/> </td>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row1" ID="Row1"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
rowspan="4" valign="top" height="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:RightColumn" ID="RightColumn"
FrameType="TitleBarOnly"/> </td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row2" ID="Row2"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row3" ID="Row3"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
valign="top" height="100%"> <WebPartPages:WebPartZone
runat="server" Title="loc:Row4" ID="Row4"
FrameType="TitleBarOnly" Orientation="Horizontal"/>
</td>
</tr>
<tr>
<td
id="_invisibleIfEmpty" name="_invisibleIfEmpty"
colspan="3" valign="top" width="100%">
<WebPartPages:WebPartZone runat="server"
Title="loc:Footer" ID="Footer"
FrameType="TitleBarOnly"/> </td>
</tr>
<script
language="javascript">if(typeof
(MSOLayout_MakeInvisibleIfEmpty) == "function")
{MSOLayout_MakeInvisibleIfEmpty();}</script>
</table>
Goal: Import table from webform into email body
It isn't possible.
However, why don't you use an ajax call to send all the information in a table as if it were a form? On the separate php document you call to, use PHP's mail functionality (http://php.net/manual/en/function.mail.php)
for example:
<form type="POST">
<table> <!-- This is your table -->
<tr>
<td>
Username
</td>
<td>
<input type="text" name="username" value="whateveruserentered" />
</td>
</tr>
<table>
So in the ajax method, you'd send username through. Then in the php page you called you'd say
<table>
<tr>
<td>
Username
</td>
<td>
<?php echo $_POST['username']; ?>
</td>
</tr>
<table>
So you're recreating the table.
Put all of that in the body of the mail property, and off it goes. Fully fledged table just like on the original page.
In order to send the templated information you want to?
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>