Question

大家下午好。我有一个非常独特的情况，我似乎无法找到答案。我有一个发送到电子邮件的表单，但是一旦提交表单，它就会重定向到处理信息并发送电子邮件的php文件。我到处搜索，看到我想要完成的工作可以使用AJax完成，但我似乎无法让它工作。我有我的加载到我使用JQuery包含在我的index.html上的div。问题是，当我提交它重定向到php文件，但我希望它保留在包含它的index.html内。我在下面放了我的代码。提前谢谢。

<form name="inquiryForm" id="inquiryForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
    method="POST">              
        <fieldset>
            <legend>&#42; Required</legend>

            <br>

            First Name<input type="text" name="fname" value="<?php echo $fname;?>">
            <span class="error">* <?php echo $fnameErr;?></span><br><br>

            Last Name<input type="text" name="lname" value="<?php echo $lname;?>">
            <span class="error">* <?php echo $lnameErr;?></span><br><br>

            Phone Number<input type="text" name="phone" value="<?php echo $phone;?>"><br><br>

            Email Address<input type="text" name="email" value="<?php echo $email;?>">
            <span class="error"><?php echo $emailErr;?></span><br><br>

            <label>How did you find us?</label>
                <select name="how">
                    <option value=""> -- Please select -- </option>

                    <option>Google</option>

                    <option>Yahoo</option>

                    <option>Link from a website</option>

                    <option>Word of mouth</option>

                    <option>Other</option>
                </select><br><br>

            <label>Inquiry&#42;</label><br>

            <textarea name="inquiry" value="<?php echo $inquiry;?>" rows="5" cols="40"></textarea>
            <span class="error">* <?php echo $inquiryErr;?></span><br><br><br>

            <input type="submit" name="submit" id="submit" value="Submit">

            <input type="reset" name="reset" value="Reset">
        </fieldset>
    </form>

下面是我的php文件

<?php
/* Set e-mail recipient */
$myemail  = "my email address";
$subject = "Ism Clothing Contact Form Submission";

// define variables and set to empty values
$fnameErr = $lnameErr = $emailErr = $inquiryErr = "";
$fname = $lname = $email = $inquiry = "";
$phone = $_POST['phone'];
$how = $_POST['how'];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["fname"])) {
        $fnameErr = "First Name is required";
    } else if (empty($_POST["lname"])) {
        $lnameErr = "Last Name is required";
        } else {
             $fname = test_input($_POST["fname"]);
             $lname = test_input($_POST["lname"]);

             if (!preg_match("/^[a-zA-Z ]*$/",$fname)) {
               $fnameErr = "Only letters and white space allowed"; 
             } else if (!preg_match("/^[a-zA-Z ]*$/",$lname)) {
               $lnameErr = "Only letters and white space allowed"; 
             }
        }

    if (empty($_POST["email"])) {
        $emailErr = "Email is required";
    } else {
     $email = test_input($_POST["email"]);

     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailErr = "Invalid email format"; 
     }
    }

    if (empty($_POST["inquiry"])) {
     $inquiryErr = "Please enter questions comments, or concerns";
    } else {
     $comment = test_input($_POST["inquiry"]);
    }
}

function test_input($data)
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

/* Format form data for email */
$message = "Hello!

Ism Clothing contact form has been submitted by:

Name: $fname $lname
E-mail: $email
Phone #: $phone

How did he/she find it? $how

Comments:
$inquiry

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message);

＆GT;

及以下是将我的contact.php（表单）加载到我的主页面（index.html）的Jquery代码

$("#contact").on("click", function(){
    $("#content").load("contact.php");
});

我在index.js中使用上面的代码将contact.php加载到我的index.html中的div中。

Answer 1

试试这个：

 $("#inquiryForm").on("submit", function(e){
    e.preventDefault();
    $this = $(this);
    $.ajax({
       type: "POST",
       url: $this.attr('action'),
       data: $this.serialize(),
       success : function(){
          alert('Done');
       }
    });
});

Answer 2

你有点混乱。

使用Ajax根本不需要表单：向用户显示输入字段，然后在按钮处按下构建Ajax请求并等待回复。这意味着您的页面不会从它所处的位置移动。

相反，在提交表单时，HTML需要一个输出表单结果的地方：毕竟，通过提交您正在导航到网址。

现在，您有两个解决方案： 1）学习如何使用Ajax。 2）在页面上放置一个隐藏的 iFrame ，给它一个ID，将表单目标设置为该ID，并为iFrame加载的事件添加处理程序

提交表单后使用AJax防止页面重定向

2 个答案: