4

我有一个 HTML 表单，如下所示：

<form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php">

然后是一个调用的提交按钮verify()：

<a href="#" class="button1" onClick="verify()">Send</a>

verify被定义为：

function verify() {
    if(document.getElementById("name").value=="" || document.getElementById("email").value=="") {
        alert("Please enter a name and an email.");
    } else {
        alert("Looks good, sending email");
        document.getElementById('ContactForm').submit();
    }
}

目前，当我单击提交按钮时，浏览器会重定向到emailinfo.php，这只是一个空白的白色屏幕，因为该php文件只是发送一封电子邮件而没有做任何其他事情。如何在php不重定向到该文件的情况下运行该文件？

4

4 回答 4

6

您要做的是在单击按钮时使用 AJAX 向 emailinfo.php 文件发送请求。将表单操作设为空白将导致表单发布到您所在的同一页面。

如果您使用的是 jQuery，那么通过 ajax 提交表单非常容易：

$(document).ready( function() {
    $('.button1').click(function(){
        var f = $('#ContactForm');
        $.ajax({
          type: "POST",
          url: "emailinfo.php",
          data: f.serialize()
        });
    });
});
于 2013-11-12T05:05:23.510 回答
4 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function verify() {
 if(document.getElementById("name").value=="" || document.getElementById("email").value=="") {
    alert("Please enter a name and an email.");
 } else {
    alert("Looks good, sending email");
    //document.getElementById('ContactForm').submit();
    var name=$('#name').val();
    var email=$('#email').val();
    var  formData = "name="+name+"&email="+email;
    $.ajax({
        url : "emailinfo.php",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR)
        {
            //data - response from server
            alert(data);
        },

    });
  }
}

</script>
<form id="ContactForm" name="ContactForm" method="post" action="">
<input  type="text" name="name" id="name"/>
<input  type="text" name="email" id="email"/>
<a href="#" class="button1" onClick="verify()">Send</a>
</form>
于 2013-11-12T05:10:49.950 回答
2

ContactFormFirst 将该a标签更改为一个按钮，然后将其分配verify()给它的 onclick。然后在 verify(). 使用 ajax 将表单中的值发布到emailinfo.php.

你可以用

    $.post( 
        "emailinfo.php", 
        $( "#ContactForm" ).serialize(),
        function( data ) { 
           /* do things with responce */
    } );
于 2013-11-12T05:07:42.383 回答
1

我通常在这种情况下做的是ajax，但如果你不想使用ajax，你可以简单地添加'return false'，以便在使用表单提交时不会被重定向：

function verify() 
{
  if(document.getElementById("name").value=="" ||document.getElementById("email").value=="") 
  {
    alert("Please enter a name and an email.");

  } 
  else 
  {
    alert("Looks good, sending email");
    document.getElementById('ContactForm').submit();
    return false;
  }
}
于 2013-11-12T06:20:43.787 回答