I have a Classic ASP application which uses a dynamic table to submit inventory information. All of my functions inside the jQuery script until I get down to the .submit() part. I am trying to check that an employee number is given as well as that there are no blank fields before the form is submitted. Any help?
Here's my form:
<form name="filter" id="theForm" method="GET" action="InventoryIssues.asp">
<table class="normsideBG" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td class="bigger headerBG" align="center" colspan=6>
<b>Inventory Issues</b>
</td>
</tr>
<tr class="norm">
<td>
</td>
</tr>
<tr class="norm">
<td class="norm" align ="right">
<b>Enter Employee Number: </b><input type="text" id="employeeNum" name="employeeNum" value = "<%=employeeNum %>" />
<select id="hiddenBox" name="hiddenBox" style="display: none" >
</select>
<input type="hidden" name="action" value="set_filter">
</td>
</tr>
<tr>
<td class="norm">
To add more records click 'Add New Record'. Submit when all records are completed.
<br />
<br />
<input style="text-align: right" type="hidden" name="hasValues" value="false" />
<center>
<button type="button" id="addRec">Add New Record</button>
<button type="button" id="delRec">Remove Last Record</button><br /><br />
<input type="submit" id="sub" name="submit" class="norm" value="Submit"/>
</center>
</td>
</tr>
</table>
<table id= "tb1" class="norm sideBG" name="recordTable" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td>
<b><u>PART #</u></b>
</td>
<td>
<b><u>LOCATION</u></b>
</td>
<td>
<b><u>QUANTITY</u></b>
</td>
<td>
<b><u>WHERE USED</u></b>
</td>
</tr>
<tbody class="theRow" id="theRow">
<tr>
<td class="norm">
<label id="partLabel" style="color : red;"></label>
<br />
<input type='text' name='txtbox0[]' id='txtbox0[]' onchange="javascript: changeLabel(this)" />
</td>
<td class="norm">
<select id="txtbox1[]" name="txtbox1[]" >
</select>
</td>
<td class="norm">
<input type='text' name='txtbox2[]' id='txtbox2[]' />
</td>
<td class="norm">
<input type='text' name='txtbox3[]' id='txtbox3[]' />
</td>
</tr>
</tbody>
</table>
</form>
Here is my jQuery
'<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var ctr = 0;
$("#addRec").click(function ()
{
var clone = $("#tb1 > tbody.theRow:last").clone();
clone.find("input").val("");
clone.insertAfter("#tb1 > tbody.theRow:last");
$("#hasValues").val(true);
});
$("#delRec").click(function ()
{
$("#tb1:last tbody.theRow:last").remove();
});
alert("at least this works");
$("form#theForm").submit(function(event)
{
var blankEmployeeNum;
var blankFields = false;
var inp = $("#employeeNum");
if (inp.val().length == 0 || inp.val() == Null)
{
alert("blank empoyee num");
blankEmployeeNum = true;
}
else
{
alert("the employee num has a value");
blankEmployeeNum = false;
}
$("#tb1 tr").each(function()
{
$("td", this).each(function()
{
var value = $(this).find(":input").val()
if (value.val().length == 0 || value.val() == Null)
{
alert("there's a blank field");
blankFields = true;
}
});
});
if (blankEmployeeNum)
{
alert("Please go back and enter an employee number before submitting.");
event.preventDefault();
}
else if (blankFields)
{
alert("One or more of the fields submitted were blank. Please go back and try again.";
event.preventDefault();
}
});
});
'
There is a script error
Update
alert("One or more of the fields submitted were blank. Please go back and try again.";
to
alert("One or more of the fields submitted were blank. Please go back and try again.");
You are missing the closing bracket.
Please note there are some more script errors too. Please resolve then by checking in console.
I have found out few for you like changeLabel is not a function etc. You really need to work a lot on the script. There are many errors.
You need to call event.preventDefault() at first inside the submit function, otherwise the event bubbles up and the form is submitted.
$("form#theForm").submit(function(event) {
event.preventDefault();
Related
I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...
You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.
You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />
change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">
Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.
Basically when a user clicks submit in my MVC 3 application.
I want to use jquery to check if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row.
and is not display an alert mgs or validation error.
Rough code attempt:
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
In the above MultiSubBtn is the id on my Submit btn.
and the cell I am trying to query id a
Still learning when it comes to jquery , here is the full html page.
I removed some elements to reduce page size.
<div id="tabs-1" style="position:relative; left:-12%;">
#using (Html.BeginForm("SentMultipleCalsToCustomer", "CalibrationViewer", FormMethod.Post))
{
#* This is the table that contains a single page of the paginated table of recent calibrations *#
<table id="all-calibrations" class="grid tracker-grid" style="width:77%">
<colgroup>
<col class ="" style="width:11%">
<col class="workno-data" style="width:13%">
<col class="equipmentId-data" style="width:8%">
<col class="equipmentDesc-data" style="width:12%">
</colgroup>
<thead>
<tr>
#* ADDED 20/08/2014 *#
<th>Select</th>
<th>Work<br />No.</th>
<th>ID</th>
<th>Description</th>
#* the customer column is only shown for LTS users since customer only see 1 customers data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<th style="width:15%;">Customer</th>
}
<th style="text-align: center; width:15%;">Cert</th>
</tr>
</thead>
<tbody>
#* iterate through each calibration shown on this page *#
#for (int index = 0; index < Model.Count(); index++)
{
#Html.HiddenFor(m => Model.ElementAt(index).CustomerName)
<tr>
#* The work number is a link to the calibration the work no. represents *#
<td><input type="checkbox" name="selectecals" value="#Model.ElementAt(index).Id"/></td>
<td>#Html.ActionLink("WN–" + #Html.DisplayFor(m => Model.ElementAt(index).Id), "Index", "CalibrationViewer", new { id = Model.ElementAt(index).Id }, null)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentID)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentDescription)</td>
#* once again only the lts user sees the customer column data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<td>#Html.DisplayFor(m => Model.ElementAt(index).CustomerName)</td>
}
#* if the calibration has an attachment display the name of the file,
else display the Upload button*#
#if (Model.ElementAt(index).CertName != null)
{
<td style="background-color:#33CC00; color:#fff;">#Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
}
else
{ // style="background-color:#5C9CCC" // ----- to allow for btn
<td id ="attBtn" class="file-uploader-attachment-Class"></td>
}
</tr>
<script type="text/javascript">
var CUST_NAME = '#Model.ElementAt(index).CustomerName';
</script>
}
</tbody>
</table>
if (Model.Count() != 0)
{
<div id="calibrationViewer-rightColumn" style="display:inline-block; position:absolute; top:8.5%; left:80%; width:20%">
#{Html.RenderPartial("StatusForm", InstrumentTracker.Common.Enums.Status.Finished_Calibration);}
<input type="submit" style="width:100%;" class="styledbutton" id="MultiSubBtn" value="Submit" />
<input type="hidden" name="customer" value="#ViewBag.CustomerName" />
<br /> <br />
<button class="styledbutton" style="width:100%;" onclick="window.location.href='/Tracker/Index'">Return to Main Tracker Page</button>
</div>
}
} #*end using form tag*#
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
$(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
createUploader($(this));
$(this).find('.qq-upload-list').css("margin", "0px")
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
});
}
});
You stated your problem as "if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row"
jsfiddle
This is a somewhat crude example, but see if this helps you any. It's a static table with input fields. If you enter data into column C and click the associated checkbox it finds the cell and changes the text color. If the cell is empty it changes the background color. Just to illustrate finding the cell and acting on its contents.
There are many ways (better ways than this no doubt) to do stuff like this, but the flow should be the same.
1) Find the checkboxes that are checked. var ch = $(":checked");
2) Iterate over collection of elements returned from your search ch.each(function () {}
a) determine what row you are currently looking at parentRow = $(this).closest('tr');(perhaps optional but that's how I do it)
b) find the cell in that row parentRow = $(this).closest('tr');and determine if it is "empty" based on your own criteria.
Personally, I don't hesitate to add classes data- elements or whatever is going to help me retrieve what I need later, so you'll note I added a class to that column's TD's as a convenience.
JQUERY
$(".checkbox").on("click", function () {
var ch = $(":checked");
var parentRow;
var cellInQuestion;
ch.each(function () {
parentRow = $(this).closest('tr');
cellInQuestion = $(parentRow).find(".C");
if (cellInQuestion.val() === "") {
cellInQuestion.css("background-color", "red");
} else {
cellInQuestion.css("color", "green");
}
});
});
HTML
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th style="color:green;">C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
</tbody>
</table>
I have a form that uses a jQuery system to verify the input. With the default way it works, if there are no errors, it will submit. I am pretty bad with JavaScript, so my question is:
How would I go about making this submit to the same page and put the inputs in the $_POST variable, so it can execute the PHP code to handle the data, while having the jQuery validation working?
What I've noticed:
The type for the submit button must be set to type="button" for the validator to work
Having the type set to button, makes the <form> not submittable
PHP Snippet to validate the input (see if it actually posted into the $_POST variable):
if(isset($_POST)){
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
echo $username."<br>".$email."<br>".$password;
}
The script for the form:
<form action="" method="post">
<table border=0 id="form" style="padding:10px;">
<tr>
<td>
Username
</td>
<td align=left>
<input name="username" type="text" size="20" jVal="{valid:function (val) { if (val.length < 3) return 'Invalid Name'; else return ''; }}">
</td>
</tr>
<tr>
<td>
Email address
</td>
<td align=left>
<input name="email" type="text" size="40" jVal="{valid:/^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:'Invalid Email Address'}" jValKey="{valid:/[a-zA-Z0-9._%+-#]/, cFunc:'alert', cArgs:['Email Address: '+$(this).val()]}">
</td>
</tr>
<tr>
<td>
Password
</td>
<td align=left>
<input name="password" id="password" type="password" jVal="{valid:function (val) { if (val.length < 4) return false; else return true; }, message:'Password of 4 or more characters required'}">
</td>
</tr>
<tr>
<td style="padding-right:20px;">
Verify password
</td>
<td align=left>
<input name="passwordconfirm" id="passwordVerify" type="password" jVal="{valid:function (val) { if ( val != eval('$(\'#password\').val()') ) return false; else return true; }, message:'Password and Verify Password Must Match'}">
</td>
</tr>
<tr>
<td>
<input type="hidden" name="antispam" value="banana" />
<script>
var antiSpam = function() {
if (document.getElementById("antiSpam")) {
a = document.getElementById("antiSpam");
if (isNaN(a.value) == true) {
a.value = 0;
} else {
a.value = parseInt(a.value) + 1;
}
}
setTimeout("antiSpam()", 1000);
}
antiSpam();
</script>
</td>
</tr>
<tr>
<td></td>
<td>
<input id="submitButton" type="button" value="Click here to register!" onClick="if ( $('#form').jVal({style:'blank',padding:8,border:0,wrap:false}) ){ this.form.submit;}">
</td>
</tr>
</table>
</form>
If needed, the files corresponding to the jVal system (validation) can be found here, but they are most likely not needed.
Thanks ahead
PS. Please do not go saying to "narrow down the problem", when I had it narrowed down and posted the specific code snippets, I was told to post the entire code, so here it is.
Use HTML5 validation and <input> types. Your browser can validate e-mail addresses better than you can, for example.
Drop the spam protection; it will prevent actual users from using your page. Use reCAPTCHA.
Don’t use tables for layout. Please? At the very least, use CSS instead of the align attribute.
Don’t assume that everyone’s name is at least three characters long.
<form method="POST">
<table border="0" id="form" style="padding: 10px;">
<tr>
<td>
Username
</td>
<td align="left">
<input name="username" type="text" size="20" required />
</td>
</tr>
<tr>
<td>
Email address
</td>
<td align="left">
<input name="email" type="email" size="40" required />
</td>
</tr>
<tr>
<td>
Password
</td>
<td align="left">
<input name="password" id="password" type="password" required />
</td>
</tr>
<tr>
<td style="padding-right:20px;">
Verify password
</td>
<td align="left">
<input name="passwordconfirm" id="password-confirm" type="password" required />
</td>
</tr>
<tr>
<td></td>
<td>
<button>Click here to register!</button>
</td>
</tr>
</table>
</form>
How would I go about making this submit to the same page and put the
inputs in the $_POST variable, so it can execute the PHP code to
handle the data, while having the jQuery validation working?
You can post to the same page using PHP_SELF. Move the id from your table and add it to your form and use it to submit your form in the javascript code
<form id='form' action="<?php print $_SERVER['PHP_SELF'] ?>" method="post">
$('#form').submit() //instead of this.form.submit();
Also, instead of isset($_POST) you should use
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
}
First off my apologies for how disgusting this code is, it is not my choice by far, following orders from my boss and others in my team have never done anything web before. Really isn't good to miss the start of a project!
Basically I want to validate a couple of inputs before progressing to the next page via a submit button. There is no form in use so I am trying to use onClick for the submit button to launch the validate function. Can anybody see what is wrong with the code below (other than it being awful, from the standpoint of getting it to work as wanted.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- #include file="includes/header.asp" -->
<Center>
<tr>
<td width="100%" height="300" align="center">
<table width="100%" id="table01">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">Password Reset</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please select one of the methods below to reset your password.
<br><br>
<form name="radioq"align="center">
<input type="radio" name="levels" value="level1" onClick="get_radio_value(1);"/> E-mail a new password<br />
<input type="radio" name="levels" value="level2" onClick="get_radio_value(2);"/> Answer secret question<br/>
</form>
<!-- Javascript to handle which table loads below based on radio selection -->
</font>
</td>
</tr>
</table>
<table width="100%" class="table01" id="level1" style="display:none;">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">E-mail Address</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please enter your e-mail address and surname.
<br/><br/>
<font class="table_grey">E-mail Address: </font>
<input id="emailinput" size="20" type="text" value="" name="emailinput" />
<br/><br/>
<font class="table_grey">Surname: </font>
<input id="surnameinput" size="20" type="text" value="" name="surnameinput" />
<!-- Javascript to handle incorrect surname/email -->
</font>
</td>
</tr>
<tr>
<td align="right">
<a style="text-decoration:none;"href="password_email_success.asp"><button class="smallbutton" onClick="return validatemail();" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
</td>
</tr>
</table>
<table width="100%" class="table01" id="level2" style="display:none;">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">Secret Question</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please answer your secret question below.
<br/><br/>
<font class="table_grey">What is your mother's maiden name? </font>
<br/><br/>
<font class="table_grey">Answer: </font>
<input id="answerinput" size="20" type="text" value="" name="answerinput" />
<!-- Javascript to handle incorrect surname/email -->
</font>
</td>
</tr>
<tr>
<td align="right">
<a style="text-decoration:none;"href="password_change_success.asp"><button class="smallbutton" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
</td>
</tr>
</table>
<br><br>
<!-- #include file="includes/footer.asp" -->
<script language="Javascript">
function get_radio_value(val)
{
val = val - 1;
for (var i=0; i < document.radioq.levels.length; i++){
if(i==val){
document.radioq.levels[i].checked = true;
}
}
for (var i=0; i < document.radioq.levels.length; i++){
if (document.radioq.levels[i].checked)
{
var rad_val = document.radioq.levels[i].value;
document.getElementById(rad_val).style.display = "table";
}
else{
var rad_val = document.radioq.levels[i].value;
document.getElementById(rad_val).style.display = "none";
}
}
}
function validatemail()
{
if ( !isNaN(document.level1.surnameinput.value) )
{
alert("Please enter a valid lastname - text only");
document.level1.surnameinput.focus();
return false;
}
if ((document.level1.emailinput.value == "") )
{
alert("Please enter an email.");
document.level1.emailinput.focus();
return false;
}
return true;
}
Call your validatemail() function at the forms onSubmit event instead of one of the buttons onClick event. This is considered best practise as it runs the validation function even when the form is submitted with the ENTER key as well as all related submit buttons.
<form onSubmit="return validatemail();">
Regadring your submit button, don´t name it "submit" and don´t use the class or any other attributes multiple times on the same element.
<button type="submit" name="submitButton" value="Login" class="smallbutton" />
Also, all the form elements (input, button etc.) should be placed within the <form></form> tags.