【问题标题】:Values from fields does not pass throug ajax to php字段中的值不会通过 ajax 传递给 php
【发布时间】:2019-09-11 14:30:53
【问题描述】:

我有一个小联系表,几乎可以正常工作。该文件已正确上传和发送,但表单中输入字段的所有其他值都不会通过脚本。有人看到我错过了什么吗?

表格:

<form id="contactForm" name="sentMessage" novalidate="" method="post" enctype="multipart/form-data">
<input type="hidden" name="path" id="path" value="projectpage">
<div><div class="textwidget custom-html-widget"><div class="moduletable pt-2 pb-2  mb-4">
<div class="custom  pl-2  pr-2 pt-4 pb-2  mb-4">
<div class="control-group form-group">
<div class="col"><label for="name">Navn:</label><input id="name" class="form-control" required="" type="text" data-validation-required-message="Skriv inn ditt navn.">
<div class="help-block"></div>
</div>
</div>
<div class="control-group form-group">
<div class="col"><label for="phone">Telefonnummer:</label><input id="phone" class="form-control" required="" type="tel" data-validation-required-message="Skriv inn et telefonnummer.">
<div class="help-block"></div>
</div>
</div>
<div class="control-group form-group">
<div class="col"><label for="email">E-post:</label><input id="email" class="form-control" required="" type="email" data-validation-required-message="Skriv inn en e-postadresse.">
<div class="help-block"></div>
</div>
</div>
<div class="control-group form-group">
<div class="col"><label for="message">Melding:</label><textarea id="message" class="form-control" style="resize: none;" cols="100" maxlength="999" required="" rows="10" data-validation-required-message="Skriv en melding"></textarea>
<div class="help-block"></div>
</div>
</div>
<div class="control-group form-group">
<div class="col"><label for="attachment">Vedlegg:</label> <input type="file" name="attachment[]" class="form-control border-0 w-auto" multiple="multiple">
</div>
</div>
<div class="control-group form-group">
<div class="col"><label class="checkbox"> <input id="terms-and-conditions" name="terms-and-conditions" required="" type="checkbox" data-validation-required-message="Kryss av denne boksen hvis du vil fortsette"> Ved avkryssning samtykker du i vår <a href="/personvernerklaering" data-toggle="modal" data-target=".bd-example-modal-xl" rel="noopener noreferrer">personvernerklæring</a>. </label>
<div class="help-block"></div>
</div>
</div>
<p class="help-block"></p>
<div id="success"></div>
<div class="col"><button id="sendMessageButton" class="btn btn-success" type="submit">Send oss melding</button></div></div>
</div></div></div></form>

JS:我认为问题出在此处,但我无法弄清楚要更改或添加什么以使字段中的数据与附件一起传递。

$(function() {
    $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {},
        submitSuccess: function($form, event) {
            $("#btnSubmit").attr("disabled", true);
            event.preventDefault();
            var data = new FormData(contactForm);
            $.ajax({
                url: "/wp-content/themes/bootstrap/mail/contact_me.php",
                type: "POST",
        method: 'POST',
                data: data,
                cache: false,
        contentType: false,
        processData: false,
                success: function() {
                    $("#btnSubmit").attr("disabled", false);
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
                    $('#success > .alert-success').append("<strong>Takk for din interesse. </strong>");
                    $('#success > .alert-success').append('</div>');
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry, it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    $('#contactForm').trigger("reset");
                },
            });
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });
    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});
$('#name').focus(function() {
    $('#success').html('');
});

PHP:

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

/* Exception class. */
require 'Exception.php';

/* The main PHPMailer class. */
require 'PHPMailer.php';



$name = strip_tags(htmlspecialchars($_POST['name']));
$from = strip_tags(htmlspecialchars($_POST['name']));
$email_address = strip_tags(htmlspecialchars($_POST['email']));
$phone = strip_tags(htmlspecialchars($_POST['phone']));
$message = strip_tags(htmlspecialchars($_POST['message']));
$path = strip_tags(htmlspecialchars($_POST['path']));



$mail = new PHPMailer;
$mail->CharSet = 'UTF-8';
$mail->Encoding = 'base64';
$mail->AddReplyTo(($email_address), ($name));
$mail->setFrom('noreply@mydomain.no', 'Kontaktskjema på nettside');
$mail->addAddress('email@gmail.com', 'My NAME');
$mail->Subject  = 'Melding fra ' .$name. ' via kontaktskjema';
$mail->Body     = "Du har fått en melding via kontaktskjemaet på nettsiden.\n\n"."Her er detaljene:\n\nNavn: $name\n\nE-post: $email_address\n\nTelefon: $phone\n\nMelding:\n$message";

foreach ($_FILES["attachment"]["name"] as $k => $v) {
    $mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
}

if(!$mail->send()) {
  echo 'Message was not sent.';
  echo 'Mailer error: ' . $mail->ErrorInfo;
} else {
  echo 'Message has been sent.';
}     

return true;         
?>

【问题讨论】:

    标签: ajax forms phpmailer


    【解决方案1】:

    大部分&lt;input&gt; 元素没有name 属性。所以这不会包括他们:

    new FormData(contactForm)
    

    文件输入有效,因为它有一个名称:

    <input type="file" name="attachment[]" class="form-control border-0 w-auto" multiple="multiple">
                       ^----- here ------^
    

    为您希望包含在 FormData 对象中的其余输入添加名称。

    【讨论】:

    • 我到底是怎么错过的。谢谢 :-) 这个帖子应该可以删了。
    【解决方案2】:

    就像大卫说你的大多数 &lt;input&gt; 元素没有名称属性,这就是为什么 FormData 方法不包括它们,你有两个解决方法:

    1. 使用每个元素的 id 将所有数据放入一个数组中,并将该数组传递给您的 ajax,例如:

    let data = {
    
        name : $('#name').val(),
    
        email: $('#email').val(),
    
        .....
    
        };
    1. 为每个输入添加名称属性。

    希望对你有帮助

    【讨论】:

      猜你喜欢
      • 2014-02-02
      • 2014-02-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-01
      • 2023-04-09
      • 2023-03-09
      相关资源
      最近更新 更多