Pass option multiple with jQuery Chosen plugin to PHP form

Question

I have an HTML form. I have some jQuery animation (dialog popup and validation) that sends the data to a form.php.

My problem: I get my email with the NAME, EMAIL and PHONE, but only ONE option is passed. I can't get the multiple choices...

Can someone help me please?

So here is my code:

HTML

<form class="form_class" id="form_id" method="POST" name="contactform" action="form.php">
  <label for="nom">Name</label>
  <br/>
  <input name="nom" type="text" id="nom"  /><br/>
  <label for="email">Email</label>
  <br/>
  <input name="email" type="text" id="email"  /><br/>
  <label for="tel">Phone</label>
  <br/>
  <input name="tel" type="text" id="tel"  /><br/>
  <select multiple="multiple" name="beats[]" data-placeholder="Choose your beats" id="beats" style="width:300px;" tabindex="4">
      <option name="AlternateFunkyDelicBeat" value="AlternateFunkyDelicBeat"> AlternateFunkyDelicBeat</option>
      <option name="Bottom" value="Bottom"> Bottom</option>
      <option name="Free_Speech" value="Free_Speech"> Free Speech</option>
      <option name="Fuck_Friends" value="Fuck_Friends"> Fuck Friends</option>
      <option name="Hopeless_Streets" value="Hopeless_Streets"> Hopeless Streets</option>
      <option name="If_I_Die_Tonight" value="If_I_Die_Tonight"> If I Die Tonight</option>
      <option name="Infamous" value="Infamous"> Infamous</option>
      <option name="Obvious_Behavior" value="Obvious_Behavior"> Obvious Behavior</option>
      <option name="Off_The_Flight" value="Off_The_Flight"> Off The Flight</option>
      <option name="Pissed" value="Pissed"> Pissed</option>
    </select>       
    <input type="image" src="images/button.png" id="button" width="100" height="56" target="_parent"/></form>

Here is the jQuery at the top of the HTML page:

$(document).ready(function() {

$('#form_id').submit(function(){
  nom = $(this).find("#nom").val();
  email = $(this).find("#email").val();
  tel = $(this).find("#tel").val();
  /*beats = $(this).find("#beats").val();*/
  beats = $(this).find("#beats").val();

  $.post('form.php',{
    nom:nom,
    email:email,
    tel:tel,
    beats:beats

  }, function(data){
        if(data.error =='mail_invalide'){
          $('#basic-modal-content2').modal();
          return false;
      }else if(data.error =='vide'){
          $('#basic-modal-content1').modal();
          return false;
      }else{
        $('#basic-modal-content3').modal({onClose: function(){
          $("input").val('');
          $("textarea").val('');
            $.modal.close();
        }});
          return false;
      }
  }, "json");
    return false; 
});



});

</script>

And finally, my form.php

    <?php
$e = array();
$e['error'] = "Non valid form";
if(empty($_POST['nom']) || empty($_POST['tel'])){
  $e['error'] = "vide";
}

elseif(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
  $e['error'] = "mail_invalide";
}

else{
  $e['error'] = 'Ok';
  $nom = $_POST['nom'];
  $email = $_POST['email'];
  $tel = $_POST['tel'];
  $beats = $_POST['beats'];


  $to = '[email protected]';
  $sujet = 'New message from W-Productions.com '.$email;

  $body = "New message from W-Productions.com \n\n
          Name: $nom \n
          Emali: $email \n
          Phone: $tel \n\n

          Beats: $beats";




  mail($to, $sujet, $body);

}

echo json_encode($e);
?>

RafH · Accepted Answer · 2013-05-04 14:33:45Z

1

$_POST['beats'] is an array of the selected options.

If you just need a list of the selected options, try with :

$beats = implode(',', $_POST['beats']);

On the HTML side, you dont need to set a name attribut to the option element. You can also simplify this part : nom = $(this).find("#nom").val(); to nom = $("#nom").val(); as you are using IDs.

answered May 4, 2013 at 14:33

RafH

4,5442 gold badges25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pliashkou · Accepted Answer · 2013-05-04 14:56:01Z

0

You should get selected options with pseudo-selector:

$(this).find("#beats option:selected").each(function(){
    beats.push($(this).val());
})

answered May 4, 2013 at 14:56

pliashkou

4,1302 gold badges33 silver badges40 bronze badges

Collectives™ on Stack Overflow

Pass option multiple with jQuery Chosen plugin to PHP form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related