pass values of checkbox in ajax

Question

my javascript and php is very low at the moment and i am trying to make something really simple but just can do it!

i have a form and i want the checbox values(the ones who are marked ofcourse) to be passed on to the file they need to get to(its all good and passed on except the checkboxes) and from there to the email(that works too except the checkboxes).

here is my code:

(again - everything works but the checkboxes and i removed small things like validation of other things so it will be comfterble to read)

<script type="text/javascript">
    jQuery(function () {

        jQuery(".button").click(function () {
            // validate and process form
            // first hide any error messages
            jQuery('.error').hide();

            var name = jQuery("input#name").val();

            var email = jQuery("input#email").val();

            var phone = jQuery("input#phone").val();


            var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone;
            //alert (dataString);return false;

            jQuery.ajax({
                type: "POST",
                url: "mitkadmim.php",
                data: dataString,
                success: function () {
                    jQuery('#contact_form').html("<div id='message'></div>");
                    jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
                        .append("<p>We will be in touch soon.</p>")
                        .hide()
                        .fadeIn(1500, function () {
                        jQuery('#message').append("<img id='checkmark' src='images/check.png' />");
                    });
                }
            });
            return false;
        });
    });
</script>


    <div id="mheo">

        <div id="contact_form">
          <form name="contact" method="post" action="">
            <fieldset>
              <label for="name" id="name_label">שם: </label>
              <input type="text" name="name" id="name" size="30" value="" class="text-input" /><br/><br/>

              <label for="email" id="email_label">E-mail: </label>
              <input type="text" name="email" id="email" size="30" value="" class="text-input" /><br/><br/>


              <label for="phone" id="phone_label">מס. טלפון</label>
              <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /><br/><br/>

        intrested in:<br/>
                <input type="checkbox" name="kidumchoise[]" value="kidum_esek" />aaa<br />
                <input type="checkbox" name="kidumchoise[]" value="mitug_esek" />bbb<br />
                <input type="checkbox" name="kidumchoise[]" value="laikim" />CCC<br />
                <input type="checkbox" name="kidumchoise[]" value="aher" />DDD<br />


                <br />
              <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
            </fieldset>
          </form>
        </div>
    </div>

and the email side

<?php
   $recipient = 'ddsds@gmail.com';
   $name = $_POST['name'];
   $email = $_POST['email'];
   $phone = $_POST['phone'];
   $kidumchoise = $_POST['kidumchoise'];   

   $msg = "Message from: $name\n\n".$_POST['phone']."\n".$_POST['email'].$_POST['kidumchoise']."    \n""\n".$_POST['kidumchoise']."\n";
   mail($recipient, $name , $msg);
?>

what do i do wrong? thanks,

Answer 1

            var chkElem = document.getElementsByName("kidumchoise[]");
            var choice ="";

            for(var i=0; i< chkElem.length; i++)
            {
                if(chkElem[i].checked)
                    choice = choice + chkElem[i].value;
            }

            var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&kidumchoise=' +choice;

Add following code after following line

                var phone = jQuery("input#phone").val();

It will work correctly.