Форма обратной связи не отправляет все заполненные поля на электронную почту, только несколько?PHP AJAX JS - PullRequest
0 голосов
/ 17 февраля 2019

Итак, я прошел через нить, которая помогла мне создать эту форму для связи с нами, но в ней говорилось о проверке и заполнении полей.В моей форме есть два поля, которые не нужно заполнять $organization и $budget. Кажется, я не могу получить информацию для отправки по электронной почте.В электронном письме эти поля отображаются пустыми, но остальные поля заполнены.

У меня практически нет опыта работы с PHP за пределами этой формы.

Ожидаемый результат:

Name: xxx
Email: xxx@xxx.com
Organization: xxx
Budget: xxx
Message: xxx

Что я на самом деле получаю в своем электронном письме:

Name: xxx
Email: xxx@xxx.com
Organization:
Budget:
Message: xxx

Код:

<?php

$errorMSG = "";

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

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

// Organization
    $organization = $_POST["organization"];


// Budget
    $budget = $_POST["budget"];


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


$EmailTo = "example@mydomain.com";
$Subject = "Received msg from WIP contact form";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Organization: ";
$Body .= $organization;
$Body .= "\n";
$Body .= "Budget: ";
$Body .= $budget;
$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 "Sorry, something went wrong.";
    } else {
        echo $errorMSG;
    }
}

?>

HTML:

<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>
            <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 class="form-group col-sm-6">
            <label for="organization" class="h4">Organization</label>
            <input type="text" class="form-control" id="organization" placeholder="Enter organization">
            <div class="help-block with-errors"></div>
        </div>
        <div class="form group col-sm-6">
            <label for="budget" class="h4">Budget</label>
            <input type="number" class="form-control" id="budget" placeholder="$50000">
            <div class="help-block with-errors"></div>
        </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="button 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, "Please fill in the required fields.");
    } else {
        // everything looks good!
        event.preventDefault();
        submitForm();
    }
});


function submitForm(){
    // Initiate Variables With Form Content
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    var organization = $("#organization").val();
    var budget = $("#budget").val();

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


function formSuccess(){
    $("#contactForm")[0].reset();
    submitMSG(true, "We'll be in touch with you soon!")
}

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";
    } else {
        var msgClasses = "h3 text-center text-danger";
    }
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
}

РЕДАКТИРОВАТЬ

Спасибо Uxmal за предложение name="xxxx" в поле ввода.Он сказал, что, делая это, $_POST ищет входные данные с name.Что заставило меня понять, что я должен делать что-то еще не так.Оказывается, мой ajax был плохо написан, и я также пропустил <form action.Ниже приведена исправленная версия формы и кода ajax.

<form action="form-process.php" method="POST" 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" name="name" placeholder="Enter name" required>
            <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" name="email" placeholder="Enter email" required>
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-6">
            <label for="organization" class="h4">Organization</label>
            <input type="text" class="form-control" id="organization" name="organization" placeholder="Enter organization name">
            <div class="help-block with-errors"></div>
        </div>
        <div class="form group col-sm-6">
            <label for="budget" class="h4">Budget</label>
            <input type="number" class="form-control" id="budget" name="budget" placeholder="50000">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="h4">Message</label>
        <textarea id="message" class="form-control" rows="5" name="message" placeholder="Enter your message" required></textarea>
        <div class="help-block with-errors"></div>
    </div>
    <button type="submit" id="form-submit" class="button pull-right ">Submit</button>
    <div id="msgSubmit" class="h3 text-center hidden"></div>
    <div class="clearfix"></div>
</form>

JS:

function submitForm(){

$.ajax({
    type: "POST",
    url: "php/form-process.php",
    data: $('#contactForm').serialize(),
    success: function(text) {
        if (text == "success") {
            formSuccess();
        } else {
            formError();
            submitMSG(false, text);
        }
    }
});
}

1 Ответ

0 голосов
/ 17 февраля 2019

Ваш PHP-код в строке

// Organization
$organization = $_POST["organization"];
// Budget
$budget = $_POST["budget"];

ищет входные данные с имя : организация и бюджет, нет для id организация и бюджет.

У вас html -

<input type="text" class="form-control" id="organization" placeholder="Enter organization">
<input type="number" class="form-control" id="budget" placeholder="$50000">

без тега: name = "organization" и тега: name = "budget".

Так что ставьте эти теги как

<input type="text" class="form-control" id="organization" name="organization" placeholder="Enter organization">
<input type="number" class="form-control" id="budget" name="budget" placeholder="$50000">

и тогда ваш PHP-код получит данные.

...