在联系页面上,我确实有一个表格,允许用户向公司发送电子邮件。为了控制每个字段,我有一个表单脚本和一些 css 效果。
这是完美的工作。这是一个演示(遗憾的是,它不能在 jsfidle 上工作)
但是,我没有找到任何使用 javascript 发送电子邮件的解决方案(不可能)。但是我必须做些什么来保留我的 javascript 功能并发送这封电子邮件?
注意:发送电子邮件后,用户必须停留在同一页面上。
HTML
<form onSubmit="return formValidation();" id="contactForm" name="contactForm" action="index.php">
<ul>
<label for="name">Name <span id="required">*</span></label>
<li><input name="name" id="name" type="text"/></li>
</ul>
<ul>
<label for="telephone">Telephone <span id="required">*</span></label>
<li><input name="telephone" id="telephone" type="text"/></li>
</ul>
<ul>
<label for="email">Email <span id="required">*</span></label>
<li><input name="email" id="email" type="text"></li>
</ul>
<ul>
<label for="message">Message <span id="required">*</span></label>
<li><textarea name="message" id="message" cols="70" rows="10" ></textarea></li>
</ul>
<ul id="row_submit_button">
<li><input type="submit" value="Submit" id="submit_button"/></li>
</ul>
<ul id="form_incorect_message">
<li>Please, fill in the form correctly.</li>
</ul>
</form>
Javascript
function formValidation()
{
var name = document.contactForm.name; // required
var telephone = document.contactForm.telephone; // required
var email = document.contactForm.email; // required
var message = document.contactForm.message; // required
fname_validation(name);
number_validation(telephone);
email_validation(email);
message_validation(message);
if (fname_validation(name)&&number_validation(telephone)&&email_validation(email)&&message_validation(message))
{
document.getElementById('form_incorect_message').style.visibility = 'hidden';
document.getElementById('contactForm').style.visibility = 'hidden';
document.getElementById('send_ok').style.display = 'block';
// sendMail();
}
else
{
}
return false;
};
function fname_validation(name)
{
if((name.value!="")&&(name.value!=" "))
{
var letters = /^[A-Za-z _-]+$/;
if(name.value.match(letters))
{
document.getElementById('name').style.borderColor = "#56D45C";
return true;
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('name').style.borderColor = "red";
return false;
}
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('name').style.borderColor = "red";
return false;
}
};
function message_validation(message)
{
if(message!=""&&message!=" ")
{
var letters = /^[A-Za-z0-9 _-]+$/;
if(message.value.match(letters))
{
document.getElementById('message').style.borderColor = "#56D45C";
return true;
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('message').style.borderColor = "red";
return false;
}
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('message').style.borderColor = "red";
return false;
}
};
function number_validation(telephone)
{
var numbers = /^[0-9+]+$/;
if(telephone.value.match(numbers))
{
document.getElementById('telephone').style.borderColor = "#56D45C";
return true;
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('telephone').style.borderColor = "red";
return false;
}
};
function email_validation(email)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(email.value.match(mailformat))
{
document.getElementById('email').style.borderColor = "#56D45C";
return true;
}
else
{
document.getElementById('form_incorect_message').style.visibility = "visible";
document.getElementById('email').style.borderColor = "red";
return false;
}
};
function sendMail()
{
// var link = "mailto:my-email@gmail.com"
// + "?cc=xxxxxxx@xXXXXX.co.uk"
// + "&subject=" + escape("This is my subject")
// + "&body=" + escape(document.getElementById('myText').value);
// window.location.href = link;
};
谢谢