没有从表单复选框获取并将jquery中的值传递给$ _POST

时间:2014-07-04 00:41:17

标签: javascript php jquery checkbox

我有几个名称相同的复选框,并使用方括号,以获得数组

<label>
          <input type="checkbox" value="Tlocrt objekta" name="dokument[]" > Tlocrt objekta </input>
        </label>
        <label>
        <input type="checkbox" value="Građevinska dozvola" name="dokument[]" > Građevinska dozvola </input>
      </label>
      <label>
        <input type="checkbox" value="Glavni projekt" name="dokument[]" > Glavni projekt </input>
      </label>
      <label>
        <input type="checkbox" value="Izvedbeni projekt" name="dokument[]" > Izvedbeni projekt </input>
      </label>
      <label>
        <input type="checkbox" value="Elaborat legalizacije" name="dokument[]" > Elaborat legalizacije </input>
      </label>
      <label>
        <input type="checkbox" value="Elaborat etažiranja" name="dokument[]" > Elaborat etažiranja </input>
      </label>
      <label>
        <input type="checkbox" value="Projekt preuređenja" name="dokument[]" > Projekt preuređenja </input>
      </label>
      <label>
        <input type="checkbox" value="Završno izvješće nadzornog inženjera" name="dokument[]" > Završno izvješće nadzornog inženjera </input>

我正在尝试从此复选框中获取值

var user_Docs       =    $("input:checkbox[name='dokument[]']:checked");

并使用此

将它们传递给PHP
//data to be sent to server
            post_data = {'name':user_Name, 'email':user_Email, 'telefon':user_Phone, 'objekt':user_Objekt, 'kvadratura':user_Kvadratura, 'god_izgradnje':user_Izgradnja, 'kat_cestica':user_Cestica, 'kat_opcina':user_Opcina, 'namjena':user_Namjena, 'napomena':user_Napomena, 'dokument[]':user_Docs};

这是我的Javascript

$(document).ready(function() {
    $("#submit_btn").click(function() { 
        //get input field values
        var user_Name       = $('input[name=name]').val();
        var user_Email      = $('input[name=email]').val();
        var user_Phone      = $('input[name=telefon]').val();
        var user_Objekt      = $('input[name=objekt]').val();
        var user_Kvadratura      = $('input[name=kvadratura]').val();
        var user_Izgradnja      = $('input[name=god_izgradnje]').val();
        var user_Cestica      = $('input[name=kat_cestica]').val();
        var user_Opcina      = $('input[name=kat_opcina]').val();
        var user_Namjena      = $('input[name=namjena]').val();
        var user_Napomena    = $('textarea[name=napomena]').val();
        var user_Docs       =    $("input:checkbox[name='dokument[]']:checked");

        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;
        if(user_Name==""){
            $('input[name=name]').css('border-color','red');
            proceed = false;
        }
        if(user_Email==""){
            $('input[name=email]').css('border-color','red');
            proceed = false;
        }
        if(user_Phone=="") {    
            $('input[name=telefon]').css('border-color','red');
            proceed = false;
        }
        if(user_Objekt=="") {    
            $('input[name=objekt]').css('border-color','red');
            proceed = false;
        }
        if(user_Kvadratura=="") {    
            $('input[name=kvadratura]').css('border-color','red');
            proceed = false;
        }
        if(user_Izgradnja=="") {    
            $('input[name=god_izgradnje]').css('border-color','red');
            proceed = false;
        }
        if(user_Cestica=="") {    
            $('input[name=kat_cestica]').css('border-color','red');
            proceed = false;
        }
        if(user_Opcina=="") {    
            $('input[name=kat_opcina]').css('border-color','red');
            proceed = false;
        }
        if(user_Namjena=="") {    
            $('input[name=namjena]').css('border-color','red');
            proceed = false;
        }
        /* if(user_Napomena=="") {    
            $('texarea[name=napomena]').css('border-color','red');
            proceed = false;
        } */

        //everything looks good! proceed...
        if(proceed) 
        {
            //data to be sent to server
            post_data = {'name':user_Name, 'email':user_Email, 'telefon':user_Phone, 'objekt':user_Objekt, 'kvadratura':user_Kvadratura, 'god_izgradnje':user_Izgradnja, 'kat_cestica':user_Cestica, 'kat_opcina':user_Opcina, 'namjena':user_Namjena, 'napomena':user_Napomena, 'dokument[]':user_Docs};

            //Ajax post data to server
            $.post('contact_me.php', post_data, function(response){  

                //load json data from server and output message     
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val(''); 
                    $('#contact_form textarea').val(''); 
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form textarea").keyup(function() { 
        $("#contact_form input, #contact_form textarea").css('border-color',''); 
        $("#result").slideUp();
    });

});

这是我的PHP

<?php
if($_POST)
{
    $to_Email       = "bla@bla.com"; //Replace with recipient email address
    $subject        = 'Poruka'; //Subject line for emails


    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        //exit script outputting json data
        $output = json_encode(
        array(
            'type'=>'error', 
            'text' => 'Request must come from Ajax'
        ));

        die($output);
    } 

    $user_Docs  = '';
if(isset($_POST['dokument']) && is_array($_POST['dokument']) && count($_POST['dokument']) > 0){ 
    $user_Docs = implode('|', $_POST['dokument']);
}

    //check $_POST vars are set, exit if any missing
    //if(!isset($_POST["name"]) || !isset($_POST["email"]) || !isset($_POST["telefon"]) || !isset($_POST["objekt"]))
    //{
        //$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
        //die($output);
    //}

    //Sanitize input data using PHP filter_var().
    $user_Name        = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
    $user_Email       = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
    $user_Phone       = filter_var($_POST["telefon"], FILTER_SANITIZE_STRING);
    $user_Objekt     = filter_var($_POST["objekt"], FILTER_SANITIZE_STRING);
    $user_Kvadratura  = filter_var($_POST["kvadratura"], FILTER_SANITIZE_STRING);
    $user_Izgradnja    = filter_var($_POST["god_izgradnje"], FILTER_SANITIZE_STRING);
    $user_Cestica      = filter_var($_POST["kat_cestica"], FILTER_SANITIZE_STRING);
    $user_Opcina     = filter_var($_POST["kat_opcina"], FILTER_SANITIZE_STRING);
    $user_Namjena       = filter_var($_POST["namjena"], FILTER_SANITIZE_STRING);
    $user_Napomena       = filter_var($_POST["napomena"], FILTER_SANITIZE_STRING);



    //additional php validation
    if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
        die($output);
    }
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
        die($output);
    }
    if(!is_numeric($user_Phone)) //check entered data is numbers
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Only numbers allowed in phone field'));
        die($output);
    }
    if(strlen($user_Objekt)<3) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short objekt! Please enter something.'));
        die($output);
    }
    if(!is_numeric($user_Kvadratura)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short kvadratura! Please enter something.'));
        die($output);
    }
    if(!is_numeric($user_Izgradnja)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short izgradnja! Please enter something.'));
        die($output);
    }
    if(strlen($user_Cestica)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short cestica! Please enter something.'));
        die($output);
    }
    if(strlen($user_Opcina)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short opcina! Please enter something.'));
        die($output);
    }
    if(strlen($user_Namjena)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short namjena! Please enter something.'));
        die($output);
    }
    /* if(strlen($user_Napomena)<0) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short napomena! Please enter something.'));
        die($output);
    } */

    // Construct email body
    $body_message = 'Od: ' . $user_Name . "\r\n";
    $body_message .= 'E-mail: ' . $user_Email . "\r\n";
    $body_message .= 'Telefon: ' . $user_Phone . "\r\n";
    $body_message .= 'Novi ili postojeći objekt: ' . $user_Objekt  . "\r\n";
    $body_message .= 'Kvadratni metri: ' . $user_Kvadratura . "\r\n";
    $body_message .= 'Godina izgradnje: ' . $user_Izgradnja . "\r\n";
    $body_message .= 'Kat. čestica: ' . $user_Cestica  . "\r\n";
    $body_message .= 'Kat. općina: ' . $user_Opcina  . "\r\n";
    $body_message .= 'Namjena: ' . $user_Namjena  . "\r\n";
    $body_message .= 'Napomena: ' . $user_Napomena  . "\r\n";   
    $body_message .= 'Dodatni dokumenti: ' . $user_Docs . "\r\n";
    $body_message .= 'Dodatni dokumenti: ' . $dokument . "\r\n";

    //proceed with PHP email.
    $headers = 'From: '.$user_Email.'' . "\r\n" .
    'Reply-To: '.$user_Email.'' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

    $sentMail = @mail($to_Email, $subject, $body_message .'  -'.$user_Name, $headers);

    if(!$sentMail)
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for your email'));
        die($output);
    }
}
?>

我的表单正在运行,但我没有从电子邮件中的复选框中获取值。 更确切地说,我正在尝试从表单收集数据并发送包含相同数据的电子邮件。所有数据都在电子邮件中,但复选框的值未显示。不知怎的,我没有得到它们。有人能帮帮忙吗?

3 个答案:

答案 0 :(得分:0)

我认为您正在研究AJAX表单提交。阅读以下示例:Submitting HTML form using Jquery AJAX

或者看起来您的表单无法在任何地方提交操作。要将其传递到$ _POST,您需要让标签说出类似

的内容

那个output.php是$ _POST将被填充的地方。

答案 1 :(得分:0)

序列化表单,而不是手动创建要传递的数组。

http://jsfiddle.net/44H7b/

  $("#form").submit(function (event) {
        console.log($(this).serializeArray());
        event.preventDefault();
    });

答案 2 :(得分:0)

答案是序列化[link] http://api.jquery.com/serialize/ 这意味着替换这部分代码 //data to be sent to server post_data = {'name':user_Name, 'email':user_Email, 'telefon':user_Phone, 'objekt':user_Objekt, 'kvadratura':user_Kvadratura, 'god_izgradnje':user_Izgradnja, 'kat_cestica':user_Cestica, 'kat_opcina':user_Opcina, 'namjena':user_Namjena, 'napomena':user_Napomena, 'dokument[]':user_Docs};

这一个  post_data = $('form#yourForm').serialize(); 好吧不完全一样。我更改了ID并输入了自己的表单ID