|
JavaScript - Small Problem With Contact Form Validation
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 Similar Tutorialsi 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 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>
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 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 again i hope somebody will help me to fix this problem I have a form which has not submit button but two options either to pay or to just submit so i use this in my code: Code: td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
so when they click on "Payments" they move to "payments.php and when they click on "More Information" they move to confirmation.php. Now my problem is i wants to validated it either through JavaScript or PHP but there is only one way i know with submit method. here i am using onClick function to move to other page. Please if somebody can help i much appericiate. here is the complete code of form i try to use PHP validation here but no luck please help me Code: <?php
if ($_POST['submit']) {
$title = $_POST['title'];
$name = $_POST['name'];
$insurance = $_POST['insurance'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$email = $_POST['title'];
$error = "";
if (!$title)
$error = $error. "Title <br />";
if (!$name)
$error = $error. "Name <br />";
if (!$insurance)
$error = $error. "National Insurance Number <br />";
if (!$address)
$error = $error. "Address <br />";
if (!$phone)
$error = $error. "Telephone Number <br />";
if (!$email)
$error = $error. "Email Address <br />";
if (!$error !="")
echo "Please Fill in The Following Required Fields <br /> $error";
else {
return $_POST['submit'];
}
}
?>
<div id="form" style="margin: 90px;">
<form action="" method="POST">
<table>
<tr>
<td align="right">
Title:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="title">
</td>
</tr>
<tr>
<td align="right">
Name:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="name">
</td>
</tr>
<tr>
<td align="right">
National Insurance<br /> Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="insurance">
</td>
</tr>
<tr>
<td align="right">
Address:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="address">
</td>
</tr>
<tr>
<td align="right">
Tleephone Number:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="phone">
</td>
</tr>
<tr>
<td align="right">
Email:<span style="color:red;">*</span>
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="email">
</td>
</tr>
<tr>
<td align="right">
CSCS Registration Number:
</td>
<td>
<input style="border:1px solid #4088b8;" type="text" size="29" name="registration">
</td>
</tr>
<tr>
<td align="right">
Special Accommodations:
</td>
<td>
<textarea style="border:1px solid #4088b8;" type="textarea" cols="30" rows="5" name="comments">
</textarea>
</td>
</tr>
<tr><td> </td></tr>
<tr><td> </td>
<td><input type="button" value="Payment" onClick="this.form.action='payments.php';this.form.submit()" />
<input type="button" value="More Information" onClick="this.form.action='confirmation.php';this.form.submit()" /></td>
</tr>
</table>
</form>
</div>
Working of JS form validation now, this is my code: Code: <html>
<head>
<script>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
</script>
</head>
<body>
<form action="mailto:fonzhende1@yahoo.com" method="post">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" name="name" value="" />
</td>
</tr>
<tr>
<td>email address:</td>
<td>
<input type="text" name="email" value="" />
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
<textarea rows="2" cols="20"> Test area </textarea><br/>
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br/>
<br/>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
</form>
</body>
</html>
Problem is when I submit the form I am getting what you see in the attachment, I guess this email form which pops up needs to be directed to Yahoo Hosting then redirected from there back to me? Anyway I would like if it the email could be sent directly to me without this form popping up, is that possible? Also, when I submit the form with the fields empty I am not getting the error message? I am currently trying to fix a problem on the form submission on my site. On the Request Information page I am using MM_validateForm function and the FormtoEmail.php script. When required fields are blank, you are alerted via pop-up notification when hitting submit. Afterwards though, the form still sends without letting you finish completing required fields. I have noticed that if the First Name field is blank the form will not send, but any other field it just still sends. I have looked this up on Google endlessly and have tried every 'fix'. This is the function: Code: <script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' Must Contain an Email Address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' Must Contain a Valid Phone Number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' Must Contain a Number Between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' Is Required.\n'; }
} if (errors){ alert('Please Complete All Required Fields:\n'+errors); }
document.MM_returnValue = (errors =='');
} }
//-->
This is the form html code: Code: <form action="FormToEmail.php" method="post" name="myform" class="cmxform" id="myform" onsubmit="MM_validateForm('first-name','','R');MM_validateForm('last-name','','R');MM_validateForm('workphone','','RisNum');MM_validateForm('address1','','R');MM_validateForm('city','','R');MM_validateForm('state','','R');MM_validateForm('country','','R');return document.MM_returnValue;">
This is the code on the submit button: Code: <input type="submit" class="buttons" onClick="MM_validateForm('first-name','','R');MM_validateForm('last-name','','R');MM_validateForm('workphone','','RisNum');MM_validateForm('address1','','R');MM_validateForm('city','','R');MM_validateForm('state','','R');MM_validateForm('country','','R');return document.MM_returnValue;" value="Send"/>
I may be missing something really obvious but i've gone over this for three days. I just recently have moved positions to Website Designer and my main background is in Graphic Design so my knowledge is very minimal. I created this site in a month due to time restrictions and the code is far from perfect. any help would be greatly appreciated. thanks! EDIT: sorry sorry, I just realized I posted this on the wrong place.... {palmface} Just to start off, Javascript is NOT my forte'. Ive been trying to do some form validating for a few hours now. I've tried many different combos and trying multiple functions to make this work but I have seemed to make more of a mess than anything now. Here's what I've got going on... A simple form with 3 text inputs a checkbox and a submit button. I'm trying to do 7 things. 1. strip special characters from all 3 input fields (except : / and @) 2. make sure no input fields are blank 3. verify that email has @ and . in it 4. insure that the checkbox is checked I would love to set the email not to allow certain domains(yahoo,gmail) but that is a bit out of my league. Any help would be appreciated, below is the current garbled mess of javascript I am left with after hours of trying to get it to work... my appologies. I know it's ugly. Code: <script LANGUAGE="Javascript">
<!-- Begin
function CleanUp() {
name = document.register.name.value;
email = document.register.email.value;
website = document.register.website.value;
var iChars = "!#$%^&*()+=-[]\';,.{}|\"<>?";
//remove crap name
for (var i = 0; i < document.register.name.value.length; i++) {
if ((iChars.indexOf(document.register.name.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//remove crap website
for (var i = 0; i < document.register.website.value.length; i++) {
if ((iChars.indexOf(document.register.website.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//remove crap email
for (var i = 0; i < document.register.email.value.length; i++) {
if ((iChars.indexOf(document.register.email.charAt(i)) != -1)) {
window.alert ("No special characters allowed.");
return false;
}}
//check required field
if ((name == "") || (email == "")|| (website == "")) {
window.alert("Please enter your Name, website, and E-mail address.");
return false;
}
//verify email
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
return false;
}
// check agree term before submit
if (agree.checked == false )
{
alert('Please confirm you are the site owner.');
return false;
//done
}else
return true;
}
// End -->
</script>
can anyone help me validate a survey page i have? it has many questions and each question has 5 radio buttons. i followed many guides and none of them worked for me. I refered to http://www.dynamicdrive.com/forums/s...00&postcount=9 guide and http://javascript.about.com/library/blradio4.htm but for somereason it doesn't seem to work. So can u guys plz look over my simplified version of the survey and see whats is wrong. Sorry if i sound like a noob, I am new here. 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>
<script type="text/javascript">
var btn = valButton(form.q1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');
function valButton(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
</script>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="20">
<form name="science" method="post" action="ad.html" onsubmit="return valButton(btn);">
<tr>
<td width="475"><h3>
<center>
Reasons for organizing Science Olympiad
</center>
</h3></td>
<td width="17"><h3>
<center>
1
</center>
</h3></td>
<td width="17"><h3>
<center>
2
</center>
</h3></td>
<td width="17"><h3>
<center>
3
</center>
</h3></td>
<td width="17"><h3>
<center>
4
</center>
</h3></td>
<td width="17"><h3>
<center>
5
</center>
</h3></td>
</tr>
<tr>
<td width="475">1. It is fun</td>
<td width="17"><input type="radio" id="q1" name="q1" value="1" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="2" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="3" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="4" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="5" /></td>
</tr>
<tr>
<td>2. To motivate students to pursue further education in Science and Engineering</td>
<td width="17"><input type="radio" id="q2" name="q2" value="1" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="2" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="3" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="4" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="5" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" /></td>
</tr>
<tr></tr>
</form>
</table>
testing
</body>
</html>
I have two seperate js files. One that houses the functions mylibrary.js and another that call the validated functions myform.js. I can not get the form to validate any data. The data just sits there and will not report errors. Any help would be greatly appreciated. Code: function valForm()
{
if(!isAlpha(document.myform.firstname.value))
{
myform.firstname.focus();
return false;
}
if(!validEmail(document.myform.email.value))
{
myform.email.focus();
return false;
}
if(!isRequired1(document.myform.options.value))
{
myform.options.focus();
return false;
}
return true;
}
// JavaScript Document seperate js file mylibrary.js
function isNumber(num) { return !(/\D/.test(num)); }
function isAlpha(text){ return text.match(/\w+/) }
function validEmail(email){ return email.match(/^([a-zA-Z0-9]{3,})(((\.|\-|\_)[a-zA-Z0-9]{2,})+)?@([a-z]{3,})(\-[a-z0-9]{3,})?(\.[a-z]{2,})+$/i ) }
function isRequired1(){
if(myform.food.selectedIndex ==0)
{
alert("Please select from the drop-down list.");
}
}
Hi I have a problem with a form in my site he http://www.21centuryanswers.com/submit.php if no field is filled and you click submit, an alert will be shown, yet the next page will still load! How do I fix it? the code for the form is: <form action="privacy.php" method="post" onsubmit="return checkform(this);"> <fieldset> <center> E-mail: <input type="textfield" name="email" size="60" value="" /><br/></br> Question: <input type="textfield" name="question" size="70" value="" /><br/><br/> <input type="submit" value = "Submit"/> </center> </fieldset> </form> and here is the validation script: <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { // ** START ** if (form.email.value == "") { alert( "Please enter your email." ); form.author.focus(); return false ; } if (form.question.value == "") { alert( "Please enter the question." ); form.title.focus(); return false ; } // ** END ** return true ; } //--> </script> Please help! Hello. I have created a button so that when a person click it, it should turn the text into Bold font weight - Fortunately it works, However i tried adding an alternative which is when the text is already turned into Bold font weight the person could click the button in order to switch the text into normal mode, simply cancel the Bold - Unfortunately it doesn't work at all - Can Some one review my little script and help me solve it out ? PHP Code: <script type="text/javascript"> function bold(id) { if (document.getElementById) { document.getElementById(id).style.fontWeight = 'bold'; } else if (document.all) { document.all[id].style.fontWeight = 'bold'; } } //@@@@@@@@@@@(Now the rest of the code down bellow is what i have added so that i could click an cancel the bold mode or (document.all) { document.all[id].style.fontWeight = 'normal'; } </script> and that's the image code : PHP Code: <img src="Bold.bmp"width="42" height="39" title="Bold Font" onclick="bold('bodytext')" style="cursor:pointer;" /> Not 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 Hello all, new here Seems like a very nice place to be apart of. I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it. The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem. I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs. <problem> I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location. <problem> I would like to keep the JS close to how it is now as I have a library to use this JS over and over again. Any pointers in the right direction or solutions to my problem would be greatly appreciated. Thanks! Hopefully it is not to hard huh If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again! I have a form and the Js validation wont work on it. Here is the html PHP Code: <form name="frm" action="index.php" method="POST" onsubmit="return validateForm();"> <table width="100%" border="0" cellspacing="2" cellpadding="3" class="mainForm"> <tr> <td class="normalText" align="left" style="padding:0px 0px 0px 33px"> <table border="0" cellspacing="3" cellpadding="2"> <tr> <td class="normalHeading" colspan="2" style="padding-bottom:6px"> <div id="error_msg" class="txtErrorMsg" align="center"></div> <!-- <?php echo "<p id=\"error_msg\">".$message."</p>"?> --> </td> </tr> <tr > <td class="normalText" width="30%">First Name</td> <td><input type="text" name="firstName" id="firstName" class="input1" style="width:195px" maxlength="10"/></td> </tr> <tr> <td class="normalText">Last Name</td> <td><input type="text" name="lastName" id="lastName" class="input1" style="width:195px" maxlength="10"/></td> </tr> <tr> <td class="normalText">Mobile</td> <td><input type="text" name="mobile" id="mobile" class="input1" style="width:195px" maxlength="10" onkeypress="return fnIsIntNumber(event,this);"/></td> </tr> <tr> <td class="normalText">Email</td> <td><input type="text" name="email" id="email" class="input1" style="width:195px" onblur="IsEmail(this.vlaue)"/></td> </tr> <tr> <td class="normalText">Comments</td> <td> <textarea name="comments" id="comment" cols="22" rows="3" ></textarea> </td> </tr> <tr> <td class="normalText"> </td> <td valign="middle"><input class="send" type="image" value='submit' src="images/submit.gif" name="submit" /></td> </tr> </table> </td> </tr> </table> </form> and here is the JS PHP Code: var $j = jQuery.noConflict(); function isValidEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function validateForm(){ var firstName; var lastName; var email; var mobile; var comment; var error; firstName = $j('#firstName').val(); lastName = $j('#lastName').val(); email = $j('#email').val(); mobile = $j('#mobile').val(); comment = $j('#comment').val(); if(firstName=='' || firstName.length < 3){ error = 'Please Enter Your First Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(lastName=='' || lastName.length < 3){ error = 'Please Enter Your Second Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(email=='' || !isValidEmail(email)){ error = 'Please Enter Your Correct Email'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } //mob //$jmob_pattern = '^\d{10}$j'; if(mobile.length != 10 || isNaN(mobile)){ error = 'Please Enter Your Correct Mobile Number'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(comment.length < 10){ error = 'Please Enter A Comment More Than 10 Characters'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } return true; } Can anybody tell me what the problem is 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 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? 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 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. |
|||||||