Question

我是php和ajax的新手。

我遇到了一个我创建的联系表单的问题。它没有发送所有信息。我已经分离了这个问题，需要解释为什么会发生这种情况，我将在下面解释。

这是HTML：

<section class="contact text-center " id="contact">
    <div class="container">
        <div class="row">
            <!--Actual Form -->
            <div class="col-md-8 col-xs-12 col-sm-12 col-sm-offset-2 col-sm-8">
                <article class="contact-form">
                    <form role="form" id="contactForm" data-toggle="validator" class="shake">
                        <!-- FIRST ROW -->
                        <div class="row">
                            <div class="form-group col-sm-4">
                                <input type="text" class="form-control" id="name" placeholder="First Name * ">
                            </div>


                            <div class="form-group col-sm-4">
                                <input type="text" class="form-control" id="lname" placeholder="Last Name *">
                            </div>


                            <div class="form-group col-sm-4">
                                <input type="text" class="form-control" id="companyname" placeholder="Company name *">

                            </div>
                        </div>

                        <!-- SECOND ROW -->
                        <div class="row">
                            <div class="form-group col-sm-4">
                                <input type="text" class="form-control" id="jobtitle" placeholder="Job Title *">
                            </div>


                            <div class="form-group col-sm-4">
                                <input type="text" class="form-control" id="email" placeholder="Business Email *">
                            </div>


                            <div class="form-group col-sm-4">
                                <input type="tel" class="form-control" id="phonenumber" placeholder="Phone Number *">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <textarea id="message" class="form-control" rows="5" placeholder="Message *"></textarea>
                        </div>
                        <button onclick="myFunction()" class="btn btn-success btn-lg pull-right ">Submit</button>
                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                        <div class="clearfix"></div>

                    </form>
                </article>
            </div>
        </div>
    </div>
</section>
</div>
</div>
</section>

这是表单的php。

<?php

$errorMSG = "";

// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Name is required ";
} else {
    $name = $_POST["name"];
}

// Last Name
if (empty($_POST["lname"])) {
    $errorMSG = " Last Name is required ";
} else {
    $lname = $_POST["lname"];
}

// Company Name
if (empty($_POST["companyname"])) {
    $errorMSG = " Company Name is required ";
} else {
    $companyname = $_POST["companyname"];
}

// Job Title
if (empty($_POST["jobtitle"])) {
    $errorMSG = "Job Title is required ";
} else {
    $jobtitle = $_POST["jobtitle"];
}

// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Email is required ";
} else {
    $email = $_POST["email"];
}

// Phone Number
if (empty($_POST["phonenumber"])) {
    $errorMSG .= "Phone Number is required ";
} else {
    $phonenumber = $_POST["phonenumber"];
}

// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}


$EmailTo = "farrun.wow@gmail.com";
$Subject = "New Message Received";

// prepare email body text
$Body = "";

$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";

$Body .= "Last Name: ";
$Body .= $lname;
$Body .= "\n";

$Body .= "Company Name: ";
$Body .= $companyname;
$Body .= "\n";

$Body .= "Job Title: ";
$Body .= $jobtitle;
$Body .= "\n";

$Body .= "Business Email Address: ";
$Body .= $email;
$Body .= "\n";

$Body .= "Phone Number: ";
$Body .= $phonenumber;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);

// redirect to success page
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

这是ajax：

    $("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var lname = $("#lname").val();
    var companyname = $("#companyname").val();
    var jobtitle = $("#jobtitle").val();
    var email = $("#email").val();
    var email = $("#phonenumber").val();
    var message = $("#message").val();

    $.ajax({
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name + "&email=" + email + "&message=" + message,
        //data: "name=" + name + "&lname=" + lname + "&companyname=" + companyname + "&jobtitle=" + jobtitle + "&email=" + email + "&phonenumber=" + phonenumber + "&message=" + message ,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
                submitMSG(false,text);
            }
        }
    });
}

function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "Message Submitted!")
}

function formError(){
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(this).removeClass();
    });
}

function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "h3 text-center tada animated text-success";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

问题在于此行

data: "name=" + name + "&email=" + email + "&message=" + message,

我只能有三个条目，当我再添加它时，由于某种原因，表单完全中断。发送的唯一三个是“姓名”，“电子邮件”和消息“

有没有人知道为什么？

Answer 1

首先，一些观察。

您的表单正在提交为默认的GET方法。设置method="post"将使用PHP脚本进行排序。
您的表单输入缺少处理表单数据的关键元素，而不会像您一样手动设置它们。例如。 name。每个元素都应具有名称，以便在post或get请求中引用。
用于分配变量的AJAX调用中的方法可以（并且应该）更简单。请参阅下面的示例。
您提供的代码示例中不存在onClick事件myFunction()。

表单HTML

更新表单方法。将name="field"添加到input和textarea。

<form id="contactForm" method="POST">
  <input name="fname" id="fname" type="text" />
  <input name="lname" id="lname" type="text" />
  ... other fields
  <button id="contactSubmit" class="">Submit Form</button>
</form>

PHP

基本上可以保持不变。虽然，将errorMsg更新为。

// Init as empty

$errorMSG = '';

// NAME
if (empty($_POST["name"])) {
    // Use .= to concat
    $errorMSG .= "Name is required ";
} else {
    $name = $_POST["name"];
}

// Last Name
if (empty($_POST["lname"])) {
    // Use .= to concat
    $errorMSG .= " Last Name is required ";
} else {
    $lname = $_POST["lname"];
}
...etc

的JavaScript

在结构上，你很不错。 AJAX真的发生了变化。

function submitForm(){
    var formData = $('#contactForm').serialize();
    $.ajax({
      type: "POST",
      url: "path/to/form-process.php",
      data: formData,
      success: function(text) {
          if (text == "success") {
              // debug
              console.log("success");
              // ... other functions
          } else {
              // debug
              console.log("error");
              // ... other functions
          }
      }
  });
}

PHP / ajax表单无法正确发送

1 个答案:

表单HTML

PHP

的JavaScript