Hi All,
What originally seemed like a simple form has turned into my worst nightmare because I had no clue about PHP and minimal javascript knowledge.
I have created an HTML form with some Javascript and PHP. I am finally able to get the code to work by sending email behind the scenes to appropriate branches. I ended up using PHPMailer.
- At this time I won’t be pulling data from a database, the fields will be filled in by user.
- This will be an internal form, launched from Sharepoint through a different server.
- I don’t need to validate email addresses because I have them built in behind the scenes in my php code.
- Now I have to figure out the best way to validate so that when a user fills out the form there are no empty fields. I have tried several different ways to validate but my success rate is not good.
Questions:
1.) Does PHP validation go at the beginning of HTML code?
2.) If so, how does one close it off? In other words does the closing ?>//closing PHP
go at the bottom of HTML code just above </html>?
3.) I do have a good working send.php that sends out an email with appropriate fields and content once form is submitted. I don’t think validation should go within this code. Right?
I need to validate the following required fields:
- Text fields (stock #, serial #, description, Requested by, Customer Information
- Requested Date Field (jScript Datepicker)
- 2 drop down fields
- Attached is my HTML code, like I said I have tried so many things. If I attempt to submit the form with blank fields I don’t receive any errors. I end up receiving blank emails -
Stock Number:
Serial Number:
Description:
Requested By:
Requested Date: Click to Select Date
Customer Info:
Requesting Branch:
Shipping Branch:
I hope someone can help me out.
Thanks in Advance…
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Transfer Form</title>
<link href="css/goods.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable tbody').append('<tr class="child"><td><input type="text" name="stockNumber" class="stocktext" id="stockNumber" /></td><td><input type="text" name="serialNumber" class="serialtext" id="serialNumber" /></td><td><input type="text" name="description" class="descripttext" id="description"/></td></tr>');
});
});
</script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<form name= "transfer" method="POST" action="send.php">
<fieldset>
<legend class="legend"> Transfer Form</legend>
<p class="currentdate">Current Date:
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script></p>
<p>
<table class="table">
<tr>
<td><span class="requiredtable">*</span> <span class="fieldtext">Stock Number</span></td>
<td><span class="requiredtable">*</span> <span class="fieldtext">Serial Number</span></td>
<td class="descripttd"><span class="descriptiontxt"> Description</span></td>
</tr>
</table>
<table id="myTable">
<tbody>
<tr>
<TD> <input name="stockNumber" type="text" class="stocktext" id="stockNumber" placeholder="Enter Stock Number" tabindex="1" /></TD>
<TD> <input type="text" name="serialNumber" class="serialtext" id="serialNumber" placeholder="Enter Serial Number" tabindex="2" /> </TD>
<TD> <input type="text" name="description" class="descripttext" id="description" placeholder="Enter Description" tabindex="3" /> </TD>
</tr>
</tbody>
</table>
<p><span class="required">*
</span><span class="fieldtext">Requested by:
</span>
<input type="text" name="Requested_by" required id="Requested_by" size="50" maxlength="500" tabindex="4">
<span class="requestdate"><span class="required">*</span> Requested Date:
<input type="text" name="requestedDate" required id="datepicker" value="Click to Select Date" tabindex="5"></span>
</p>
<p><span class="required">*</span>
<span class="fieldtext">Customer Info:</span>
<input type="text" name="Cust Info" required id="Cust_Info" size="50" maxlength="500" tabindex="6">
</p>
<label for="RequestingBranch">
<span class="required">*</span>
<span class="fieldtext"> Requesting Branch:</span>
</label>
<select class="select" name="R_branch" id="R_branch">
<option value="">Select One:
<option value="R_boston">Boston
<option value="R_Buffalo">Buffalo
<option value="R_Cinncinatti">Cinncinatti
<option value="R_columbia">Columbia
<option value="R_Dallas">Dallas
<option value="R_Fairfax">Fairfax
<option value="R_Kansas City">Kansas City
<option value="R_Los Angeles">Los Angeles
<option value="R_Orlando">Orlando
<option value="R_Raleigh">Raleigh
<option value="R_Toledo">Toledo
<option value="R_Topeka">Topeka
</select>
<label for="ShippingBranch">
<span class="required">*</span>
<span class="fieldtext"> Shipping Branch:</span>
</label>
<select class="select" name="S_branch" id="S_branch">
<option value="">Select One:
<option value="S_boston">Boston
<option value="S_Buffalo">Buffalo
<option value="S_Cinncinatti">Cinncinatti
<option value="S_columbia">Columbia
<option value="S_Dallas">Dallas
<option value="S_Fairfax">Fairfax
<option value="S_Kansas City">Kansas City
<option value="S_Los Angeles">Los Angeles
<option value="S_Orlando">Orlando
<option value="S_Raleigh">Raleigh
<option value="S_Toledo">Toledo
<option value="S_Topeka">Topeka
</select>
<br> <br>
<input name="submit" class="button" value="Submit Form" type="submit">
<input name="resetbutton" type="reset" id="resetbutton" value="Clear"></p>
</fieldset>
</form>
</body>
</html>