help making ajax form confirm email field

nivosh · December 29, 2007

thread copyed from php forum...

Hello forum members.

please help me make this simple ajax mail script to be able to confirm that the fields are with content before sending it. and also to confirm that the email entered is good.

attached is the files

thank you

[attachment deleted by admin]

michaellunsford · December 30, 2007

Here's some javascript code to validate that an email address is properly formed. You should also re-validate the email address on the processing end, too (ie in your php script).

function check_stuff() {
var emailFilter=/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
var error = '';
if (document.forms[0].Name.value=='') {
	error += "You must provide your name.\n\n";
}
if (!(emailFilter.test(document.forms[0].Email.value))) { 
    error+="Please enter a valid email address in the form: 'name@example.com'\n\n";
} else if (document.forms[0].Email.value=='') {
    error+="Please enter a valid email address in the form: 'name@example.com'\n\n";
}
if (document.forms[0].Phone.value=='') {
	error+="Please provide your phone number.\n\n";
}
if(error.length>0) {
	alert(error);
	return false;
} else {
	return true;
}
}

nivosh · December 30, 2007

thank you for helping.

since i am no programer and have little knowledge in php or ajax, would you please tell me where to place the code in the script i attached, or better, place it there and attach the fixed file?

thenks

michaellunsford · December 31, 2007

usually, you have to customize it to whatever fields you're wanting to have filled. The code goes in the html header of the document.

<html>

<head>

code goes here

</script>

</head>

the script calls the first form, and looks for a field called "Email" and "Name" -- case sensitive I believe. You can change the field names in the script, and even add a few others if you require more fields.

nivosh · January 2, 2008

thank for the help, but i still cant get it to work.

i have placed the code in the page as you said but its still sending the mail even without any data.

i place here the code for you to see:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Contact Form by Andrew Walsh</title>
<style type="text/css">
body {
margin:4px 0px; padding:0px;
text-align:center;
direction:rtl;
}

#contactarea {
width:350px;
margin:0px auto;
padding:15px;
border:1px solid #333;
background-color:#eee;
font-weight: bold;
font-family: Verdana, Arial;
font-size: 12px;
text-align:right;
}

#inputbox {
border: 1px solid #000;
width: 200;
padding: 2px;
font-weight: bold;
font-family: Verdana, Arial;
font-size: 12px;
}

#inputlabel {
font-weight: bold;
font-family: Verdana, Arial;
font-size: 12px;

}

#textarea {
border: 1px solid #000;
padding: 2px;
font-weight: bold;
font-family: Verdana, Arial;
font-size: 12px;
width:330;
}

#submitbutton {
border: 1px solid #000;
background-color: #eee;

}
</style>

<script language="javascript">

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sendemail() {
var msg = document.contactform.msg.value;
var name = document.contactform.name.value;
var email = document.contactform.email.value;
var subject = document.contactform.subject.value;
document.contactform.send.disabled=true; 
document.contactform.send.value='Sending....';

    http.open('get', 'contact.php?msg='+msg+'&name='+name+'&subject='+subject+'&email='+email+'&action=send');
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
         
        }
    }
}
</script>
<script type="text/javascript">
function checkmail() {
var emailFilter=/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
var error = '';
if (document.forms[0].name.value=='') {
	error += "You must provide your name.\n\n";
}
if (!(emailFilter.test(document.forms[0].email.value))) { 
    error+="Please enter a valid email address in the form: 'name@example.com'\n\n";
} else if (document.forms[0].email.value=='') {
    error+="Please enter a valid email address in the form: 'name@example.com'\n\n";
}

if(error.length>0) {
	alert(error);
	return false;
} else {
	return true;
}
}
</script>

</head>
<body>
<div id="contactarea">
<form name="contactform" id="contactform">
<span id="inputlabel">ùí:</span>    <input type="text" name="name" id="inputbox"><br /><br />
<span id="inputlabel">ãåà"ì:</span> <input type="text" name="email" id="inputbox"><br /><br />
<span id="inputlabel">ðåùà:</span>  <input type="text" name="subject" id="inputbox"><br /><br />
<span id="inputlabel">äåãòä:</span><br />
<textarea name="msg" rows="3" id="textarea"></textarea>
<br /><br />
<input type="button" value="ùìç äåãòä" name="send" onclick="sendemail();" id="submitbutton">

</form>
</div>
</body>
</html>

michaellunsford · January 2, 2008

You're going to need to put onsubmit="checkmail();" in your <form> tag.

Sign In

help making ajax form confirm email field

Recommended Posts

nivosh

Link to comment

Share on other sites

michaellunsford

Link to comment

Share on other sites

nivosh

Link to comment

Share on other sites

michaellunsford

Link to comment

Share on other sites

nivosh

Link to comment

Share on other sites

michaellunsford

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information