Clearing form fields once data is submitted.
I have a form on my page with 11 fields and have implemented some error reporting if the user forgets to enter in something that is needed. I am using "isset" in each form field and echoing the data that the user submits.
In this way the user, should there be an error from a missing field, doesn't have to refill the entire form again.
However, once the data is submitted, with no errors, I would like the form to clear once the submit button is clicked.
I have looked online to see if there is a way to clear form fields but it involves javascript or jquery and the explanations were unclear. I have the php code below.
//initialize the variables for the form
$vcatid = 5; //this number corresponds to the id of "miscellaneous" in the video categories table
$vFile ='';
$vTitle ='';
$vAuthor = '';
$pic ='';
$alt ='';
$title ='';
$reported ='';
$pubDate ='';
$desc ='';
$refURL ='';
$errorMsg ='';
if (isset($_POST['submit'])) {
//grab the form data
$curnum = 0; //starts a count of the number of errors
$vFile = $_POST['vidfile'];
$vTitle = $_POST['vtitle'];
$vAuthor = $_POST['author'];
$pic = $_POST['picURL'];
$alt = $_POST['picALT'];
$title = $_POST['picTitle'];
//$reported = $_POST['post_date'];
$pubDate = $_POST['published_date'];
$desc = $_POST['description'];
$refURL = $_POST['ref_url'];
//check for errors
if (!$vFile) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. You forgot to enter the video file name.</span><br />';
}
if (!$vTitle) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. Your Video Needs a Title</span><br />';
}
if (!$vAuthor) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. Who is the original author?</span><br />';
}
if (!$pic) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. You need the path to the file for the pic thumbnail.</span><br />';
}
if (!$alt) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. Alternative text?</span><br />';
}
if (!$title) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. Title text?</span><br />';
}
if (!$pubDate) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. Date of original publication?<br />';
}
if (!$desc) {
$curnum ++;
$errorMsg .= '<span style="color:#ff0000">'.$curnum.'. A description is required.<br />';
}
//the below methods allow us to add special characters without fear of sql injection
$vFile = mysql_real_escape_string($vFile);
$vTitle = mysql_real_escape_string($vTitle);
$vAuthor = mysql_real_escape_string($vAuthor);
$pic = mysql_real_escape_string($pic);
$alt = mysql_real_escape_string($alt);
$title = mysql_real_escape_string($title);
$pubDate = mysql_real_escape_string($pubDate);
$desc = mysql_real_escape_string($desc);
$refURL = mysql_real_escape_string($refURL);
//done with error checking now perform the insert
if (empty($errorMsg)) {
$sqlInsert = mysql_query("INSERT INTO videos(vcid, vidfile, vtitle, author, picURL, picALT, picTitle, post_date, published_date, description, ref_url) VALUES('$vcatid', '$vFile','$vTitle', '$vAuthor', '$pic', '$alt', '$title', now(), '$pubDate', '$desc', '$refURL')") or die (mysql_error());
echo '<p style="color:#ff0000;">Article Successfully Created</p>';
}
}
?>
And the html code for the form
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post a Miscellaneous Video</title>
<link href="../css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="cform">
<p><?php echo $errorMsg; ?></p>
<form action="add_miscellaneous_video.php" method="post" enctype="multipart/form-data" name="behaviors1">
<div class="row">
<label><span class="label">Video Title:</span>
<input name="vtitle" type="text" class="formw" value="<?php if (isset($_POST['vtitle'])) { echo "$vTitle"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Video File Name:</span>
<input name="vidfile" type="text" class="formw" value="<?php if (isset($_POST['vidfile'])) { echo "$vFile"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Video Author:</span>
<input name="author" type="text" class="formw" value="<?php if (isset($_POST['author'])) { echo "$vAuthor"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Picture File Name:</span>
<input name="picURL" type="text" class="formw" value="<?php if (isset($_POST['picURL'])) { echo "$pic"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Alternative Text:</span>
<input name="picALT" type="text" class="formw" value="<?php if (isset($_POST['picALT'])) { echo "$alt"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Title Text:</span>
<input name="picTitle" type="text" class="formw" value="<?php if (isset($_POST['picTitle'])) { echo "$title"; } ?>"/>
</label>
</div>
<div class="row">
<label><span class="label">Published Date:</span>
<input name="published_date" type="text" class="formw" value="<?php if (isset($_POST['published_date'])) { echo "$pubDate"; } ?>" />
</label>
</div>
<div class="row">
<label><span class="label">Description:</span>
<textarea name="description" rows="10" class="formw" /><?php if (isset($_POST['description'])) { echo "$desc"; } ?></textarea>
</textarea>
</label>
</div>
<div class="row">
<label><span class="label">Referring Page:</span>
<input name="ref_url" type="text" class="formw" value="<?php if (isset($_POST['ref_url'])) { echo "$refURL"; } ?>" />
</label>
</div>
<p style="margin-top:2em;">
<input type="reset" name="reset" id="reset" value="Reset" />
<input name="submit" type="submit" value="submit" />
</p>
</form>
</div>
<!--/cform div-->
</body>
</html>
Any suggestions on clearing form fields after all data is received and submitted would be appreciated.
Thanks
