not getting and passing values in jquery from from form checkbox to $_POST

Question

I have several checkboxes with identical names and using square brackets so to get array

<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>

I am trying to get values from checkboxes with this

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

and pass them on to PHP with this

//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};

This is my 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();
    });

});

this is my 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);
    }
}
?>

My form is working, but I am not getting the values from checkboxes in my email. To be more precise i am trying to gather data from form and send an email containig same data. All data is in the email but the values of checkboxes are not displaying. Somehow i am not getting them. Can someone give me a hand with this, please?

It is hot clear what you do with post_data array. What email? Please be 200% more specific in your question. — Johan, Jul 04 '14 at 00:48
If you do var_dump($_POST); in your PHP script, does the dokument array show? — Johan, Jul 04 '14 at 01:02
You should really learn the basics of PHP before attempting more difficult things. — Johan, Jul 04 '14 at 02:10

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

I think you're looking into an AJAX form submission. Read examples like this one: Submitting HTML form using Jquery AJAX

Or it looks like there is no action for your form to be submitting anywhere. To pass it into $_POST, you need to have the tag say something like

That output.php is where $_POST will be filled.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 04 '14 at 00:54

bo_knows

546
2
6
17

the form works, submits everything except checkbox values. somehow this data doesnt appear. Perhaps something is wrong here `var user_Docs = $("input:checkbox[name='dokument[]']:checked");` or here `//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};` – ultranit Jul 04 '14 at 01:02
@ultranit use console.log() to log data to your console and check there if it contains the values. – Johan Jul 04 '14 at 01:04
I dont believe it does contain Values. First time using Firebug console – ultranit Jul 04 '14 at 01:26

score 0 · Answer 2 · answered Jul 04 '14 at 01:41

0

serialize the form instead of manually creating the array to be passed.

http://jsfiddle.net/44H7b/

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

answered Jul 04 '14 at 01:41

michikot

142
5

score 0 · Answer 3 · answered Jul 06 '14 at 15:25

the answer was serializing [link]http://api.jquery.com/serialize/ which means replacing this part of code //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};

with this one post_data = $('form#yourForm').serialize(); well not exactly as is. I changed the ID and put my own Form ID

not getting and passing values in jquery from from form checkbox to $_POST

3 Answers3