I have a form where i have JS form validation. But validation process is not working. The inserting process in working fine.
Below is the form for inserting the data into mysql Database-
<?php
session_start();
include("includes/connection.php");
include("header.php");
include("includes/adminmenu.php");
if(isset($_SESSION['username']))
{
//echo $_SESSION['username'];
?>
<!--Javasript Validation File Import -->
<script type="text/javascript" src="js/qcheck.js"></script>
<script type="text/javascript" language="JavaScript">
function HidePart(d) { document.getElementById(d).style.display = "none"; }
function ShowPart(d) { document.getElementById(d).style.display = "block"; }
function CheckboxChecked(b,d)
{
if(b) { ShowPart(d); }
else { HidePart(d); }
}
</script>
<br />
<div class="userstat">
<div style="background-color:#666666; text-align:center; font-weight:bold; color:#FFFFFF; font-size:24px;"><span>Insert A new Question</span></div>
<br />
<div class="statdata">
<form action="includes/insertq.php" method="POST" name="qform" onSubmit="return valide()">
<div style="text-align:center;">
<select name="subject" size="0">
<option selected="0" value="">Select Subject</option>
<option value="bangla">Bangla</option>
<option value="english">English</option>
<option value="physics">Physics</option>
<option value="chemistry">Chemistry</option>
<option value="math">Mathematics</option>
<option value="biology">Biology</option>
<option value="gk">General knowledge</option>
</select>
</div>
<br /><br />
<label for="question">Write Down the Question below</label>
<textarea name="question" rows="3" cols="40"></textarea><br /><br />
<label for="ans">Options</label><br /><br />
<label for="option1">a.</label>
<input type="text" name="option1" size="40" /><br />
<label for="option2">b.</label>
<input type="text" name="option2" size="40" /><br />
<label for="option3">c.</label>
<input type="text" name="option3" size="40" /><br />
<label for="option4">d.</label>
<input type="text" name="option4" size="40" /><br /><br />
<label for="correct">Correct.</label><br />
<input type="text" name="correct" size="40" /><br /><br /><br />
<div style="text-align:center;">
<input type="submit" name="submit" value="Submit Question" />
</div>
<br />
<br />
</form>
</div>
</div>
</body>
<?php
}
else
{
header("location: admin.php");
}
?>
<?php
include("includes/footer.php");
?>
and the Javascript file is
function valide()
{
var subject=document.forms["qform"]["subject"].value;
var question=document.forms["qform"]["question"].value;
var option1=document.forms["qform"]["option1"].value;
var option2=document.forms["qform"]["option2"].value;
var option3=document.forms["qform"]["option3"].value;
var option4=document.forms["qform"]["option4"].value;
var correct=document.forms["qform"]["correct"].value;
if(subject == null || Subject == "Select Subject")
{
alert("Select subject Type");
return false;
}
else if(question==null || question=="" || question.length<5)
{
alert("Insert Valid question");
return false;
}
else if(option1==null || option1=="")
{
alert("Insert Option 1.");
return false;
}
else if(option2==null || option2=="")
{
alert("Insert Option 2.");
return false;
}
else if(option3==null || option3=="")
{
alert("Insert option 3.");
return false;
}
else if(option4==null || option4=="")
{
alert("Insert option 4.");
return false;
}
else if(correct==null || correct=="")
{
alert("Insert correct option.");
return false;
}
}
case matters
if(subject == null || Subject == "Select Subject")
^
Subject !== subject
Also value is not going to be null. You should be checking for a length of zero.
Related
This is my index.html file. It has JavaScript but when JavaScript validation works >Submit button doesn't perform any action. But when I remove JavaScript code it submits the data to the database.
I need to understand where my code has faults or mistakes and why this is happening. How to validate that the arrival date should be smaller than the departure date.
<!DOCTYPE html>
<head>
<title>Book Accomodations</title>
<link rel="stylesheet" href="style.css">
<script>
function validate(){
var x =document.forms["myform"]["fname"].value;
var y =document.forms["myform"]["lname"].value;
var email =document.forms["myform"]["email"].value;
var filter = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var getSelectedValue = document.querySelector( 'input[name="payment"]:checked');
if (x == "" || x == null) {
alert("First Name must be filled out");
return false;
} else if (y == "" || y == null) {
alert(" Last Name must be filled out");
return false;
}
else if (!email.match(filter)) {
alert(" Enter Proper Email ID");
return false;
}
else if(document.getElementById("country").value == "")
{
alert("Please select a country");
return false;
} else if(getSelectedValue == null) {
alert("Select Payment Mode")
return false;
}
return false;
}
</script>
</head>
<body>
<div class="form">
<form name ="myform" action="function.php" onsubmit="return validate();" id="form" method="POST" >
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" /><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" /><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br>
<label for="arrival">Arrival Date:</label>
<input type="date" id="arrival " name="adate" ><br>
<label for="departure">Departure Date:</label>
<input type="date" id="departure " name="ddate" />
<br>
<label for="country">Choose a Country:</label>
<select id="country" name="country" form="myform" >
<option disabled selected value> -- select an option -- </option>
<option value="India">India</option>
<option value="U.S.A.">U.S.A.</option>
<option value="Nepal">Nepal</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Germany">Germany</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
</select>
<p>Payment Mode:</p>
<input type="radio" id="deb"
name="payment" value="Debit" />
<label for="deb">Debit Card</label>
<input type="radio" id="cred"
name="payment" value="Credit"/>
<label for="Credit">Credit Card</label>
<br>
<input type="submit" id="submit" name="submit" value="submit" style="width: 100px;"/>
<input type="reset" value="Reset" style="width: 100px; "/>
</form> </div>
</body>
You should return true at the end of your validate() function if your validation was successful. Right now you always return false. Thats why the button doesn´t seams to work.
Seems like you missed something.
You should return true after succesfull validation.
if (x == "" || x == null) {
alert("First Name must be filled out");
return false;
} else if (y == "" || y == null) {
alert("Last Name must be filled out");
return false;
} else if (!email.match(filter)) {
alert("Enter Proper Email ID");
return false;
} else if (document.getElementById("country").value == "") {
alert("Please select a country");
return false;
} else if (getSelectedValue == null) {
alert("Select Payment Mode")
return false;
} else {
return true;
}
Or just return true after if-else statement.
<!DOCTYPE html>
<html><head><title>CT Traders</title>
<style>
fieldset {width:40%; margin:0px 0px 10px 1%;}
legend {padding:2px; text-indent:5px;}
h2, p {margin-left: 1%;}
input[type="submit"], input[type="reset"]
{display:inline; float:none;}
</style>
<script>
//suggested logic for the validateInput() function
function validateInputs()
{
//check payment method
var methodChecked = false;
for (var i=0; i <document.frmCustOrders.class.length;i++)
{
if (document.frmCustOrders.class[i].checked ==true)
{
classChecked = true;
vClass = document.frmCustOrders.class[i].value;
}
}
//check customer index value
var customerIndex = document.getElementById("customer").value;
//retrieve order quantity
var qty = document.getElementById("qty").value;
//validate form data
if (customerIndex == -1) //validate customer
{
alert("Please select a customer.")
return false;
}
else if () //validate qty
{
}
else if (fsClassChecked == false) //validate payment method
{
alert("Please select a payment method.")
return false;
}
else //output
{
orderEntries = customer+ "\n"+ qty+ "\n"+vClass;
alert(orderEntries);
return false;
}
}
</script>
</head>
<body>
<h2>Customer Order</h2>
<form name="frmCustOrders" id="frmCustOrders"
onsubmit="return validateInputs();" action="">
<fieldset id="fsCustomer">
<legend>Customer List</legend>
<select name="customer" id="customer" size="3">
<option>107 Paula Harris</option>
<option>232 Mitch Edwards</option>
<option>229 BTC</option>
</select>
</fieldset>
<p>
<label for="qty">Order Quantity: </label>
<input type="text" name="qty" id="qty" />
</p>
<fieldset id="fsClass">
<legend>Payment Method</legend>
<input type="radio" name="method" id="check" value="check" />
Check<br />
<input type="radio" name="method" id="creditCard" value="credit card" />
Credit Card<br />
<input type="radio" name="method" id="debitCard" value="debit card" />
Debit Card
</fieldset>
<p> <input type="submit" value="Submit" />
<input type="reset" value="Reset" /></p>
</form>
</body>
</html>
I'm having issues getting an output box that retrieves the selections on the form.
Also, in one of my if statements I'm assigned to check if the value is between 1 and 999 but I'm drawing a total blank on this. I'm new to coding (Javascript) and this is my first class. Any help with getting this to work would be greatly appreciated.
There are some issues with your code
Redundant else if ()
fsClassChecked variable not declared.
Redundant class when iterate elements document.frmCustOrders.class
Use wrong variable customer should be customerIndex
Wrong condition (customerIndex == -1) change to (customerIndex == "")
//suggested logic for the validateInput() function
function validateInputs()
{
//check payment method
var methodChecked = false;
var fsClassChecked = false;
for (var i=0; i <document.frmCustOrders.length;i++)
{
if (document.frmCustOrders[i].checked ==true)
{
fsClassChecked = true;
vClass = document.frmCustOrders[i].value;
}
}
//check customer index value
var customerIndex = document.getElementById("customer").value;
//retrieve order quantity
var qty = document.getElementById("qty").value;
//validate form data
if (customerIndex == "") //validate customer
{
alert("Please select a customer.")
return false;
}
else if(qty == "" || qty < 1 || qty > 999){
alert("Please enter qty 1-999.")
return false;
}
else if (fsClassChecked == false) //validate payment method
{
alert("Please select a payment method.")
return false;
}
else //output
{
orderEntries = customerIndex + "\n"+ qty+ "\n"+vClass;
alert(orderEntries);
return false;
}
return false;
}
<!DOCTYPE html>
<html><head><title>CT Traders</title>
<style>
fieldset {width:40%; margin:0px 0px 10px 1%;}
legend {padding:2px; text-indent:5px;}
h2, p {margin-left: 1%;}
input[type="submit"], input[type="reset"]
{display:inline; float:none;}
</style>
<script>
</script>
</head>
<body>
<h2>Customer Order</h2>
<form name="frmCustOrders" id="frmCustOrders"
onsubmit="return validateInputs();" action="#">
<fieldset id="fsCustomer">
<legend>Customer List</legend>
<select name="customer" id="customer" size="3">
<option>107 Paula Harris</option>
<option>232 Mitch Edwards</option>
<option>229 BTC</option>
</select>
</fieldset>
<p>
<label for="qty">Order Quantity: </label>
<input type="text" name="qty" id="qty" />
</p>
<fieldset id="fsClass">
<legend>Payment Method</legend>
<input type="radio" name="method" id="check" value="check" />
Check<br />
<input type="radio" name="method" id="creditCard" value="credit card" />
Credit Card<br />
<input type="radio" name="method" id="debitCard" value="debit card" />
Debit Card
</fieldset>
<p> <input type="submit" value="Submit" />
<input type="reset" value="Reset" /></p>
</form>
</body>
</html>
I want to replace the after-submission checks in the form with on-the-fly completeness and correctness checks that are performed when a form field loses focus.
How can I do this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>Form</title>
<style>
body {
width: 500px;
}
.part {
width: 100%;
padding: 5px;
border-bottom: 1px solid #000;
}
label {
margin-right: 5px;
}
.label-left {
text-align: right;
}
.label-right {
text-align: left;
}
.error {
color: #cc0000;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
//$(document).ready(function() {
function myValidateEMailAddress(email_address) {
var email_pattern = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return email_pattern.test(email_address);
}
function checkPassword(pwd_str) {
var my_pwd_pattern = /^(?=.*[a-zA-Z].*[a-zA-Z])(?=.*\d.*\d)[a-zA-Z0-9_]{6,20}$/;
return my_pwd_pattern.test(pwd_str);
}
function validatePhoneNumber(phone_number) {
var phone_pattern = /^(\(?\+?[0-9]*\)?)?[0-9_\- \(\)]*$/;
return phone_pattern.test(phone_number);
}
$(document).ready(function() {
$('#form').submit(function(e) {
var my_errors = false;
$('.part> .error').remove();
$('#my_submission').empty();
$(':text, :password, textarea').each(function() {
$(this).val($.trim($(this).val()));
if ($(this).val() == '') {
$(this).parent().append('<div class="error">Please provide a value</div>');
my_errors = true;
}
});
if ($('#email').val() != '') {
if (!myValidateEMailAddress($('#email').val())) {
$('#email').parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
}
if ($('#your_password').val() != '') {
if (!checkPassword($('#your_password').val())) {
$('#your_password').parent().append('<div class="error">Please provide a correct password.</div>');
my_errors = true;
}
}
if ($('#phone').val() != '') {
if (!validatePhoneNumber($('#phone').val())) {
$('#phone').parent().append('<div class="error">Please provide a correct phone number.</div>');
my_errors = true;
}
}
if ($('#addresses option:selected').val() == '') {
$('#addresses').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="sex"]:checked').length == 0) {
$(':radio[name="sex"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($(':radio[name="subscription"]:checked').length == 0) {
$(':radio[name="subscription"]:first').parent().after('<div class="error">Please select one item</div>');
my_errors = true;
}
if ($('#likes option:selected').val() == '') {
$('#likes').parent().append('<div class="error">Please select one item</div>');
my_errors = true;
}
if (my_errors) {
return false;
}
else {
e.preventDefault();
var my_submission_array = $('#form').serialize().split('&');
if (my_submission_array.length > 0) {
$('#my_submission').html('<h2>Submitted Elements</h2><ul></ul>');
for (var i = 0; i < my_submission_array.length; i++) {
var my_pair = my_submission_array[i].split('=');
$('#my_submission > ul').append('<li>' + my_pair[0] + ': ' + my_pair[1] + '</li>\n');
}
}
}
});
});
// });
</script>
</head>
<body>
<h3>Output:</h3>
<h2>My Questionnaire</h2>
<form name="form" id="form" action="" method="post">
<div class="part">
<label for="addresses" class="label-left">How should you be addressed?</label>
<select name="addresses" id="addresses">
<option value="">Please select one</option>
<option value="first">Mr.</option>
<option value="second">Madam</option>
<option value="third">Miss</option>
<option value="fourth">Dr.</option>
<option value="fifth">Pr.</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Sex:</legend>
<input type="radio" name="sex" id="group1" value="1">
<label for="group1" class="label-right">Male</label>
<input type="radio" name="sex" id="group2" value="2">
<label for="group2" class="label-right">Female</label>
</fieldset>
</div>
<div class="part">
<label for="last_name" class="label-left">Last Name: </label>
<input type="text" name="last_name" id="last_name">
</div>
<div class="part">
<label for="first_name" class="label-left">First Name: </label>
<input type="text" name="first_name" id="first_name">
</div>
<div class="part">
<label for="email" class="label-left">E-Mail: </label>
<input type="text" name="email" id="email">
</div>
<div class="part">
<label for="your_password">Password:</label>
<input type="password" name="your_password" id="your_password" size="10" maxlength="20">
</div>
<div class="part">
<label for="phone" class="label-left">Phone number: </label>
<input type="text" name="phone" id="phone">
</div>
<div class="part">
<label for="likes" class="label-left">What are your likes?</label>
<select name="likes" id="likes">
<option value="">Please select one</option>
<option value="first">Programming</option>
<option value="second"> African literature</option>
<option value="third">Poetry</option>
<option value="four">Dancing</option>
</select>
</div>
<div class="part">
<fieldset>
<legend>Do you want to receive our newsletter ?</legend>
<input type="radio" name="subscription" id="group1" value="1">
<label for="group1" class="label-right">Yes</label>
<input type="radio" name="letter" id="group2" value="2">
<label for="group2" class="label-right">No</label>
</fieldset>
</div>
<div class="part">
<label for="comments" class="label-left">Write some comments below:</label>
<textarea name="comments" id="comments" cols="40" rows="3"></textarea>
</div>
<div class="part">
<input type="submit" name="submit" id="submit" value="Submit Form">
</div>
<div id="my_submission"></div>
</form>
</body>
</html>
Before I continue answering, I should note that you're putting jQuery script before <html> tag. This is incorrect. It has to be in <head>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
performed when a form field loses focus
An element loses focus when you click away from it. jQuery happends to have a blur event for this occasion:
$('input').on('blur', function() {
// your code here
});
So you might want to do it this way:
$('#email').on('blur', function() {
var emailVal = $(this).val();
if (!emailVal || !myValidateEMailAddress(emailVal)) {
$(this).parent().append('<div class="error">Please provide a correct e-mail address</div>');
my_errors = true;
}
});
the rest of the code might look similar.
On window load, only radio buttons and lable is display. Onclick of radio button only, want to put textboxes and buttons in front of each lable of radio buttons. Eg. Email me(lable)-textbox-email button-validation error in one single line. In code, it comes below the every lable which i don't want. I don't know how to do this. can anybody please tell me how to do this... Thanks in advance.
window.onload=function()
{
document.getElementById("emailhide").style.display = 'none';
document.getelementByid("phonehide").style.display = 'none';
document.getelementByid("chathide").style.display = 'none';
document.getelementByid("quehide").style.display = 'none';
}
function showemail()
{
if(document.getElementById("emailbtn").checked)
{
document.getElementById("emailhide").style.display='block';
document.getElementById("emailid").style.display='block';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
}
function showphn()
{
if(document.getElementById("callbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='block';
document.getElementById("phoneno").style.display='block';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
}
function showchat()
{
if(document.getElementById("chatbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='block';
document.getElementById("chat").style.display='block';
document.getElementById("quehide").style.display='none';
}
}
function showquotes()
{
if(document.getElementById("quebtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='block';
document.getElementById("que").style.display='block';
}
}
function validation1()
{
document.getElementById("emailid").innerHTML="";
var emailpattern=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if(document.form1.email_id.value=="")
{
//alert(document.getElementById("email_id").value);
document.getElementById("emailid").innerHTML="fields are mandetory";
document.form1.email_id.focus();
return false;
}
else if(!emailpattern.test(document.form1.email_id.value))
{
document.getElementById("emailid").innerHTML="enter valid id";
document.form1.email_id.focus();
return false;
}
return true;
}
function validation2()
{
document.getElementById("phoneno").innerHTML="";
var phoneno = /^[0-9]{10}$/;
if(document.form2.phn.value=="")
{
document.getElementById("phoneno").innerHTML="enter phone number";
document.form2.phn.focus();
return false;
}
else if(!phoneno.test(document.form2.phn.value))
{
document.getElementById("phoneno").innerHTML="Your contact Number must be 10 digits number.";
document.form2.phn.focus();
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span></form>
<form name="form2" method="post">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me<span id="chathide"><input style="display:none" type="submit" name="chat" id="chat" value="Go"/></span>
<br />
<input type="radio" value="que" name="select" id="quebtn" onclick="showquotes()" />
Detail Questionnarie<span id="quehide"><input type="submit" name="que" id="que" value="Go" style="display:none"/></span>
window.onload=function()
{
document.getElementById("emailhide").style.display = 'none';
document.getelementByid("phonehide").style.display = 'none';
document.getelementByid("chathide").style.display = 'none';
document.getelementByid("quehide").style.display = 'none';
}
function showemail()
{
document.getElementById("emailhide").style.display='block';
document.getElementById("emailid").style.display='block';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
function showphn()
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='block';
document.getElementById("phoneno").style.display='block';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='none';
}
function showchat()
{
if(document.getElementById("chatbtn").checked)
{
document.getElementById("emailhide").style.display='none';
document.getElementById("emailid").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='block';
document.getElementById("chat").style.display='block';
document.getElementById("quehide").style.display='none';
}
}
function showquotes()
{
document.getElementById("emailhide").style.display='none';
document.getElementById("phonehide").style.display='none';
document.getElementById("phoneno").style.display='none';
document.getElementById("chathide").style.display='none';
document.getElementById("quehide").style.display='block';
document.getElementById("que").style.display='block';
}
function validation1()
{
document.getElementById("emailid").innerHTML="";
var emailpattern=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
if(document.form1.email_id.value=="")
{
//alert(document.getElementById("email_id").value);
document.getElementById("emailid").innerHTML="fields are mandetory";
document.form1.email_id.focus();
return false;
}
else if(!emailpattern.test(document.form1.email_id.value))
{
document.getElementById("emailid").innerHTML="enter valid id";
document.form1.email_id.focus();
return false;
}
return true;
}
function validation2()
{
document.getElementById("phoneno").innerHTML="";
var phoneno = /^[0-9]{10}$/;
if(document.form2.phn.value=="")
{
document.getElementById("phoneno").innerHTML="enter phone number";
document.form2.phn.focus();
return false;
}
else if(!phoneno.test(document.form2.phn.value))
{
document.getElementById("phoneno").innerHTML="Your contact Number must be 10 digits number.";
document.form2.phn.focus();
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" />
<span id="emailid"></span></form>
<form name="form2" method="post">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" />
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me</a>
<br />
<input type="radio" value="que" name="select" id="quebtn" onclick="showquotes()" />
Detail Questionnarie<span id="quehide"><input type="submit" name="que" id="que" value="Go" style="display:none"/></span>
After my form is submitted, I'd like to reset my form to display the original blank values. Here's the code:
PHP Form
<form action="index.php" method="post" id="contact_form" >
<div id="topic_error" class="error"><img src="images/error.png" /> What category should this be filed in?</div>
<div>
<select name="topic" id="topic">
<option value="">Please select a topic...</option>
<option value=" Computer Repair ">Computer Repair</option>
<option value=" Website Design ">Website Design</option>
<option value=" Say Hi ">Just Want to Say Hi</option>
</select>
</div>
<h4>NAME:</h4><div id="name_error" class="error"><img src="iamges/error.png" /> Please enter your name</div>
<div><input class="contact_name" type="text" name="name" id="name" placeholder="Enter Name" /></div>
<H4>EMAIL:</H4><div id="email_error" class="error"><img src="images/error.png" /> Please enter your email</div>
<div><input class="contact_email" type="text" name="email" id="email" placeholder="you#mail.com" /></div>
<h4>SUBJECT:</h4><div id="subject_error" class="error"><img src="images/error.png" /> Please enter a subject</div>
<div><input class="contact_subject" type="text" name="subject" id="subject" placeholder="How did you become so awesome?" /></div>
<h4>MESSAGE:</h4><div id="message_error" class="error"><img src="images/error.png" /> Please give us a few more details</div>
<div><textarea class="contact_message" name="message" id="message" placeholder="Give us some details"></textarea></div>
<div id="mail_success" class="success"><img src="images/success.png" /> Thank you. The mailman is on his way.</div>
<div id="mail_fail" class="error"><img src="images/error.png" /> Sorry, we don't know what happened. Please try again later.</div>
<div id="cf_submit_p">
<input class="submit" type="submit" id="send_message" value="">
</div>
</form>
The contact.js file
$(document).ready(function(){
$('#send_message').click(function(e){
e.preventDefault();
var error = false;
var topic = $('#topic').val();
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#subject').val();
var message = $('#message').val();
if(topic.length == 0){
var error = true;
$('#topic_error').fadeIn(500);
} else {
$('#topic_error').fadeOut(500);
}
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
} else {
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('#') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
} else {
$('#email_error').fadeOut(500);
}
if(subject.length == 0){
var error = true;
$('#subject_error').fadeIn(500);
} else {
$('#subject_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
} else {
$('#message_error').fadeOut(500);
} if(error == false){
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
$.post("send_email.php", $("#contact_form").serialize(),function(result){
if(result == 'sent'){
$('#cf_submit_p').remove();
$('#mail_success').fadeIn(500);
} else {
$('#mail_fail').fadeIn(500);
$('#send_message').removeAttr('disabled').attr('value', 'Send Message');
}
});
}
});
});
I don't think the send_email.php file is needed, but I can put that up here if need be. I would assume (I know what happens when you assume) that this can be done with some sort of trigger in the javascript. I did try to add the line form.trigger('reset'); after the $('#mail_success').fadeIn(500); line but that did not work
It would be $("#contact_form").trigger("reset"), and $("#contact_form")[0].reset() should also work.
$('#contact_form').trigger('reset') should work.