使用ajax发布多个复选框

时间:2015-12-01 10:55:47

标签: php html ajax

我有一个ajax脚本,它将我的所有数据发布到contact-form.php(电子邮件)脚本。一切都有效,除了复选框。当我收到电子邮件时,它只显示一个空字段。

这是我现在的代码:

<div class="col-md-6">
<h3 style="margin-top:30px;">Type raam</h3>
    <div>
        <label>
            <input type="checkbox" name="checkbox" id="checkbox1" value="Kantel">
            <span>Kantel</span>
        </label>
    </div> 
    <div>
        <label>
            <input type="checkbox" name="checkbox" id="checkbox2" value="Schuif">
            <span>Schuif</span>
        </label>
    </div> 
    <div>
        <label>
            <input type="checkbox" name="checkbox" id="checkbox3" value="Deuropening">
            <span>Deuropening</span>
        </label>
    </div> 
    <div>
        <label>
            <input type="checkbox" name="checkbox" id="checkbox4" value="Draai">
            <span>Draai</span>
        </label>
    </div> 
    <div>
        <label>
            <input type="checkbox" name="checkbox" id="checkbox5" value="Draai/kantel">
            <span>Draai/kantel</span>
        </label>
    </div> 
</div>

邮件脚本:

<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));

header('Content-type: application/json');

// Enter your email address
$to = 'email@live.nl';

$subject = $_POST['subject'];

if($to) {
    $name = $_POST['name'];
    $email = $_POST['email'];

    $fields = array(
        0 => array(
            'text' => 'Naam',
            'val' => $_POST['name']
        ),
        1 => array(
            'text' => 'Email adres',
            'val' => $_POST['email']
        ),
        2 => array(
            'text' => 'Adres',
            'val' => $_POST['adres']
        ),
        3 => array(
            'text' => 'Afleveradres',
            'val' => $_POST['afleveradres']
        ),
        4 => array(
            'text' => 'Postcode',
            'val' => $_POST['postcode']
        ),
        5 => array(
            'text' => 'Plaats',
            'val' => $_POST['plaats']
        ),
        6 => array(
            'text' => 'Tweede plaats',
            'val' => $_POST['plaats2']
        ),
        7 => array(
            'text' => 'Telefoonnummer',
            'val' => $_POST['telefoonnr']
        ),
        8 => array(
            'text' => 'Mobiel nummer',
            'val' => $_POST['mobielnr']
        ),
        9 => array(
            'text' => 'Type raam',
            'val' => $_POST['checkbox']
        ),
        10 => array(
            'text' => 'Contactpersoon',
            'val' => $_POST['contactpersoon']
        ),
        11 => array(
            'text' => 'Bericht',
            'val' => $_POST['message']
        )
    );

    $message = "";
    foreach($fields as $field) {
        $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";
    }

    $headers = '';
    $headers .= 'From: ' . $name . ' <' . $email . '>' . "\r\n";
    $headers .= "Reply-To: " .  $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=UTF-8\r\n";

    if (mail($to, $subject, $message, $headers)){
        $arrResult = array ('response'=>'success');
    } else{
        $arrResult = array ('response'=>'error');
    }

    echo json_encode($arrResult);

} else {

    $arrResult = array ('response'=>'error');
    echo json_encode($arrResult);

}
?>

ajax帖子:

// Ajax Submit
$.ajax({
    type: "POST",
    url: url,
    data: {
        "name": $("#contact-form #name").val(),
        "email": $("#contact-form #email").val(),
        "subject": $("#contact-form #subject").val(),
        "adres": $("#contact-form #adres").val(),
        "afleveradres": $("#contact-form #afleveradres").val(),
        "postcode": $("#contact-form #postcode").val(),
        "contactpersoon": $("#contact-form #contactpersoon").val(),
        "plaats": $("#contact-form #plaats").val(),
        "plaats2": $("#contact-form #plaats2").val(),
        "telefoonnr": $("#contact-form #telefoonnr").val(),
        "mobielnr": $("#contact-form #mobielnr").val(),
        "checkbox": $("#contact-form #checkbox").map(function(){ return $(this).val(); }).get().join(","),
        "message": $("#contact-form #message").val()
    },

现在我用逗号分隔结果,但我的邮件中根本没有得到任何结果。知道我做错了吗?

1 个答案:

答案 0 :(得分:3)

   "checkbox": $("#contact-form #checkbox").map(function(){ return $(this).val(); }).get().join(","),

您正在获取标识为checkbox的每个元素,并将其值与逗号一起使用。

只有三个主要问题:

  • 您不允许使用具有给定ID的多个元素
  • 您实际上拥有该ID的零元素
  • 在将复选框包含在数据中之前,您不会检查复选框是否已实际检查

看起来你真的想要:

$("#contact-form [name='checkbox']:checked")

但请注意,使用逗号分隔数据非常不标准。

简单易懂:

data: $("#contact-form").serialize()

并使用PHP&#34; array&#34;复选框的样式命名约定:

name="checkbox[]"

然后将$_POST['checkbox']读取为值数组(而不是逗号分隔的字符串)。