Post
Ask Question
RunDown BassMan

RunDown BassMan

  • NA
  • 22
  • 27.7k

Html workflow with javascript

Aug 26 2014 8:28 AM
Hey, Im creating a request form using HTML and Javascript. here is the code below (as I cannot attach files to the post). The code takes user details, validates them then creates a email to our IT department requesting them to set up WIFI access. what I would like to do is when they recieve this email, it contains a hyperlink to their version of the html form with all the details from the user form auto populated into the input fields. Can this be done? any help/advice out there?
 
Thank you.
 
code for user form - 
 
 <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="requestForm.css">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Guest WIFI request form</title>
<script>
function validateForm()
{
var Fname = document.getElementById("Fname"); <!-- navigate up the DOM tree to find the user input boxes by their id's -->
var company = document.getElementById("company");
var email = document.getElementById("email");
var isValid = false;

if (Fname.value.length == 0 && company.value.length == 0 && email.value.length == 0) <!-- if statement to test if the boxes length are equal to 0 -->
{
Fname.style.background = 'Yellow'; <!-- change the background color of the text boxes to help the user see which boxes they left empty -->
company.style.background = 'Yellow';
email.style.background = 'Yellow';
alert("You must enter values!"); <!-- pop up a message box to inform the user that they have left the boxes empty -->
return false;
}
else if (Fname.value.length == 0) <!-- pop up a message box to inform the user that they have left the Full Name box empty-->
{
alert("You must enter a value for Full Name");
return false;
}
else if (company.value.length == 0)
{
alert("You must enter a value for Company");
return false;
}
else if (email.value.length == 0)
{
alert("You must enter a value for Email");
return false;
}
else if (email.value.length > 0) <!-- if statement to test if the email is a valid format -->
{
var x = document.forms["myForm"]["email"].value; <!-- find the form and the email box -->
var atpos = x.indexOf("@"); <!-- defining that the @ sign needs to be included in the email string -->
var dotpos = x.lastIndexOf("."); <!-- derfining that a . sign must be included in the address -->
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address "+isValid); <!-- alert message that shows the user that the email they entered is not valid -->
return false; <!-- returning false to ensure the form does not get submitted with an invalid email address -->
}
else
{
isValid = true;
send();
}
}
}
function send()
{
var link = 'mailto:[email protected]?subject= Guest WIFI request'
+'&body=A request for guest WIFI access was made. Details:- %0D%0A'
+'%0D%0A Name: '+document.getElementById('Fname').value +
'%0D%0A Company: '+document.getElementById('company').value +
'%0D%0A Email: '+document.getElementById('email').value;
window.location.href = link;
}
</script>
</head>
<body>
<h1 align="center">Guest WIFI request</h1>
<h2 align="center">Please enter the details below to create a Guest WIFI login:</h2>
<FORM name="myForm" METHOD="post" enctype="text/plain" onsubmit="return validateForm()">
<table align="center">
<tr><td>Full Name</a></td><td> <input type="text" name="Fname" id="Fname" maxlength="50" size="50" ></td></tr>
<tr><td>Company</a></td><td> <input type="text" name="Company" id="company" maxlength="100" size="50" ></td></tr>
<tr><td>Email Address</a></td><td> <input type="text" name="Email Address" id="email" maxlength="100" size="50" ></td></tr>

<tr><td><Input type="reset" value="Reset"></a></td><td> <Input type="Submit" value="Request"></td></tr>
</td></tr>
</table>
</form>
</body>
</html>