Javascript联系表格提交帖子

Javascript contact form submit post

本文关键字：提交 表格 联系 Javascript      更新时间：2023-09-26

>我正在尝试验证电子邮件字段，如果有效，请提交我的表单。但是当我将其提交给服务器时，表单给了我一个错误。如果我使用提交按钮提交它，它可以正常工作。

<script>
function ValidateEmail(inputText)  
{  
var mailformat = /^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/;  
if(inputText.value.match(mailformat))  
{  
document.form1.submit();
}  
else  
{  
alert("You have entered an invalid email address!");  
document.form1.email.focus();  
return false;  
}  
}  
</script>
<form action="mailer.php" id="form1"   name="form1" method="POST">

  <input type="text"  size="19" name="name"/>
<input type="text"  size="19" name="phone"/>
<input type="text"  size="19" name="email"/>

    <a  onclick="ValidateEmail(document.form1.email)" href="#">Submit</a>


</p>
</form>

<?php
if(isset($_POST['submit'])) {
$to = "marshal@smedia.ca"; 
$to2 = $_POST['email'];
$subject = "Lead Gen";
$subject2 = "Coupon2";
$first_field = $_POST['name'];
$email_field = $_POST['email'];
$phone_field = $_POST['phone'];
$headers .= "Content-type: text/html'r'n"; 
$headers .= 'From: Nurray GM <welcome@mycompany.com>' . "'r'n";

$body = "
From: $first_field 'n   
E-Mail: $email_field'n 
Phone Number: $phone_field'n ";

$body2 = "

<html>
 <body bgcolor='#DCEEFC'>
    <p>Hello  $first_field,</p> 
    <p>Thank you for applying for pre approval. balbalblah.</p> 
  <img src='www.smedia.ca/clients/leadgen/murray/coupon.jpg' width='500px' height='200px' />

  </body>
</html> 
";

mail($to, $subject, $body, $headers);
mail($to2, $subject2, $body2, $headers );
header("Location: http://www.smedia.ca/clients/leadgen/murray/redirect.html");  
} else {
echo "Sorry - something seems to be wrong. Your message was not sent";
}

?>

你不应该那样做。您应该将验证函数附加到表单的 onsubmit 事件，并在出现问题时拒绝提交（通过返回 false 或阻止默认行为）。

<form action="mailer.php" id="form1" onsubmit="return mysubmitcheck()"
      name="form1" method="POST">

.

function mysubmitcheck() { if (...) return true; else return false; }

这就是使用纯javascript完成的方式，它仍然有效。您应该有一个常规的提交按钮来提交表单，而不是a链接。

现在人们用jquery做同样的事情（就像这里解释的那样），但是如果你没有在其他任何地方使用jquery，它不会在这里增加特殊价值。

也可以

附加到诸如onsubmit之类的事件，这样它就不会污染HTML，例如

window.onload = function() {
  // find the form
  form.onsubmit = mysubmitcheck;
}

如果您坚持在链接上使用内联脚本，请更改

<a  onclick="ValidateEmail(document.form1.email)" href="#">Submit</a>

自

<a onclick="ValidateEmail(document.form1.email); return false" href="#">Submit</a>

以避免重新加载页面

这是我会怎么做的

var mailformat = /^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/;  
window.onload=function() {
  document.getElementById("form1").onsubmit=function() {
    if(!this.email.value.match(mailformat)) {  
     alert("You have entered an invalid email address!");  
     this.email.focus();  
     return false;  
    }
    return true;  
  } 
}

并使用<input type="submit" />而不是链接。如果您希望它看起来像一个链接，我们可以将按钮样式设置为一个

相关文章：