启用js文件时,联系人表单不会发送所有表单详细信息

Contact form does not send all form details when js file is enabled

本文关键字:表单 详细信息 文件 联系人 启用 js      更新时间:2023-09-26

我的申请表发送并能够接收用户插入的所有信息。然而,在集成以下ajax脚本时,表单无法发送表单中的所有值,即电子邮件地址、FIRSTNAME、LASTNAME和NOTES。换句话说,我在电子邮件中只收到年龄、性别、教育和专业化字段值。

ajax脚本验证字段并序列化表单的输入,最终发送成功消息。

请查找文件:contact.php

<form id="apply_form" method="post" action="Processor.php">
    <input type="text" name="applyEmail" id="applyEmail" class="requiredField email" />
    <input type="text" name="applyFirstName" id="applyFirstName" class="requiredField" />
    <input type="text" name="applyLastName" id="applyLastName" class="requiredField" />
    <div class="clearfix">
        <select name="applyAge" id="applyAge" class="requiredField" >
            <option value="age">age</option>
            <option value="18-24">18 - 24</option>
            <option value="25-34">25 - 34</option>
            <option value="35 and over">35 and over</option>
        </select>
    </div>
    <select name="applyGender" id="applyGender" class="requiredField" >
        <option value="gender"><?php echo _("Gender"); ?>*</option>
        <option value="male"><?php echo _("Male"); ?></option>
        <option value="female"><?php echo _("Female"); ?></option>
    </select>
   <div class="clearfix">
    <select name="applySpecialization" id="applySpecialization" class="requiredField" >
       <option value="specialization">specialization</option>
       <option value="beauty">beauty</option>
       <option value="makeup">makeup></option>
        <option value="studies">studies</option>
        <option value="art">art</option>
        <option value="theatre">theatre</option>
    </select>
</div>
<div class="clearfix">
    <select name="applyEducation" id="applyEducation" class="requiredField" >
        <option value="education">education</option>
        <option value="basic">basic</option>
        <option value="high">high</option>
        <option value="polytechnic">poly</option>
        <option value="masters">masters</option>
    </select>
</div>
<div class="clearfix">
    <textarea name="applyNotes" id="applyNotes" cols="25" rows="8"></textarea>
</div>
<input type="submit" id="sendApplication" name="sendApplication" value="Apply" />

ajax.js

if ($("#apply_form")[0]) {
        $('#apply_form').submit(function () {
            $('#apply_form .error').remove();
            $('.requiredField').removeClass('fielderror');
            $('.requiredField').addClass('fieldtrue');
            $('#apply_form span strong').remove();
            var hasError = false;
            $('#apply_form .requiredField').each(function () {
                if (jQuery.trim($(this).val()) === '') {
                    var labelText = $(this).prev('label').text();
                    $(this).addClass('fielderror');
                    $('#apply_form span').html('<strong>*Please fill out all fields.</strong>');
                    hasError = true;
                } else if ($(this).hasClass('email')) {
                    var emailReg = /^(['w-'.]+@(['w-]+'.)+['w-]{2,4})?$/;
                    if (!emailReg.test(jQuery.trim($(this).val()))) {
                        var labelText = $(this).prev('label').text();
                        $(this).addClass('fielderror');
                        $('#apply_form span').html('<strong>Your email address is incorrect</strong>');
                        hasError = true;
                    }
                }
            });
            if (!hasError) {
                $.ajax({
                    url: 'applyProcess.php',
                    type: "POST",
                    data: {
                        "applyFirstName" : $('#applyFirstName').val(),
                        "applyLastName" : $('#applyLastName').val(),
                        "applyEmail" : $('#applyEmail').val(),
                                                                                                "applyAge" : $('#applyAge').val(),
                                                                                                "applyGender" : $('#applyGender').val(),
                                                                                                "applySpecialization" : $('#applySpecialization').val(),
                                                                                                "applyEducation" : $('#applyEducation').val(),
                        "applyNotes" : $('#applyNotes').val(),
                        "sendApplication" : true
                    }
                }).done(function(rsp) {
                    $('#sendApplication').attr('disabled', 'disabled');
                    $('#apply_form').fadeOut(500);
                    $('.contact-success').fadeIn(500);
                }).fail(function() {
                    $('#apply_form').fadeOut(500);
                    $('.contact-fail').fadeIn(500);
                });
            }
            return false;
        });
    }

processor.php

<?php
include 'library.php'; // include the library file
include "classes/class.phpmailer.php"; // include the class name
if(isset($_POST['sendApplication'])) {
    $email = $_POST['applyEmail'];
    $fname = $_POST['applyFirstName'];
    $lname = $_POST['applyLastName'];   
    $selected_val_age = $_POST['applyAge'];    
    $selected_val_gender = $_POST['applyGender'];    
    $selected_val_specialization = $_POST['applySpecialization'];    
    $selected_val_education = $_POST['applyEducation'];
    $notes = $_POST['applyNotes'];
    function clean_string($string) {
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad,"",$string);
    }

    $email_message = "Applicant's Details.'n'n";
    $email_message = "<table>";
    $email_message .= "First Name: ".clean_string($fname)."'n";
    $email_message .= "Surname: ".clean_string($lname)."'n";
    $email_message .= "Email: ".clean_string($email)."'n";
    $email_message .="Age: ".clean_string($selected_val_age)."'n";
    $email_message .= "Gender: ".clean_string($selected_val_gender)."'n";
    $email_message .= "Specialization: ".clean_string($selected_val_specialization)."'n";
    $email_message .= "Education Level Attained: ".clean_string($selected_val_education)."'n";
    $email_message .= "About Applicant: ".clean_string($notes)."'n";
    $email_message .= "</table>";

    $mail = new PHPMailer();
    $mail->IsSMTP();
    $mail->SMTPDebug  = 2;
    $mail->Host       = SMTP_HOST;
    $mail->Port = SMTP_PORT; //Port of the SMTP like to be 25, 80, 465 or 587
    $mail->Username   = SMTP_UNAME;
    $mail->Password = SMTP_PWORD; 
    $mail->SMTPAuth   = true;
    $mail->FromName = $lname.' '.$fname;
    $mail->From = $email;  //From address of the mail
    $mail->Subject = ("Application Form"); //Subject of your mail
    $mail->AddAddress("me@me.com");
    $mail->AddCC("me@you.com");
    $mail->AddReplyTo("me@me.com", "Man");
    //Read an HTML message body from an external file, convert referenced images to embedded, convert HTML into a basic plain-text alternative body
    $mail->Body = $email_message;
    $mail->AltBody = $email_message;
    $send = $mail->Send(); //Send the mails

}
?>

我不明白为什么ajax脚本不处理所有其他值,尽管它做了所有其他事情(甚至返回了成功消息)如有任何协助,我们将不胜感激。感谢

您正在序列化表单,丢弃数据并尝试手动重新创建它。不要这样做,只发送序列化的数据:

var formInput = $(this).serialize();
$.ajax({
     url: 'applyProcess.php',
     type: "POST",
     data: formInput,
     ...

事实证明,我使用了两个相同的Form ID。更改表单的ID名称后,一切都相应地工作了。