|
JavaScript - Please Help. How To Create A Working Contact Form
Hello JScript gurus, though I am quite an advanced and experienced VB& .NET programmer, I am totally new to Jscript coding, (I don't actually code Jscript) but I build websites all the same too. I am also new here.
I really need help from you gurus here. I am working on a website and I really wish to incorporate a contact or an order form to it so that when the user fills in the fields and clicks send, I receive the data in my email. I have made some searches and found quite a few but all didn't touch on how I retrieve my data. Please help me. I will be very grateful. Thank you. Similar TutorialsNot totally sure this is in the correct section but here goes!... I've coded up my form in html / css and added some scripts i found online that should prevent users from submitting the form without the fields filled in. However the form only seems to work in chrome, safari and yet firefox it lets users submit without needing anything filled in. my form is he http://www.rhombusone.com/projecttiger/contact.html Also targeting the error text so that it appears below the field box instead of being all over the place, what value am i targeting? Thanks M Does someone know how to let 2 of the same type of contact form, working on the same page? Because i have the contact form on the footer of my page, and when you visit at the mennu: contact us, the same contact form will be shown. But it wont work, only the one in the footer. Hi, I have created a website which employs javascript contact forms. There is a javascript contact form located on the left of every page of the website which works fine but on the contact page where there are two forms the main form on the page does not work. The contact us page is located he http://www.goodletterwriting.co.uk/contact-us.html The two javascript files that are being used a http://www.goodletterwriting.co.uk/scripts/scripts.js & http://www.goodletterwriting.co.uk/scripts2/scripts2.js Can somebody please help? Thanks in advance, Peter Basically I can't get it to work. I'm following this tutorial and I'm not able to hide the error messages, or just get the form to submit. I could really use some direction. Here is the page I am working on: http://www.mustlovepink.com/public_html/contact.php Code: // Form submission
$('#contact-form').submit(function()
{
// Hide any message
$('span#contact-msg').css('opacity', 0);
// Build data string
var fields = [ 'name', 'email', 'message' ];
var data = 'ajax=1';
for (var i = 0; i < fields.length; i++)
data += '&' + fields[i] + '=' + encodeURI($('#' + fields[i]).val());
// Submit
$.ajax( { url : $('#contact-msg').attr('action'),
dataType: 'json',
data: data,
type: 'POST',
success: function(data)
{
if (data.sent == true)
{
$('span#contact-msg').html('Thanks for the message. I will get back to you as soon as possible.');
$('#send').css('backgroundPosition', '-207px -168px');
$('#send').attr('disabled', 'disabled');
}
else
$('span#contact-msg').html(data.error);
$('span#contact-msg').animate( { opacity: 1 }, 400);
}
});
return false;
});
I got this code for an contact form, but where can I set the email address to send to? i cant see to get my finger on the validation correctly, im trying to achieve that: (*) Required fields are required in the final submission All other fields are validated by their content type But all fields without (*) Required are not needed for the form to be submitted http://www.on-media.co.uk/clients/hlmd/ http://www.on-media.co.uk/clients/hl...ipt/contact.js is the below code: Code: function formValidator(){
// Make quick references to our fields
var name = document.getElementById('name');
var sname = document.getElementById('sname');
var phone = document.getElementById('phone');
var cell = document.getElementById('cell');
var calltime = document.getElementById('calltime');
var email = document.getElementById('email');
var address = document.getElementById('address');
var zip = document.getElementById('zip');
var loana = document.getElementById('loana');
var loanb = document.getElementById('loanb');
var balance = document.getElementById('balance');
// Check each input in the order that it appears in the form!
if(isAlphabet(name, "Please enter only letters for your name")){
if(isAlphabet(sname, "Please enter only letters for your surname")){
if(isNumeric(phone, "please enter only numbers for your phone number")){
if(isNumeric(cell, "please enter only numbers for your cell number")){
if(madeSelection(calltime, "Please select a time for your callback")){
if(isAlphanumeric(address, "please enter your address in numbers and letters")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(emailValidator(email, "Please enter a valid email address")){
if(isAlphanumeric(loana, "Please enter the value of your loan")){
if(isAlphanumeric(loanb, "Please enter the value of your loan")){
if(madeSelection(balance, "Select the duration you are behind on your loan re-payments")){
return true;
}
}
}
}
}
}
}
}
}
}
}
return false;
}
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
is my form: Code: <form onsubmit='return formValidator()' ><div id="contactfC">
<div id="contactf1">
<table width="240" border="0">
<tr>
<td width="102"><span style="color:#F00;">*</span>Name:</td>
<td width="108"><input name="name" type="text" id="name" size="15" /></td>
</tr>
<tr>
<td><span style="color:#F00;">*</span>Surname:</td>
<td><input name="sname" type="text" id="sname" size="15" /></td>
</tr>
<tr>
<td><span style="color:#F00;">*</span>Phone Number:</td>
<td><input name="phone" type="text" id="phone" size="15" /></td>
</tr>
<tr>
<td>Cell Number:</td>
<td><input name="cell" type="text" id="cell" size="15" /></td>
</tr>
<tr>
<td>Best time to call:</td>
<td><select name="calltime" id="calltime">
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
<option value="Evening">Evening</option>
<option value="Anytime">Anytime</option>
<option value="Please Choose" selected="selected">Please Choose</option>
</select></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" id="address" cols="15" rows="3"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="contactf2">
<table width="245" border="0">
<tr>
<td width="133"><span style="color:#F00;">*</span>Zip Code:</td>
<td width="118"><input name="zip" type="text" id="zip" size="15" /></td>
</tr>
<tr>
<td><span style="color:#F00;">*</span>Email:</td>
<td><input name="email" type="text" id="email" size="15" /></td>
</tr>
<tr>
<td><span style="color:#F00;">*</span>1st Loan Amount:</td>
<td><input name="loana" type="text" id="loana" size="15" /></td>
</tr>
<tr>
<td>2nd Loan Amount:</td>
<td><input name="loanb" type="text" id="loanb" size="15" /></td>
</tr>
<tr>
<td><span style="color:#F00;">*</span>Balance Past Due:</td>
<td><select name="balance" id="balance">
<option value="One Month">1 Month</option>
<option value="Two Months">2 Months</option>
<option value="Three Months">3 Months</option>
<option value="Four Months">4 Months</option>
<option value="Five Months +">5 Months +</option>
<option value="Not Applicable">N/A</option>
<option value="Please Choose" selected="selected">Please Choose</option>
</select></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</div>
</div></form>
i appricate any help thanks I already have the html and the php part of my form. My Form already can be verified using only php, but i would also like it to use javascipt so they dont have to load a new page just to say ''this field is blank"" im not very intelligent with javascipt so im just looking that if the user does not have a field that is needed that a red mark comes up around it or next to it saying you need to fill it out. Im using php also for verification just incase someone turns on JavaScript on there browser.. heres my php file Code: <!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>Untitled Document</title>
</head>
<?php
$errors = '';
$myemail = 'support@ludemanndistributors.net';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!eregi(
"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email_address\n Message \n $message";
$headers = "From: $myemail";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
}
?>
<body>
</body>
</html>
and heres the html Code: <!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>Form</title>
</head>
<body>
<form action='process.php' method=post>
<table width="506" height="268" border="0">
<tr>
<td width="500"><label>
Name (required)<br />
<br />
<input type="text" size="40" maxlength="40" name="Name">
<br />
</label></td>
</tr>
<tr>
<td><label>
Email Address (required)<br />
<br />
<input type="text" size="40" maxlength="40" name="Email">
</label></td>
</tr>
<tr>
<td><label>
Date of Birth (required)<br />
<br />
<select name='Month'>
<option selected></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name='Day'>
<option selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name='YYYY'>
<option selected></option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
</label></td>
</tr>
<tr>
<td>
<label>
Comments (required)<br />
<br />
<textarea rows="5" cols="45" name="Comment" wrap="physical"></textarea><br />
</label></td>
</tr>
</table>
<p>
<label>
<input type="submit" name="Submit" id="button" value="Submit" />
<input type="reset" name="Reset" id="button" value="Reset" />
</label>
</p>
</form>
</body>
</html>
</html>
Thanks in advance. I have heard that it is wrong to just do client validtion. SO can anyone help me with my form? The code below, has client validation and php and I am not sure that I have got it right. Also I would need to cover server side validation too but have no idea on how to do this. I must say I have very small knowledge of JS. Does anyone know the easiest method of doing forms with php, JS server and client side validation. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta content="Seniors community venue contact details, Seniors community venue contact form, email, address, and telephone number" name="description" />
<meta content="Seniors community venue contact form, email, telephone, address" name="keywords" />
<title>Seniors Community Venue - Contact details</title>
<link href="../styles/mainstyle.css" rel="stylesheet" type="text/css" />
<link href="../styles/navigation.css" rel="stylesheet" type="text/css" />
<link href="../styles/layout.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Cabin|Ubuntu" rel="stylesheet" type="text/css" />
<link href="../styles/form.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../javascript/validate.js"></script>
<style type="text/css">
.antispam {
display: none;
}
</style>
<script type="text/javascript">
var first = "enquiries";
var last = "seniors260.org";</script>
</head>
<body>
<div id="bodyblock">
<div id="container">
<div id="header">
<div class="indentmenu">
<ul>
<li><a href="faqs.html">FAQS</a></li>
<li><a href="venue_location.html">Location</a></li>
<li><a href="about_us.html">About Us</a></li>
<li class="first"><a href="home.html">Home</a></li>
</ul>
</div>
<div class="logo_venue">
<img alt="Seniors Community Venue logo" height="100" src="../images/venue_logo.gif" width="200" title="Return to hompage" /></div>
<div class="top2">
<p class="tagtitle">"The best community venue<br />
your money can buy"</p>
<address class="top">
260 Stanstead Road<br />
London SE23 1DD<br />
020 8699 4977</address>
</div></div>
<div class="indentmenu2">
<ul>
<li><a href="room_hire.html">Room Hire</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="album.html">Photo Album</a></li>
<li class="first2"><a href="venue_donations.html">Donations</a></li>
</ul>
</div>
<div id="content">
<h1>Venue Contact Details</h1>
<h2>Contact Form</h2>
<div id="form_box">
<form id="form" action="../php_files/submit2.php" onsubmit="return validate()" enctype="multipart/form-data" method="post" name="form_to_email" />
<fieldset>
<legend>Contact Form</legend>
<p><label for="name"><span>Name</span></label><input id="name" name="name" size="35" type="text" /></p>
<p><label for="email"><span>Email</span></label><input id="email" name="email" size="35" type="text" /></p>
<p><label for="subject"><span>Subject</span></label><input id="subject" name="subject" size="35" type="text" /></p>
<p class="antispam">Leave this empty: <br />
<input name="url" /></p>
</fieldset><fieldset>
<legend>Message</legend>
<textarea id="message" cols="50" name="message" rows="10"></textarea></fieldset><fieldset>
All fields Required </fieldset><p>
<input id="submit" name="submit" type="submit" value="Submit" /></p>
Friends, I want a simple contact form of 3 fields on my website which emails data on my email address or write a file on my server or just other any way inform me that data. But I dont want that "submit" button redirects to other 'thankyou' page where code is located. Plzzzzzzzz suggest or tell me what I have to do?? Hi Everybody. i have a contact form here PHP Code: <form id="form1" method="post" action="/contact.php" onsubmit="return validate(this)"> <p> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="number">Mobile:</label> <input type="text" name="number" id="number" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <img src="alert.gif" alt="" class="alertImg" /> </p> <p> <label for="msg">Comments:</label> <textarea name="msg" id="msg" cols="30" rows="3"></textarea> <img src="alert.gif" alt=""class="alertImg" /> </p> <p> <input class="submit_btn" type="image" src="images/submit_btn.gif" name="submit" value="Submit" /></p> <!-- --> </form> and i have an external js script to validate the form and the code is below PHP Code: var alertImgs = []; var nImage = ""; function validate(nForm){ for (i=0; i<alertImgs.length; i++) { nImage[alertImgs[i]].style.visibility = "hidden"; } var nName = nForm['name']; var nMobile = nForm['number']; var nEmail = nForm['email']; if (nFirstName.value.replace(/s/g, "").length < 1) { alert('Please Enter Your Name'); document.images[alertImgs[0]].style.visibility = "visible"; return false; } if (!/[ds-]+$/.test(nmobile.value) || !/d{10}/.test(nmobile.value.replace(/[s-]/g, ""))) // must contain 10 digits; { alert('Enter your mobile phone number'); document.images[alertImgs[2]].style.visibility = "visible"; return false; } if (!/^w+[w|.|-]{0,1}w*[w|.|-]{0,1}w*@w+[w|-]{0,1}w*[w|-]{0,1}w*.{1,1}[a-z]{2,4}$/.test(nEmail.value)) { alert('Invalid Email'); document.images[alertImgs[3]].style.visibility = "visible"; return false; } if (nForm['msg'].value == "") { alert('Please write a comment'); document.images[alertImgs[4]].style.visibility = "visible"; return false; } alert('Thank you for your submission'); return true; } function init(){ nImage = document.images; var imgFileName = ""; for (i=0; i<nImage.length; i++) { imgFileName = nImage[i].src; imgFileName = imgFileName.substring(imgFileName.lastIndexOf("/")+1,imgFileName.length) if (imgFileName == "alert.gif") { alertImgs[alertImgs.length] = i; nImage[i].style.visibility = "hidden"; } } } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); Could anyone tell me why it wont work for me and is there any problem with the code? Thanks for your help if you give some Hei! I am trying to use a contact form which appears in a lightbox from : http://www.xul.fr/javascript/lightbox-form.html It is working great but, of course I have a problem. My page is very big and when I want my page to scroll to the point where the form is. I am using window.scrollTo function. the problem is that before scrolling to that point , it automatically scrolls to the coordinates (0,0) and only after that. I am posting my javascript and css code. Thanks for your help ! JAVASCRIPT Code:
function gradient(id, level)
{
var box = document.getElementById(id);
box.style.opacity = level;
box.style.MozOpacity = level;
box.style.KhtmlOpacity = level;
box.style.filter = "alpha(opacity=" + level * 100 + ")";
box.style.display="block";
if(id=='boxa')
{
window.scrollTo(2500,0);
}
else
{
window.scrollTo(100,100);
}
return;
}
function fadein(id)
{
var level = 0;
while(level <= 1)
{
setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
level += 0.01;
}
}
function openbox(formtitle, fadin,boxtitle,boxN)
{
var box = document.getElementById(boxN);
document.getElementById('filter').style.display='block';
//var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
// var btitle = document.getElementById(boxtitle);
// btitle.innerHTML = formtitle;
if(fadin)
{
gradient(boxN, 0);
fadein(boxN);
}
else
{
box.style.display='block';
}
}
// Close the lightbox
function closebox()
{
document.getElementById('box').style.display='none';
document.getElementById('filter').style.display='none';
document.getElementById('boxa').style.display='none';
document.getElementById('filter').style.display='none';
}
CSS Code:
#filter
{
display: none;
position: absolute;
top: -500px;
left: -500px;
width: 7200px;
height: 3300px;
background-color: #000;
z-index:10;
opacity:0.5;
filter: alpha(opacity=50);
}
#box
{
display: none;
position: absolute;
top: 20%;
left: 20%;
width: 400px;
height: 200px;
padding: 48px;
margin:0;
border: 1px solid black;
background-color: white;
z-index:101;
overflow: none;
}
#boxtitle
{
position:absolute;
float:center;
top:0;
left:0;
width:496px;
height:24px;
padding:0;
padding-top:4px;
left-padding:8px;
margin:0;
border-bottom:4px solid #3CF;
background-color: #09c;
color:white;
text-align:center;
}
#boxa
{
display: none;
position: absolute;
top: 350px;
left: 2950px;
width: 700px;
height: 200px;
padding: 48px;
z-index:101;
overflow: visible;
/* background-image: url(../imagini/tutorial.png); */
background-repeat:no-repeat;
}
Hi! I would like to show you guys the JavaScript that i using for my contact form /*----- Code goes here by clicking the link -----*/ http://web.ezenne.com/js/completeValid.js The above code was copied from a Youtube tutorial about JavaScript. I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted? Thanks! Regards, Ezenne Hey there guys, I am building a site of which I would like the contact information and form to pop up from the button on the menu/header frame into the main frame as a lightbox ...no matter which page is loaded in the main frame. I was trying to experiment with the archived "jQuery Contact form for your website" tutorial from web devlopment blog . com. (I didnt want to post a link to it as I dont want to possibly flag the moderators) Any Ideas? Go to http://whitetailfantasies.com to see the layout and what I am going for. Thanks Hello, I have an existing php contact form which incorporates php validation (required name with only characters, valid email address format, and minimum message length) and re-captcha. I would like to add some "real time" validation to the fields on my form (there are 3 fields - name, email and message) before the "Submit" button is pressed. For example when the user tabs from one text box to the next but hasn't filled in the required information. I am totally new to any type of java, but am I right in thinking I need either JavaScript, Ajax or JQuery to perform real-time validation? If so, which should I be looking into and are there any basic examples of form validation? I want to keep my pup validation as I'm aware that php is client-side but still needed as people can turn Java off in their web browsers. Any tips and pointers will be very much appreciated! Thankyou, Tom for(var i=0; i<orderItemIndex; i++){ document.writeln('<tr>'); } document.writeln('<td>' + orderItemIndex[0] + '</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td>'); document.writeln('</tr>'); } orderItemIndex is an array with user inputs in it, I'm trying to make a new row for each individual array, the table is creating correctly but the loop is not working, if several inputs are added it just outputs the last input to one row, instead of making a new one each time, what am I missing? (The code above has other problems I know but I'm working on this first) Reply With Quote 01-07-2015, 06:50 PM #2 sunfighter View Profile View Forum Posts Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts document.write() is a horrible way to do anything. It certainly will not insert anything, what it does is over write anything on your page so if you have a table defined with HTML the document.write() will wipe it out. Look at HTML DOM Table insertRow() Method Can someone see what is wrong with this code: Code: frm=document.createElement('form')
frm.action="/cgi-sys/formmail.pl"
frm.method="POST"
fld=document.createElement('textarea')
fld.appendChild(document.createTextNode(simpleCart.items))
frm.appendChild(fld)
It is supposed to dynamically create a textarea and fill it up with the return of simpleCart.items() From the these form fields I want to be able to create an array in Javascript containing the same 'codes' that feature between the option tags (not the value="X") Code: <select name="options-1" id="options-1"> <option value="">Select an option</option> <option value="1">KA-WH</option> <option value="2">KA-BK</option> <option value="3">KA-GN</option> </select> <select name="options-2" id="options-2"> <option value="">Select an option</option> <option value="4">BADGE-1</option> <option value="5">BADGE-2</option> <option value="6">BADGE-3</option> </select> <select name="options-3" id="options-3"> <option value="">Select an option</option> <option value="7">E-WH</option> <option value="8">E-GD</option> <option value="9">E-BK</option> </select> for example, from the above, I want a JS array for 'option-1' that contains KA-WH, KA-BK and KA-GN; plus an array for 'option-2' that contains BADGE-1, BADGE-2 and BADGE-3. The above form fields will be created dynamically, may contain more or fewer items. I then want to use the JS arrays to pull in images of which filenames match the 'code' in the array. Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
Alright so this is my problem. I'm using ajax to validate my form without refreshing the page. Everything works but the message part of my contact form. The name, email, and subject get passed but the message returns back as "undefined". I've looked through some of the older posts with the keyword being undefined and I didn't really find anything that helped. I've been trying to get this working for like days now an I'm sure its something really simple and right under my nose. So I will post my html for the form and the validation code. I want to thank all who help. Here is the HTML Code: <div id="forminfo">
<form name="contact" method="post" action="">
<dl>
<dt id="name"><label for="fName" class="">Name</label></dt>
<dd><input type="text" class="text" name="fName" id="fName" style="width:200px; height:20px;" /></dd>
<label class="error" for="fName" id="fName_error">This field is required.</label>
<dt id="eMail"><label for="email" class="">Email</label></dt>
<dd><input type="text" class="text" name="email" id="email" style="width:200px; height:20px;" /></dd>
<label class="error" for="email" id="email_error">This field is required.</label>
<dt id="subject"><label for="subject">Subject</label></dt>
<dd><input type="text" size="8" maxlength="40" name="subject" id="subj" style="width:200px; height:20px;" class="text" /></dd>
<label class="error" for="subject" id="subj_error">This field is required.</label>
<dt id="comments">Message</dt>
<dd><textarea name="memo" class="text2" id="memo"></textarea></dd>
<dd><input type="submit" class="button" id="submit" name="submit" value="" /></dd>
</dl>
</form>
</div><!--forminfo-->
Here is the JavaScript/AJAX Code: $(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#fName").val();
if (name == "") {
$("label#fName_error").show();
$("input#fName").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var subject = $("input#subj").val();
if (subject == "") {
$("label#subj_error").show();
$("input#subj").focus();
return false;
}
var comments = $("input#memo").val();
if (comments == "") {
$("input#memo").focus();
return false;
}
var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + comments;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('.formContainer').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>I will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#fName").select().focus();
});
I'm new at JavaScript and not sure if what I want to do is possible. This is part of the code from a larger check-in form. This code adds a new row as needed and should also enable the text fields only after the check box is selected. It is not working as expected and I am missing what the problem may be or if this is even possible. Any help would be appreciated. [CODE] <!DOCTYPE html> <html lang="en"> <title></title> <script type="text/javascript"><!-- function addRow() { tabBody=document.getElementById("data"); row=document.createElement("TR"); cell1 = document.createElement("TD"); checknode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0"); checknode2 = document.createElement("input"); checknode2.name="guest[]"; checknode2.id='guest[]'; checknode2.type="checkbox"; checknode2.setAttribute('onclick', 'disablefields();'); cell2 = document.createElement("TD"); textnode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); textnode2=document.createElement("input"); textnode2.type="text"; textnode2.name='guestc[]'; textnode2.id='guestc[]'; textnode2.setAttribute('disabled',''); textnode2.size="7"; textnode2.maxlength="9"; textnode2.setAttribute('onkeyup', 'this.value = this.value.toUpperCase();'); cell3 = document.createElement("TD"); textnode3=document.createElement("input"); textnode3.type="text"; textnode3.name="guestn[]"; textnode3.id='guestn[]'; textnode3.setAttribute('disabled',''); textnode3.size="20"; textnode3.maxlength="30"; cell4 = document.createElement("TD"); checknode3 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); checknode4 = document.createElement("input"); checknode4.name="food[]"; checknode4.id='food[]'; checknode4.type="checkbox"; checknode4.value="breakfast"; cell1.appendChild(checknode1); cell1.appendChild(checknode2); row.appendChild(cell1); tabBody.appendChild(row); cell2.appendChild(textnode1); cell2.appendChild(textnode2); row.appendChild(cell2); tabBody.appendChild(row); cell3.appendChild(textnode3); row.appendChild(cell3); tabBody.appendChild(row); cell4.appendChild(checknode3); cell4.appendChild(checknode4); row.appendChild(cell4); tabBody.appendChild(row); } --> </script> <SCRIPT LANGUAGE="JavaScript"> <!-- function disablefields(){ if (document.getElementById('guest[]').checked == 0){ document.getElementById('guestc[]').disabled='disabled'; document.getElementById('guestc[]').value=''; document.getElementById('guestn[]').disabled='disabled'; document.getElementById('guestn[]').value=''; document.getElementById('food[]').disabled='disabled'; document.getElementById('food[]').value=''; }else{ document.getElementById('guestc[]').disabled=''; document.getElementById('guestc[]').value='Call Sign'; document.getElementById('guestn[]').disabled=''; document.getElementById('guestn[]').value='Enter Name'; document.getElementById('food[]').disabled=''; document.getElementById('food[]').value='breakfast'; } } --> </SCRIPT> </head> <body> <form name="checkin" method="post"> <table> <tbody id="data"> <tr><td> <input type="checkbox" name="guest[]" id="guest" onclick="disablefields()"></td> <td> <input type="text" disabled name="guestc[]" id="guestc[]" size="7" maxlength="9" value="" onkeyup="this.value = this.value.toUpperCase();" /></td> <td><input type="TEXT" name="guestn[]" disabled id="guestn[]" size="20" maxlength="30" value=""></td> <td> <input type="checkbox" name="food[]" disabled id="food[]" value="breakfast"></td></tr> </tbody> </table> <table border="0" width="100%"> <tr> <td><input type="button" value="Add new check-in" onclick="addRow();" /></td> </tr> </table> </form> </body> </html> [CODE] |
|||||||