我在网页中有2个表单,具有相同的代码,但第二个表单不起作用

时间:2018-05-18 13:03:39

标签: javascript php jquery html forms

我有一个网页,其中包含横幅上的2个联系表单,另一个位于网页底部的联系人详细信息。我一直在使用php。但是,邮件会提交第一个表单而不是第二个表单。但如果我从网站上删除第一个表格,第二个表格绝对正常。如果有任何身体可以提供帮助,我想知道它的原因。您可以参考网站http://www.infinitesignalsolution.com

<form role="form" id="contactForm" data-toggle="validator" class="shake">
    <div class="row">
        <div class="form-group col-sm-6">
            <label for="name" class="h4">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name" required data-error="NEW ERROR MESSAGE">
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group col-sm-6">
            <label for="email" class="h4">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" required>
            <div class="help-block with-errors"></div>
        </div>
    </div>
     <div class="form-group">
        <label for="sub" class="h4">Sub</label>
        <input type="sub" id="sub" class="form-control" placeholder="Enter Subject" required>
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label for="message" class="h4">Message</label>
        <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
        <div class="help-block with-errors"></div>
    </div>
    <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
    <div id="msgSubmit" class="h3 text-center hidden"></div>
    <div class="clearfix"></div>
</form>

的JavaScript

 $("#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 email = $("#email").val();
     var sub = $("#sub").val();
     var message = $("#message").val();

     $.ajax({
         type: "POST",
         url: "php/form-process.php",
         data: "name=" + name + "&email=" + email + "&sub=" + sub + "&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);
 }

PHP

<?php

$errorMSG = "";

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

if (empty($_POST["phone"])) {
    $errorMSG = "Phone No is required ";
} else {
    $phone = $_POST["phone"];
}

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

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

$EmailFrom = "info@infinitesignalsolution.com";
$EmailTo = "umar.neha06@gmail.com";
$Subject = "Enquiry received from website";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phone;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";

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

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

?>

1 个答案:

答案 0 :(得分:1)

两种表格都有相同的ID吗?如果是这样,给他们提供唯一的ID,但给他们一个共同的CSS课程。

然后参考$(".contactForm")。至于字段,你可以给他们一个类,但在提交函数中使用$(this).find('.field-class')定位正确的类。