Response title
This is preview!
form
in Using jQuery
•
12 years ago
hi
I send my entire code
Html code:
<!DOCTYPE html>
<html>
<head>
<title>Overstock</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<style type="text/css">
</style>
<script src="core.js"></script>
</head>
<body>
<form name="contact" id="contact" method="post" rel="external">
<!--<span id="errm">Please complete the fields below with your information and any questions you may have and we'll respond as soon as we can.</span>-->
<fieldset data-role="fieldcontain">
<label for="name">Name:<sup style="color:#F00;">*</sup></label>
<input type="text" name="name" id="name" value="" class="required" title="name"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="name">Phone:</label>
<input type="number" name="phone" id="phone" value="" title="phone"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="name">E-mail Address:<div class="warning" style="display:inline;"></div></label>
<input type="text" name="email" id="email" value="" class="required email" title="E-mail"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="message">Have any questions?</label>
<textarea rows="5" cols="45" name="message" id="message" title="Message"></textarea>
</fieldset>
<!--<label for="checkbox" style="font-size:10px; font-weight:normal; text-shadow:none; padding:10px;"><input type="checkbox" name="checkbox" id="check">Yes, I would like to join the overstockArt.com <br> newsletter and receive exclusive discounts <br> and advance notice of sales and new arrivals.</label>-->
<p><span style="float:left; ">
<input type="checkbox" name="checkbox" id="checkbox"></span>
<span style="float:left; padding:5px 0 0 40px; font-size:10px;">Yes, I would like to join the overstockArt.com <br> newsletter and receive exclusive discounts <br> and advance notice of sales and new arrivals.</span><br></p>
<div style="clear:both"></div>
<span id="errm">Please Enter the field...<br></span>
<fieldset data-role="filedcontain">
<input type="button" name="Submit" onClick="doSubmit('contact');" value="Submit" data-icon="check">
</fieldset>
</form>
</body>
</html>
JS code
// JavaScript Document
$(document).ready(function(){
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
$("div.warning").html("<span class='red'>*</span>");
}
else
{
$("div.warning").html("<span class='red'></span>");
}
});
});
function isValidEmail(e){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; return filter.test(e);
}
function doSubmit(form){
var allOk = true;
$("#"+form+" INPUT.required, "+"#"+form+" TEXTAREA.required").each(function(){
var $ele = $(this);
if ($ele.val() == ''){allOk = false; $ele.addClass("err");}
else{$ele.removeClass("err");}
if ($ele.hasClass("email")){
if (! isValidEmail($ele.val())){ $ele.addClass("err"); allOk = false;}
}
});
if (! allOk){$('#errm').show();} else{doPost(form)};
}
function doPost(form){
//alert(">>>>>>>>>>");
var name=$('#name').val();
var phone=$('#phone').val();
var emailadd=$('#email').val();
var message=$('#message').val();
//alert(name+" "+emailadd);
$.post("contactus.php", { name: name,phone:phone, email: emailadd, message:message},
function(data) {
$("#success").html(data);
// alert(data);
if(data == 'success')
{
window.location.href="contact.html"
}
});
}
PHP code
<?php
$name = $_REQUEST['name'];
$phone=$_REQUEST['phone'];
$email = $_REQUEST['email'];
$message = $_REQUEST['message'];
$headers = "From:" . $email;
$msg = "Name: $name \n Phone: $phone \n Email: $email \n Message: $message \n";
$subject= "Mail from " .$name;
mail("ss@gmail.com", $subject, $msg, "From:" .$email);
echo "success";
?>
I send my entire code
Html code:
<!DOCTYPE html>
<html>
<head>
<title>Overstock</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<style type="text/css">
</style>
<script src="core.js"></script>
</head>
<body>
<form name="contact" id="contact" method="post" rel="external">
<!--<span id="errm">Please complete the fields below with your information and any questions you may have and we'll respond as soon as we can.</span>-->
<fieldset data-role="fieldcontain">
<label for="name">Name:<sup style="color:#F00;">*</sup></label>
<input type="text" name="name" id="name" value="" class="required" title="name"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="name">Phone:</label>
<input type="number" name="phone" id="phone" value="" title="phone"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="name">E-mail Address:<div class="warning" style="display:inline;"></div></label>
<input type="text" name="email" id="email" value="" class="required email" title="E-mail"><br>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="message">Have any questions?</label>
<textarea rows="5" cols="45" name="message" id="message" title="Message"></textarea>
</fieldset>
<!--<label for="checkbox" style="font-size:10px; font-weight:normal; text-shadow:none; padding:10px;"><input type="checkbox" name="checkbox" id="check">Yes, I would like to join the overstockArt.com <br> newsletter and receive exclusive discounts <br> and advance notice of sales and new arrivals.</label>-->
<p><span style="float:left; ">
<input type="checkbox" name="checkbox" id="checkbox"></span>
<span style="float:left; padding:5px 0 0 40px; font-size:10px;">Yes, I would like to join the overstockArt.com <br> newsletter and receive exclusive discounts <br> and advance notice of sales and new arrivals.</span><br></p>
<div style="clear:both"></div>
<span id="errm">Please Enter the field...<br></span>
<fieldset data-role="filedcontain">
<input type="button" name="Submit" onClick="doSubmit('contact');" value="Submit" data-icon="check">
</fieldset>
</form>
</body>
</html>
JS code
// JavaScript Document
$(document).ready(function(){
$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
$("div.warning").html("<span class='red'>*</span>");
}
else
{
$("div.warning").html("<span class='red'></span>");
}
});
});
function isValidEmail(e){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; return filter.test(e);
}
function doSubmit(form){
var allOk = true;
$("#"+form+" INPUT.required, "+"#"+form+" TEXTAREA.required").each(function(){
var $ele = $(this);
if ($ele.val() == ''){allOk = false; $ele.addClass("err");}
else{$ele.removeClass("err");}
if ($ele.hasClass("email")){
if (! isValidEmail($ele.val())){ $ele.addClass("err"); allOk = false;}
}
});
if (! allOk){$('#errm').show();} else{doPost(form)};
}
function doPost(form){
//alert(">>>>>>>>>>");
var name=$('#name').val();
var phone=$('#phone').val();
var emailadd=$('#email').val();
var message=$('#message').val();
//alert(name+" "+emailadd);
$.post("contactus.php", { name: name,phone:phone, email: emailadd, message:message},
function(data) {
$("#success").html(data);
// alert(data);
if(data == 'success')
{
window.location.href="contact.html"
}
});
}
PHP code
<?php
$name = $_REQUEST['name'];
$phone=$_REQUEST['phone'];
$email = $_REQUEST['email'];
$message = $_REQUEST['message'];
$headers = "From:" . $email;
$msg = "Name: $name \n Phone: $phone \n Email: $email \n Message: $message \n";
$subject= "Mail from " .$name;
mail("ss@gmail.com", $subject, $msg, "From:" .$email);
echo "success";
?>
1