I've used the following code as a method to send user input data on my html site to a Google Spreadsheet:
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function postContactToGoogle() {
var firstname=$('#firstname').val();
var surname=$('#surname').val();
var dob=$('#dob').val();
var email=$('#email').val();
var option=$('#option').val();
$.ajax({
url:"https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
data: {"entry.1012452068":firstname, "entry.1038894874":surname, "entry.1352091133":dob, "entry.1048111489":email, "entry.1786559101":option}, type: "POST", datatype: "xml", statusCode: {0:function() {window.location.replace("thankyou.html");}, 200:function(){window.location.replace("thankyou.html");}}
});
}
</script>
HTML:
<form>
First Name:<br>
<input id="firstname" name="firstname" type="text" placeholder="First Name"/><br>
Surname:<br>
<input id="surname" name="surname" type="text" placeholder="Surname"/><br>
DoB:<br>
<input id="dob" name="dob" type="text" placeholder="DoB"/><br>
Email:<br>
<input id="email" name="email" type="text" placeholder="Email"/><br>
Option Pledge:<br>
<input id="option" name="option" type="radio"/> £49 <br>
<input id="option" name="option" type="radio"/> £69 <br>
<input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()"/>
</form>
It all works perfectly well except for the last 2 radio button options don't appear on the spreadsheet (shown on the image below). Does anyone have an insight into what I'm doing wrong?
You have 2 issues:
Your radio inputs have the same id="option" and id's should be unique .
Your radio inputs haven't value attribute to send like value="your value".
So this example should work
function postContactToGoogle() {
var firstname = $('#firstname').val();
var surname = $('#surname').val();
var dob = $('#dob').val();
var email = $('#email').val();
var option = $("[name='option']").val();
console.log({
"entry.1012452068": firstname,
"entry.1038894874": surname,
"entry.1352091133": dob,
"entry.1048111489": email,
"entry.1786559101": option
});
alert("your radio button value: " + option);
//it's working..
//then validate your data before sending
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
data: {
"entry.1012452068": firstname,
"entry.1038894874": surname,
"entry.1352091133": dob,
"entry.1048111489": email,
"entry.1786559101": option
},
type: "POST",
datatype: "xml",
statusCode: {
0: function() {
alert("status:0, thank you");
window.location.replace("thankyou.html");
},
200: function() {
alert("status:200, thank you");
window.location.replace("thankyou.html");
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form>
First Name:
<br>
<input id="firstname" name="firstname" type="text" placeholder="First Name" />
<br>Surname:
<br>
<input id="surname" name="surname" type="text" placeholder="Surname" />
<br>DoB:
<br>
<input id="dob" name="dob" type="text" placeholder="DoB" />
<br>Email:
<br>
<input id="email" name="email" type="text" placeholder="Email" />
<br>Option Pledge:
<br>
<input id="option1" value="Black Ballad Membership - £49" name="option" type="radio" />£49
<br>
<input id="option2" value="Premium Black Ballad Membership - £69" name="option" type="radio" />£69
<br>
<input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()" />
</form>
Do following change in your code,
var option = $('input[name=option]:checked').val()
Note: There should not be the same id for two different element, you have used id "option" for both radio.
Related
How to save all the values from customer? I can only save first name and last name. Can I pass more than 2 inputs in set details? I tried adding date of birth that had input type text in dd/mm/yyyy format but the value was being shown as "undefined".
Java Script
function getDetails(){
if (typeof(Storage)!=="undefined"){
if (sessionStorage.getItem("firstName") !== null){
document.getElementById("firstName").value = sessionStorage.getItem("firstName");
}
if (sessionStorage.getItem("lastName") !== null){
document.getElementById("lastName").value = sessionStorage.getItem("lastName");
}
}
}
function setDetails(firstName, lastName) {
if (typeof(Storage)!=="undefined"){
sessionStorage.setItem("firstName", firstName);
sessionStorage.setItem("lastName", lastName);
}
}
HTML Code
<label for="firstName">First Name</label>
<br>
<input type="text" name="firstName" id="firstName" placeholder= "Enter first name" title="20 characters" />
<br>
<label for="lastName">Last Name</label>
<br>
<input type="text" name="lastName" id="lastName" placeholder= "Enter last name" class="field" required pattern="([A-z]){1,20}" title="20 characters" />
<br>
<label for="dob">Date of Birth</label>
<br>
<input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="\d{1,2}\/\d{1,2}\/\d{4}"/>
Below code will work to set & get "dob" in cookie:
<html>
<body>
<label for="dob">Date of Birth</label>
<br>
<input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="\d{1,2}\/\d{1,2}\/\d{4}"/>
<button onclick = "setDateInCookie();">SetCookie</button>
<button onclick = "getDateFromCookie();">GetCookie</button>
<script>
function setDateInCookie(){
var myDate = document.getElementById("dob").value;
if(typeof(Storage)!=="undefined")
sessionStorage["myDate"] = myDate;
}
function getDateFromCookie(){
var myDate = document.getElementById("dob").value;
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.getItem("myDate") !== null){
document.getElementById("dob").value = sessionStorage.getItem("myDate");
}
}
}
</script>
</body>
</html>
Future Note: Avoid using input type "text" for input type "date". Use the exact input types for not getting any issues in future.
I try to add a delay before submiting my form or wait for ajax request before submitting the form. The goal is to get the geo-data (lat+lng) from google api, write it into a hidden (display:none) input-field and then submit the form.
I try it this way. The delay works but after the 5000 ms the page just reloads and ist not submitting.
$('#orderform').submit(function (event) {
var form = this;
event.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val();
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789',
dataType: 'json',
success: function(json) {
geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng;
$('#oxmailcheck').val(geo);
}
});
});
My form is from oxid and looks like this:
<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform">
<div>
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="option" value="[{$oView->getLoginOption()}]">
<input type="hidden" name="cl" value="user">
<input type="hidden" name="CustomError" value='user'>
<input type="hidden" name="blhideshipaddress" value="0">
[{if !$oxcmp_user->oxuser__oxpassword->value }]
<input type="hidden" name="fnc" value="createuser">
[{else}]
<input type="hidden" name="fnc" value="changeuser">
<input type="hidden" name="lgn_cook" value="0">
[{/if}]
</div>
<input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]">
<input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]">
<input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]">
<input class="button medium" name="userform" type="submit" value="[{ oxmultilang ident="USER_NEXTSTEP" }]">
</form>
Is there a way to achieve my goal with a delay before submitting the form or maybie submitting the form after the json request wassuccessful and I get my data from google api.
A delay solution would be much better in case the google api is down, then i get no data but the form is still submitting. Or is jquery here the wrong lang?
$('#orderform').submit(callback) the callback will be called after the javascript submit event, i.e. this function would be called after the form is submitted
Rather i would recommend this approach
Use onclick of the submit button rather than $(selector).Submit()
when you get the data from geolocation APIs submit the form using
$('#orderform')[0].submit();
make sure that you change the button type from type="submit" to type="button" otherwise the button will fire the submit event
$(document).ready(function(){
$('#SubmitFormButton').click(function (event) {
var form = this;
event.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val();
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789',
dataType: 'json',
success: function(json) {
geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng;
$('#oxmailcheck').val(geo);
$('#orderform')[0].submit();
}
});
});
});
<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform">
<div>
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="option" value="[{$oView->getLoginOption()}]">
<input type="hidden" name="cl" value="user">
<input type="hidden" name="CustomError" value='user'>
<input type="hidden" name="blhideshipaddress" value="0">
[{if !$oxcmp_user->oxuser__oxpassword->value }]
<input type="hidden" name="fnc" value="createuser">
[{else}]
<input type="hidden" name="fnc" value="changeuser">
<input type="hidden" name="lgn_cook" value="0">
[{/if}]
</div>
<input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]">
<input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]">
<input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]">
<input id="SubmitFormButton" class="button medium" name="userform" type="button" value="[{ oxmultilang ident="USER_NEXTSTEP" }]">
</form>
I created a form with three fields first_name, Last_name, city and in the fourth field, I am having an Id column which is read-only. When the user fills the first three fields in the form, before submitting it should generate an id in the fourth column but here it should use the first two alphabets that are in the fields to generate an Id
For eg. First_name = Roid, Last_name = Steve, city = California then in the fourth field it should automatically generate this id = rostca (all the first two alphabets)
How to achieve this?
Here is a JavaScript version to answer to your issue.
(function () {
populate();
})();
function populate () {
var str = "";
Array.from(document.getElementsByClassName("inputs")).forEach(function (element) {
str += element.value.substr(0, 2).toLowerCase();
});
document.getElementById("output").value = str;
}
<div>
<input type="text" class="inputs" value="Roid" oninput="populate();" />
<input type="text" class="inputs" value="Steve" oninput="populate();" />
<input type="text" class="inputs" value="California" oninput="populate();" />
<input id="output" type="text" readonly disabled />
</div>
Here is a jQuery answer to your issue.
$(function () {
populate();
$(".inputs").on("input", function() {
populate();
});
});
function populate () {
var str = "";
$(".inputs").each(function () {
str += $(this).val().substr(0, 2).toLowerCase();
});
$("#output").val(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" class="inputs" value="Roid" />
<input type="text" class="inputs" value="Steve" />
<input type="text" class="inputs" value="California" />
<input id="output" type="text" readonly disabled />
</div>
Check below code,
function TextChanged(){
var first_name = document.getElementById("first_name").value;
var Last_name = document.getElementById("Last_name").value;
var city = document.getElementById("city").value;
document.getElementById("id").value = first_name.substring(0, 2) +Last_name.substring(0, 2) +city.substring(0, 2);
}
<input type="text" id="first_name" onblur="TextChanged()">
<input type="text" id="Last_name" onblur="TextChanged()">
<input type="text" id="city" onblur="TextChanged()">
<input type="text" id="id" readonly>
Check here jsbin demo, https://jsbin.com/qegazab/edit?html,js,console,output
I have a problem with reading data from my HTML form, and then creating an object using that data. I am making a simple front end portfolio website, and in "Contact" part I would like to manage users to contact me using this form. Here is the code, so if you have any suggestion, please let me know.
This is how I created HTML form and JS:
var users = [];
var createUser = function(){
var form = document.myForm;
//getting data
if(form.name.value == ""){
alert("Please, enter your name.");
}else{
var name = form.name.value;
}
if(form.surname.value == ""){
alert("Please, enter your surname.");
}else{
var surname = form.surname.value;
}
if(form.email.value == ""){
alert("Please, enter your email.");
}else{
var email = form.email.value;
}
if(form.phone.value == ""){
alert("Please, enter your phone number.");
}else{
var phone = form.phone.value;
}
var radSex = form.radSex;
var sex;
for(var i=0; i<radSex.length; i++){
if(radSex[i].checked){
sex = radSex[i].value;
}
}
var radAge = form.radAge;
var age;
for(var i=0; i<radAge.length; i++){
if(radAge[i].checked){
age = radAge[i].value;
}
}
var message = form.getElementByClassName("message").value;
//creating user
var user = {
firstName: name,
lastName: surname,
email: email,
phoneNumber: phone,
sex: sex,
age: age,
message: message
};
//putting into array
users.push(user);
};
function check(){
alert(users[0]);
};
//listening for event
var submitBtn = document.getElementById("submitButton");
submitBtn.addEventListener("click", createUser);
submitBtn.addEventListener("click", check);
<form action="submit" name="myForm">
<p>
<input type="text" name="name" value="Name" class="textbox">
</p>
<p>
<input type="text" name="surname" value="Surname" class="textbox">
</p>
<p>
<input type="text" name="email" value="Email Address" class="textbox">
</p>
<p>
<input type="text" name="phone" value="Phone Number" class="textbox">
</p>
<p>Sex:</p>
<p>
<label>Male </label>
<input type="radio" name="radSex" value="male" checked="checked">
<label> Female </label>
<input type="radio" name="radSex" value="female">
</p>
<p>Age:</p>
<p>
<label><25 </label>
<input type="radio" name="radAge" value="<25" checked="checked">
<label> 25<50 </label>
<input type="radio" name="radAge" value="25<50">
<label> 50<100</label>
<input type="radio" name="radAge" value="50<100">
</p>
<p>
<textarea class="message">Message</textarea>
</p>
<button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button>
</form>
IMO, you should use serialize()
$("form").serialize();
You can select one or more form elements.
Let say, you've large form with lots of fields in it, you can just use the serialize to collect (inputs with name only) all the field values by a single line.
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $('form').serialize(),
success: function () {
alert('form was submitted');
}
});
});
});
let submitButton = document.querySelector("#submitButton");
submitButton.addEventListener("click",function(){
let nameValue = document.querySelector("[name=name]").value;
let surnameValue = document.querySelector("[name=surname]").value;
let emailValue = document.querySelector("[name=email]").value;
let phoneValue = document.querySelector("[name=phone]").value;
let sexValue = document.querySelector("[name=radSex]").value;
let ageValue = document.querySelector("[name=radAge]").value;
let messageValue = document.querySelector(".message").value;
let backObject = {
"name": nameValue,
"surname": surnameValue,
"email": emailValue,
"phone": phoneValue,
"sex": sexValue,
"age": ageValue,
"message": messageValue
};
console.log(backObject);
});
<form action="submit" name="myForm">
<p>
<input type="text" name="name" value="Name" class="textbox">
</p>
<p>
<input type="text" name="surname" value="Surname" class="textbox">
</p>
<p>
<input type="text" name="email" value="Email Address" class="textbox">
</p>
<p>
<input type="text" name="phone" value="Phone Number" class="textbox">
</p>
<p>Sex:</p>
<p>
<label>Male </label>
<input type="radio" name="radSex" value="male" checked="checked">
<label> Female </label>
<input type="radio" name="radSex" value="female">
</p>
<p>Age:</p>
<p>
<label><25 </label>
<input type="radio" name="radAge" value="<25" checked="checked">
<label> 25<50 </label>
<input type="radio" name="radAge" value="25<50">
<label> 50<100</label>
<input type="radio" name="radAge" value="50<100">
</p>
<p>
<textarea class="message">Message</textarea>
</p>
<button type="button" class="btn btn-primary btn-block" id="submitButton">Send</button>
</form>
I have this assignment in my class where we are to make a simple form with three required fields (out of five). I am having problems with getting my code to work.
This is via my professor...with what he wants
{
On submitting the form, the browser should check that :
Values for the required fields have been entered
Use regular expressions to check that the form of the entered input is proper for the email, telephone, and website fields. The forms to check for are:
Email: [alphanumeric string including . and _ ]# [alphanumeric string including . and _ ]. [alpha string]
Telephone: Either (ddd)ddd-dddd or ddd-ddd-dddd etc
Website: www.[alphanumeric string including . _ -].[com or net etc]
If any error is found, the form should not be submitted and appropriate error messages should be generated.
}
All validation must be "client side" i.e. on the browser using Javascript (not on any server and no Jquery or any programming other than Javascript and the required HTML). Use of any authoring tools is strictly and expressly forbidden.
This what I have now. Please help. Below is the code. What am I doing wrong?
<script language = "JavaScript">
<!--
function validateForm(){
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/);
}
-->
</script>
<body>
<form name="contact" action="" method="post" onSubmit = "return validateForm();">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>
Try this out:- https://jsfiddle.net/vduwxjmv/
This can be done without JavaScript also using required attribute at each html control for which value is mandatory. And for clear you can use input type as reset.
HTML:-
<form name="contact" action="" method="post">
Name: <input type="textbox" name="Name" value="" required> <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value=""> <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" required> <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" required><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear" />
You can do a check by using the following JavaScript code
var result = $("#form")[0].checkValidity();
or you may change input button
<input type="submit" value="Submit Contact Details">
<!DOCTYPE html>
<html>
<body>
<form name="contact" method="post">
Name: <input type="text" class="form-control" name="Name" placeholder="Name" required="required" /> <font color = red>*Required </font><br>
Company: <input type="text" class="form-control" name="Company" placeholder="Company" /> <font color = red>Optional </font><br>
Email: <input type="email" class="form-control" name="Email" placeholder="Email" required="required" /> <font color = red>*Required </font><br>
Telephone: <input type="text" class="form-control" name="Telephone" placeholder="Telephone"/> <font color = red>Optional </font><br>
Website: <input type="text" class="form-control" name="Website" placeholder="Website" required="required" /><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details">
<input type="reset" value="Clear"><br>
</form>
</body>
</html>
change the type from button to submit.
on giving the type as reset ,it will clear the contents.
on giving required="required", that field will be considered as a mandatory one.
<html>
<head>
<script language = "JavaScript">
function validateForm(thisVar){ alert('method Called From: ');alert(thisVar.value);alert(thisVar.name);
//This is to check that required fields are filled
var x = document.contact.Name.value;
var y = document.contact.Email.value;
var z = document.contact.Website.value;
var p = document.contact.Phone.value;
if(x==null || x ==""){
alert('Name must be filled out');
return false;
}
if (y ==null || y == ""){
alert('Email must be filled out');
return false;
}
if (z == null || z == ""){
alert('Website must be filled out');
return false;
}
if(!isEmail()){
alert('This is not a correct Email format');
}
if (!isTelephone()){
var errorText = document.createTextNode(
"This is not a correct Phone number format");
}
if(!isWeb()){
errorText = document.createTextNode(
"This is not the correct Website format");
}
}
function isTelephone(){
//This checks that the phone number is in the required format
return document.contact.Phone.value.match(
/^\(\d\d\d-d\d\d\-\d\d\d\d$/);
}
function isEmail(){
//This is for checking email format
return document.contact.Email.value.match(
/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/);
}
function isWeb(){
return document.contact.Website.value.match(
/^([wW]{3}\.)?[a-zA-Z0-9\-.]{3,}\[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/);
}
</script>
</head>
<body>
<form name="contactForm" action="" method="post" onSubmit = "return validateForm(this);">
Name: <input type="textbox" name="Name" value="" > <font color = red>*Required </font><br>
Company: <input type="textbox" name="Company" value="" > <font color = red>Optional </font><br>
Email: <input type="textbox" name="Email" value="" > <font color = red>*Required </font><br>
Telephone: <input type="textbox" name="Telephone" value="" > <font color = red>Optional </font><br>
Website: <input type="textbox" name="Website" value="" ><font color = red>*Required </font><br>
<input type="submit" value="Submit Contact Details" onclick="validateForm(this);">
<input type="reset" value="Clear"
ONCLICK="
alert('This will clear the form.');
Name.value=' '
Company.value=' '
Email.value=' '
Telephone.value=' '
Website.value=' '"><br>
</form>
</body>
</html>
You can validate it by two ways ---
use Submit type button
call validationForm on button click
Like --
<input type="submit" value="Submit Contact Details">
or
<input type="button" onclick="return validationForm();" value="Submit Contact Details">
you can check method call from to times 1st from onclick 2nd from onsubmit
Dont forget to appreciate (vote up).