Question

我有一个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文件？

Answer 1

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

如果你正在使用jQuery，通过ajax提交表单非常容易：

$(document).ready( function() {
    $('.button1').click(function(){
        var f = $('#ContactForm');
        $.ajax({
          type: "POST",
          url: "emailinfo.php",
          data: f.serialize()
        });
    });
});

Answer 2

<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>

Answer 3

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

你可以用

    $.post( 
        "emailinfo.php", 
        $( "#ContactForm" ).serialize(),
        function( data ) { 
           /* do things with responce */
    } );

在动作中以HTML形式调用php但不重定向

3 个答案: