I am working on a web project using JSP, i have google a lot about this, found a similar problem without any solution !
Does the page is getting submitted before javascript executes or what.
Here is the code
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> Registration</title>
<link rel="stylesheet" href="style.css">
<script>
fun1(field)
{
if(field.value==""){alert("enter name");}
}
</script>
</head>
<body id="html">
<form method=post action=registerUser.jsp><center>
<br><br>
<section class="registration_form" >
<table id="tab1" bgcolor="#ffffff" width="60%" height="320%">
<td width="10%"></td><td><h1>Register here</h1></td>
<tr><td width="20%"></td><td><label for="First Name">First Name</label>
<input type="First Name" id="usernametxtbox" name="FirstName" onblur="fun1(this)" placeholder="enter First Name" required>
</td></tr>
<tr><td width="20%"></td><td><label for="Last Name">Last Name</label>
<input type="Last Name" id="usernametxtbox" name="LastName" placeholder="enter Last Name" required>
</td>
</tr>
<tr><td width="20%"></td><td>
<label for="User Name">User Name</label>
<input type="User Name" id="txtbox" name="UserName" placeholder="enter User Name" required></td>
</tr>
<tr><td width="20%"></td>
<td><label for="usermail">Email</label>
<input type="email" id="txtbox" name="usermail" placeholder="yourname#email.com" required></td></tr>
<tr><td width="20%"></td><td>
<label for="password">Password</label>
<input type="password" id="txtbox" name="password" placeholder="password" required></td></tr>
<tr><td width="20%"></td><td><label for="re-enter password">re-enter Password</label>
<input type="password" id="txtbox" name="Re-enterpassword" placeholder="Re-enter password" required></td></tr>
<tr><td width="20%"></td><tr height="10%"><td></td></tr>
<tr><td width="20%"></td><td><label>Date of Birth:</label>
<select name=birthday>
<option> - Month - </option>
<option value="January">January</option>
<option value="Febuary">February</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="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></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td><td><label>Gender:</label><input type="radio" name="gender" value="male" checked > Male
<input type="radio" name="gender" value="female"> Female</td>
</tr>
<tr><td width="20%"></td><td><input type="submit" value="register" id="butn">
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</section>
</center>
</form>
</body>
</html>
check out the image(includes executed jsp page on a server) too,
Do i need to create any servlet controller, if, what should i change ?
Several issues
You need to use the function keyword: function fun1(field)...
Use the submit event instead of blur - ESPECIALLY when you alert in the blur.
IDs need to be unique! You cannot have two id="usernametxtbox"
Use quotes <form method="post" action="registerUser.jsp"><center>
You cannot use document.getElementById on fields that have no ID
I suggest the following:
...
<head>
<script>
window.onload=function() {
document.getElementById("myForm").onsubmit=function() {
if (this.FirstName.value=="") {
alert("Please enter name");
return false; // cancel submit
}
if (this.LastName.value=="") {
alert("Please enter name");
return false; // cancel submit
}
return true; // allow submit
}
}
</script>
using
<form id="myForm" method="post" action="registerUser.jsp">
Looking at your code, you likely want to do something like this:
FIDDLE
<form name="registration" method="post" action="login.jsp"
onsubmit="return validateform(this);">
function validateform(theForm) {
var First_Name = theForm.First_Name;
var Last_Name = theForm.Last_Name;
var UserName = theForm.UserName;
var phoneNo = theForm.phoneNo;
var password = theForm.password;
var reenter_password = theForm.reenter_password;
var email = theForm.email;
var gender = theForm.gender;
var title = theForm.title;
var day = theForm.dobday;
var month = theForm.dobmonth;
var year = theForm.dobyear;
var atposition = email.value.indexOf("#");
var dotposition = email.value.lastIndexOf(".");
if (First_Name.value == "") {
alert("Name can't be empty");
First_Name.focus();
return false;
}
if (!First_Name.value.match(/^[A-Za-z]+$/)) {
alert("name contains invalid Characters!");
First_Name.focus();
return false;
}
if (Last_Name.value == "") {
alert("Name can't be empty");
Last_Name.focus();
return false;
}
if (!Last_Name.value.match(/^[A-Za-z]+$/)) {
alert("name contains invalid Characters!");
Last_Name.focus();
return false;
}
if (title && (title.selectedIndex < 1 || title.options[title.selectedIndex].value == "")) {
alert("please select the title");
title.focus();
return false;
}
/* user name validation */
if (UserName.value == "") {
alert("user Name can't be empty");
UserName.focus();
return false;
}
/* phoneNo validation */
if (phoneNo.value == "") {
alert("phoneNo can't be empty");
phoneNo.focus();
return false;
}
if (!phoneNo.value.match(/^\d{10}$/)) {
alert("phoneNo should contain only 10 numbers!");
phoneNo.focus();
return false;
}
/* email validation */
if (email.value == "") {
alert("please enter your email");
email.focus();
return false;
}
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.value.length) {
alert("Please enter a valid e-mail address \n atpostion:" + atposition + "\n dotposition:" + dotposition);
email.focus();
return false;
}
/* password validation */
if (password.value == "") {
alert("password can't be empty");
password.focus();
return false;
}
if (password.value.length < 6) {
alert("Password must be at least 6 characters long.");
password.focus();
return false;
}
if (reenter_password.value == "") {
alert("please re-enter the password");
reenter_password.focus();
return false;
}
if (!password.value.match(reenter_password.value)) {
alert("password must be same!");
return false;
}
if (!gender[0].checked && !gender[1].checked) {
alert("please select your gender");
gender.focus();
return false;
}
if (day) {
if (day.selectedIndex < 1 || day.options[day.selectedIndex].value == "") {
alert("please select the day");
dobdate.focus();
return false;
}
}
if (month) {
if (month.selectedIndex < 1 || month.options[month.selectedIndex].value == "") {
alert("please select the month");
theForm.dobmonth.focus();
return false;
}
}
if (year) {
if (year.selectedIndex < 1 || year.options[year.selectedIndex].value == "") {
alert("please select the year");
theForm.dobyear.focus();
return false;
}
}
return true;
}
Related
I have problem with onsubmit JavaScript function. I set validation for CVV and expiry date. When I enter only CVV it's submitted without entering date but when I enter date it's also asking CVV but in CVV case its not asking expiry date.
<form name="card" method="post" onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date
<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month
</option>
<option value="01">January
</option>
<option value="02">February
</option>
<option value="03">March
</option>
<option value="04">April
</option>
<option value="05">May
</option>
<option value="06">June
</option>
<option value="07">July
</option>
<option value="08">August
</option>
<option value="09">September
</option>
<option value="10">October
</option>
<option value="11">November
</option>
<option value="12">December
</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year
</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>
<option value="2021">2021
</option>
<option value="2022">2022
</option>
<option value="2023">2023
</option>
<option value="2024">2024
</option>
<option value="2025">2025
</option>
<option value="2026">2026
</option>
<option value="2027">2027
</option>
<option value="2028">2028
</option>
<option value="2029">2029
</option>
<option value="2030">2030
</option>
<option value="2031">2031
</option>
</select>
</td>
<tr>
<td>
<span id="invalidexpiry">
</span>
</td>
</tr>
<tr>
<td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" >
<span id="usernameError">
</span>
</td>
</tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</table>
</form>
function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday
< today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
}
// cvv
function validate_cvv(cvv){
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe))
{
return true;
}
else (card.cvv.value.length==2)
{
document.getElementById('usernameError').innerHTML="Invalid CVV";//invalid cvv number
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recharge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="header.css" text="text/css" rel="stylesheet">
<script src="time.js" type="text/javascript"></script>
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<style type="text/css"></style>
<body>
<form name="card" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year</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>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" ><span id="usernameError"></span>
</td></tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</form>
It's hard to give you a definite answer without seeing the code for validateexpirty and validate_cvv but my initial guess would be that your logic in validating is at fault:
onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);"
That should probably include && instead of ||.
The || operator works from left to right. That is, it will first evaluate validateexpiry() and if it returns true, rest of the expression will not be evaluated (because no matter what happens, the result will be true). If, on the other hand, it evaluates to false, only then the second part of the expression will be evaluated. This will keep on going until either a predicate returns true (in which case the expression will return true) or all predicates are evaluated to false (in which case the expression will return false).
EDIT: The answer is correct, the reason the answer doesn't work for you is because your CVV validation code is broken. After fixing up the HTML and JS snippets you posted in your question and comments here's what I have. It correctly works after fixing the errors.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recharge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
<body>
<script>
function validateexpiry() {
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday < today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
return true;
}
function validate_cvv(cvv) {
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe)) {
return true;
} else {
document.getElementById('usernameError').innerHTML="Invalid CVV";
return false;
}
}
</script>
<form name="card" action="/" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">
<table>
<tr>
<td> Expiry Date<td>
<td>
<select id="exMonth" title="select a month">
<option value="0">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="exYear" title="select a year">
<option value="0">Year</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>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" ><span id="usernameError"></span>
</td></tr>
<tr>
<td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />
</div>
</td>
</tr>
</form>
</body>
</html>
Compare the corrected validation code to your version:
function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday < today) {
document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
return false;
}
}
function validate_cvv(cvv){
var myRe = /^[0-9]{3,4}$/;
if(cvv.value.match(myRe))
{
return true;
}
else (card.cvv.value.length==2)
{
document.getElementById('usernameError').innerHTML="Invalid CVV";
return false;
}
}
validateexpiry doesn't return if the value is correct, thus it returns undefined implicitly, which of course, evaluates to false in your onsubmit handler. There is also an error with how you create the selected date, it's always off by one but I didn't correct that.
validate_cvv has an outright syntax error. if ... else block's else doesn't take any conditions.
Should the validation be && instead of ||
onsubmit="return validateexpiry() && validate_cvv(document.card.cvv);"
Can you post also the validation made validateexpiry() and validate_cvv(document.card.cvv).
But my initial guest is that it should be
return validateexpiry() && validate_cvv(document.card.cvv);
Or your expiry date has default value 0 year and 0 month so validateexpiry might missed this one.
I'm really new to this site and new to web design. Lately, I'd been trying so hard to design a web page for days/weeks and I ended up stuck at "Contact Form".
I used Bootstrap to write a form that pop up from a modal window. Plus, I also linked a remote contact form so I can just link it up for different pages.
However I've got not much knowledge of php and jquery to validate and submit my form on the fly at that modal page without refreshing the page. I am stuck her for days going a week. Here is my code please help.
I linked remote contact form from homepage like this :
Subscribe! <b class=".glyphicon-triangle-bottom:before">▼</b>
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="form/contactForm.php" data-target="#contactmodal" role="button"><i id="ddicons" class="fa fa-envelope-square"></i> Newsletter</a></li>
And the linked contactForm.php goes like this :
UPDATED CHECK BELOW
and the mailform.php is like this:
<?php
if(isset($_POST['email'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "myemail#email.com";
$email_subject = "Newsletter Subscription";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['email']) ||
!isset($_POST['country']) ||
!isset($_POST['gender']) ||
!isset($_POST['terms'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['name']; // required
$inputEmail = $_POST['email']; // required
$country = $_POST['country']; // required
$gender = $_POST['gender']; // not required
$terms = $_POST['terms']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
if(strlen($inputCountry) < 1) {
$error_message .= 'Please select your country.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
if(strlen($inputGender) < 1) {
$error_message .= 'Please select your gender.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Country: ".clean_string($inputCountry)."\n";
$email_message .= "Gender: ".clean_string($inputGender)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $email_message, $headers);
?>
<!-- include your own success html here -->
Thank you for contacting us. We will be in touch with you very soon.
<?php
}
?>
Problem:
I've got no idea what going on now. The homepage modal does load the remote form but the submit button isn't working and when it does, it refreshes. I do wish all the input in the form are required.
So far I have this as my contact form. Country: Gender : Agree: and Submit: are not working well.. :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Ajax Contact Form</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit_btn").click(function() {
var proceed = true;
//simple validation at client's end
//loop through each field and we simply change border color to red for invalid fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});
if(proceed) //everything looks good! proceed...
{
//get input field values data to be sent to server
post_data = {
'user_name' : $('input[name=name]').val(),
'user_email' : $('input[name=email]').val(),
};
//Ajax post data to server
$.post('contact_me.php', post_data, function(response){
if(response.type == 'error'){ //load json data from server and output message
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contact_form input[required=true], #contact_form textarea[required=true]").val('');
$("#contact_form #contact_body").slideUp(); //hide form after success
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input[required=true], #contact_form textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- MAIL MODAL -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Join Nexeu Mailing List!</h4>
</div>
<div class="modal-body">
<!--- Form --->
<form action="mailform.php" class="form-horizontal" id="contact_form" method="post" name="modalform" role="form"/>
<fieldset>
<div class="form-style" id="contact_form">
<div class="form-style-heading">Please Contact Us</div>
<div id="contact_results"></div>
<div id="contact_body">
<!-- Name input-->
<div class="form-group">
<label class="control-label col-md-4" for="name"><span>Name <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input id="name" name="name" type="text" maxlength="180" required="true" placeholder="Your Name" required>
</div>
</div>
<!-- e-mail input-->
<div class="form-group">
<label class="control-label col-md-4" for="email"><span>Email <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<input type="email" class="form-control" id="inputEmail" required="true" placeholder="Email" required>
</div>
</div>
<!-- Country Select -->
<div id="choosecountry" class="form-group">
<label class="control-label col-md-4" for="subject"><span>Country <span class="required">*</span></span></label>
<div class="col-md-6 form-group">
<select id="country" name="subject" class="form-control" title="Select Country..." required>
<option value="">Select Country...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo, Republic of the">Congo, Republic of the</option>
<option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote d'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Kosovo">Kosovo</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar (Burma)">Myanmar (Burma)</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="North Korea">North Korea</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St. Kitts and Nevis">St. Kitts and Nevis</option>
<option value="St. Lucia">St. Lucia</option>
<option value="St. Vincent and The Grenadines">St. Vincent and The Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Korea">South Korea</option>
<option value="South Sudan">South Sudan</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="UK (United Kingdom)">UK (United Kingdom)</option>
<option value="USA (United States of America)">USA (United States of America)</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City (Holy See)">Vatican City (Holy See)</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<!-- Gender Select -->
<div class="form-group">
<label class="col-xs-4 control-label" for="gender">Gender </label>
<div class="col-xs-6">
<div class="btn-group" id="genderbtn" name="gender" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="gender" value="male" required>Male</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="female"required>Female</label>
<label class="btn btn-default">
<input type="radio" name="gender" value="other"required>Other</label>
</div>
</div>
</div>
<!--- Agreement Button --->
<div class="form-group">
<div class="col-xs-6 col-xs-offset-4">
<div class="checkbox">
<label>
<input id="terms" type="checkbox" for="agree" name="agree" value="agree" data-error="Before you wreck yourself" required>
Agree with the terms and conditions </label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-xs-4 control-label" for="submit"></label>
<div class="col-md-6">
<button id="submit_btn" type="submit" value="Submit" class="submit btn btn-custom">Submit!</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
<!--- /Form --->
</div><!-- end modal-body -->
<div class="modal-footer"></div>
<!-- end modal-footer -->
<!-- end mailmodal -->
<!-- /MAIL MODAL -->
</body>
</html>
You need use ajax, here a example: http://www.sanwebe.com/2011/12/making-simple-jquery-ajax-contact-form
You may use bellow code for form submit without refresh.
$(document).ready(function(){
$("#login-form-submit").click(function(){
var username = $("#login-form-username").val();
var password = $("#login-form-password").val();
if(username == ""){
alert("Please Enter Email.");
$("#login-form-username").focus();
return false;
}
if(password == "")
{
alert("Please Enter Password.");
$("#login-form-password").focus();
return false;
}
var form = document.getElementById('login-form');
formdata2 = new FormData(form);
$.ajax({
url : "controller/ajax/check_login.php",
cache : false,
contentType : false,
processData : false,
data : formdata2,
type : 'post',
success : function(data) {
if (data == 1) {
alert('success');
}else {
alert('Invalid Authentication.');
}
}
});
return false;
});
});
I am trying to get a landing page grab the URL parameters. I have two hidden fields in the form that match the parameter names, but I can't seem to get this to work.
I need to grab the URL Parameters, and have them send with the rest of the form. The form's method="POST">
I need to do this with JavaScript, not PHP.
THANKS!
For instance, a URL will look like this:
http://mywebsite.com/qualify/new/?AFFILIATE_ID=-1&SUB_1=Test#
Here is my form code:
<html>
<head>
<script>
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
</script>
Please Choose an Insurance Type
Private / Group Insurance
Medicare / Medicaid
Secondary Insurance
<input type="text" name="phone" placeholder="Phone Number" required="required">
<select value="State" name="state" style="width:100%;height: 35px!important; margin-top: 10px!important;">
<option value="">Please Choose a State:</option>
<option value="Alabama">Alabama</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kentucky">Kentucky</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
</select>
<input type="number" min="18" max="64" step="1" name="birthdate" placeholder="Age" required="required" style="margin-bottom: 8px!important;">
<input type="text" name="insuranceComp" placeholder="Insurance Company" required="required">
<input type="text" name="memberID" placeholder="Member ID or Group Policy" required="required">
<input type="text" name="RxBin" placeholder="Rx Bin Number" required="required">
<input type="text" name="PcnNumber" placeholder="PCN Number" required="required">
<input type="text" name="groupID" placeholder="Rx Group ID" required="required">
<input type="hidden" name="SUB_1" value="">
<input type="hidden" name="AFFILIATE_ID" value="">
<button class="submit" style="width: 100%;">Submit Now</button>
</form>
</body>
</html>
If you mean GET values you can do this by either echoing the whole form with the variables in the appropriate places like so;
<?php
echo'
<input type="text" name="phone" placeholder="Phone Number" required="required">
<select value="State" name="state" style="width:100%;height: 35px!important; margin-top: 10px!important;">
<option value="">Please Choose a State:</option>
<option value="Alabama">Alabama</option>
<option value="Arizona">Arizona</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kentucky">Kentucky</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
</select>
<input type="number" min="18" max="64" step="1" name="birthdate" placeholder="Age" required="required" style="margin-bottom: 8px!important;">
<input type="text" name="insuranceComp" placeholder="Insurance Company" required="required">
<input type="text" name="memberID" placeholder="Member ID or Group Policy" required="required">
<input type="text" name="RxBin" placeholder="Rx Bin Number" required="required">
<input type="text" name="PcnNumber" placeholder="PCN Number" required="required">
<input type="text" name="groupID" placeholder="Rx Group ID" required="required">
<input type="hidden" name="SUB_1" value="'.$_GET['value1'].'">
<input type="hidden" name="AFFILIATE_ID" value="'.$_GET['value2'].'">
<button class="submit" style="width: 100%;">Submit Now</button>
</form>
';
?>
Alternatively you could echo only the hidden fields, like so;
<?php
echo'
<input type="hidden" name="SUB_1" value="'.$_GET['value1'].'">
<input type="hidden" name="AFFILIATE_ID" value="'.$_GET['value2'].'">
';
?>
Your conceptual approach seems reasonably sound, just a few implementation issues. The code might look something like this:
$(document).ready(function () {
if(window.location.search && window.location.search.indexOf('&') !== -1) {
var pairs = window.location.search.replace('?', '').split('&');
$.each(pairs, function (index, pair) {
var parameter = pair.split('=')[0];
var value = pair.split('=')[1];
if(parameter === 'AFFILIATE_ID' || parameter === 'SUB_1') {
$('input[name="' + parameter + '"]').val(value);
}
});
}
});
NOTE: this answer uses jQuery, which in this situation would probably be best for browser compatability, but I can post a pure JS solution if you need one.
Your code works. You just need to add the part that populates your form fields:
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
var returnval = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
// populate form fields
$("[name='"+name+"']").val( returnval );
return returnval;
}
// fire your function when the form submits
$(function(){
$('#contact-form').on('submit',function(){
getParameterByName('AFFILIATE_ID');
getParameterByName('SUB_1');
});
});
I'm very new to javascript, so finding it hard to see where I went wrong. For some reason my functions aern't working. Any help would be appreciated. I've tried using them in an external js file, head / body and nothing seems to work. The mistake is either with the functions or with calling them.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nicky's</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function CheckfName() {
var name=0;
var checknames=isNaN(name);
window.alert("Please use only letters in the name space");
return false; }
function checkc number() {
var cellN=0;
var numBercheck=isNan(cellN);
window.alert("Please use only numbers in the cell number space");
return false }
function confirmBooking() {
if(document.forms[0].firstName.value==0
|| document.forms[0].lastName.value.value==0) {
window.alert("Please fill in your First and Last name");
return false; }
if(document.forms[0].firstName.value==""
|| document.forms[0].lastName.value=="") {
window.alert("Please fill in your first and last name");
return false; }
else if(document.forms[0].areaCode.value==""
|| document.forms[0].threeMiddlenumbers.value==""
|| document.forms[0].LastfourNumbers.value=="") {
window.alert("Please enter your cell number.");
return false; }
else if(document.forms[0].hairstyles.value=="Setdefault"
|| document.forms[0]servCes.value=="Setdefault") {
window.alert("Please select hairstyle type");
return false; }
else if(document.forms[0].day.value=="SelectDay"
|| document.forms[0].month.value=="SelectMonth"
|| document.forms[0].time.value=="Selectime") {
window.alert("Please select the Day, Month and Time!");
return false; }}
function resetBooking() {
var reset=window.confirm("Are you sure that you want to reset
your booking information?");
if(reset==true) {
return true;
return false; }}
</script>
</head>
<body>
<div class="wrapper">
<div id="header">
</div>
<ul id="navlist">
<li>Home</li>
<li>Booking</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="article">
<form method="get" action="BookingProcessor.html" enctype="application/x-www-form-urlencoded"
onsubmit="return confirmBooking();" onreset="return resetBooking();">
<p>First Name
<input type="text" onchange="CheckfName()" name="firstName" maxlength="35" size="35"
style="margin-left:20px;"/>
</p>
<p>Last Name
<input type="text" onchange="CheckfName()" name="lastName" maxlength="35" size="35"
style="margin-left:28px;"/>
</p>
<p>Cell Number
<input type="text" onchange="CheckCnumber()" name="areaCode" size="3" maxlength="3"
style="margin-left:15px;">
<input type="text" name="threeMiddleNumbers" size="3" onchange="CheckCnumber()"
maxlength="3"/>
<input type="text" name="LastfourNumbers" size="4" onchange="CheckCnumber()"
maxlength="4"/>
<p>Hairstyle Type
<select name="hairstyles">
<option value="Setdefault">Select Hairstyle</option>
<option value="none">None</option>
<option value="straightBack">Straight back long</option>
<option value="Bondings">Bondings</option>
<option value="hairByhair">Hair by hair</option>
<option value="blowNcut">Blow and Cut</option>
<option value="bopCorn">Bopcorn</option>
<option value="twistLong">Twist Long</option>
<option value="dreadS">Dreads</option>
</select
</p>
<select name="day">
<option value="SelectDay">Select Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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="month">
<option value="SelectMonth">Select Month</option>
<option value="January">January</option>
<option value="February">February</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="time">
<option value="Selecttime">Select Booking Time</option>
<option value="8to9">Between 8am and 9am</option>
<option value="9to10">Between 9am and 10am</option>
<option value="10to11">Between 10am and 11am</option>
<option value="11to12">Between 11am and 12pm</option>
<option value="12to13">Between 12pm and 13pm</option>
<option value="13to14">Between 13pm and 14pm</option>
<option value="14to15">Between 14pm and 15pm</option>
<option value="15to16">Between 15pm and 16pm</option>
<option value="16to17">Between 16pm and 17pm</option>
<option value="17to18">Between 17pm and 18pm</option>
</select>
<p>If there are any other requirements, please specify in the text area below</p>
<p>
<textarea name="Requirement" cols="40" rows="3" style="overflow: hidden;">
</textarea>
</p>
<p>
<input type="submit" value="Place a Book">
<input type="reset" value="Reset a Form">
</form>
</div>
</div>
</body>
</html>
Here are some issues I've found.
function checkNumber() {
var cellN=0;
var numBercheck=isNan(cellN);
window.alert("Please use only numbers in the cell number space");
return false;
}
use checkNumber instead of "checkc number", also no semicolon after return statement
function resetBooking() {
var reset=window.confirm("Are you sure that you want to reset your booking information?");
if(reset==true) {
return true;
}
return false;
}
if statement is wrong (it had 2 returns )
You have a typo in your function name. There should be no space.
function checkc number() {
var cellN=0;
var numBercheck=isNan(cellN);
window.alert("Please use only numbers in the cell number space");
return false }
Change the name to function checkcnumber().
Also you are missing semicolon in return statement.
I am not even new to javascript. just learning through some tutorials, but i have three slelct boxes in html as follows.
Html form.
<table>
<form id="enrolment" name="enrolment" onsubmit="return datevalidate();" action="" method="POST" >
<div style="text-align: center"><h3>Enrolement Form</h3></div>
<hr>
<div style="text-align: center"><h4>Personal details.</h4></div>
<hr>
<tr>
<td align="left">Course Date:</td>
<td align="left">
<select name="Coursedate" id="Coursedate">
<option selected="" value="Default">Date</option>
<option value="1">1</option>
<option value="2">2</optio
n>
<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="coursemonth" id="coursemonth">
<option selected="" value="Default">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="courseyear" id="courseyear">
<option selected="" value="Default">year</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">1999</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>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="validate">
</td>
</tr>
</form>
</table>
And the javascript as follows
<script>
function datevalidate()
{
var d = new Date();
var date = d.getDate();
var month = d.getMonth()+1;
var year = d.getFullYear();
var cdate = document.getElementById("Coursedate").value;
var cmonth = document.getElementById("coursemonth").value;
var cyear = document.getElementById("courseyear").value;
if (cdate > date && cmonth >= month && cyear >= year)
{
alert("Date is greater");
}
else
if(cdate < date && cmonth > month && cyear >= year)
{
alert("Month and year greater");
}
else
if(cdate < date && cmonth >= month && cyear > year)
{
alert(" year greater");
}
else
if(cdate > date && cmonth < month && cyear > year)
{
alert(" year greater");
}
}
</script>
somehow i feel mysqlf that this is not very impressive.
How to get full validation in javascript. Any tutorials?
i need that the date should not exceed the current date.
Thanks in advance
Amod India
To better handle dates in Javascript, check out this other question: Compare two dates with JavaScript.
That being said, since you're talking about validation, because Javascript is a client-side language you can never get full date validation with your code. Someone can disable the code altogether by disabling Javascript, or they can rewrite the code and use it as the framework for an XSS attack.
The best way to do this is with a server side language like PHP, .Net, Java, and so forth.
Ultimately you would have the code only print dates that were before today's date, then the only way someone could submit a date in the future was if they were passing modified variables. Then, rather than falling back on a client-side language for the filtering you would use the server side language to validate the code and make sure that the variables were within parameters before passing the query to a database.
// day : 1-31
// month : 1-12
function dateIsValid(day, month, year) {
return !isNaN(new Date([month, day, year].join('/')).getDate());
}
It's not the prettiest, but I'm relying on the fact that an invalid date passed to the constructor for the Date class in JavaScript will give you a date object back whose timestamp is NaN.
So obviously this handles corner cases like leap years.
EDIT:
Actually, this isn't fool-proof. The days (up to 31) can overflow into the next month.
new Date([2, 31, 2012].join('/')); // Fri Mar 02 2012
i have done date validation such as Day,month as well as year validation using javascript
<html>
<head>
<title></title>
<script language = "Javascript">
// Required variable
var digits="0123456789";
//non-digit Characters which are allowed in phone number
var phoneNumChacters="()-";
//Chacter are allowed in international phone numeber
var validWorldPhoneCars=phoneNumChacters+ "+";
var minDigitsphoneNum=9;
function isInteger(k)
{
var i;
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if((h<"0") ||(h>"9"))
return false;
}
// all are numbers
return true;
}
function trim(k)
{
var i;
var returnStringValue ="";
//character is not a whitespace, append to returnString.
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(h!=" ")
returnStringValue +=h;
}
return returnStringValue;
}
function stripCharsInBag(k, bag)
{
var i;
var returnStringValue="";
for(i=0; i<k.lenght; i++)
{
var h=k.charAt(i);
if(bag.indexOf(h)==-1)
returnStringValue +=h;
}
return returnStringValue;
}
function CheckInternationalPhoneNum(strPhone)
{
var bracket =3;
strPhone=trim(strPhone);
if(strPhone.indexOf("+")>1)
return false;
if(strPhone.indexOf("-")!=-1)
bracket=bracket+1;
if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)
return false;
var brchr=strPhone.indexOf("(");
if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")
return false;
if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)
return false;
k=stripCharsInBag(strPhone,validWorldPhoneCars);
return (isInteger(k) && k.lenght>=minDigitsphoneNum);
}
function ValidateForm()
{
var phoneNumber =document.sampleForm.txtPhone;
if((phoneNumber.value==null)||(phoneNumber.value==""))
{
alert ("Please enter you phone number");
phoneNumber.focus();
return false;
}
if(phoneNumber.value<9)
{
alert("Number is Less then 9 ");
phoneNumber.focus();
return false;
}
if(CheckInternationalPhoneNum(phoneNumber.value)==false)
{
alert("Enter a valid number");
phoneNumber.value="";
phoneNumber.focus();
return false;
}
}
</script>
</head>
<body>
<center>
<form name="sampleForm" method="post" action="" onSubmit="return ValidateForm()">
<p>Enter a phone number : <input type="text" name="txtPhone"></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>
</center>
</body>
</html>