Form.Serialize with checkbox array

Question

I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function This is the form:

<form class="form" id="formNewClient" role="form">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#clientdata" data-toggle="tab"><i class="fa fa-user"></i> Dados Cliente</a></li>
                <li><a href="#phoneparkdata" data-toggle="tab"><i class="fa fa-phone"></i> Dados Phonepark</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="clientdata">
            <div class="row">
            <div class="col-md-12">
                            <div class="page-header"><h3>Dados Pessoais</h3></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="name">Nome Completo:*</label>
                            <input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="email">Email:</label>
                            <input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-8">
                            <label for="addressone">Morada:</label>
                            <input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
                        </div>
                    </div>
                    <div class="row"> 
                        <div class="form-group col-md-6">
                            <label for="address2">Morada (cont.):</label>
                            <input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="postalcode">Código Postal:</label>
                            <input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="city">Localidade:</label>
                            <input type="text" name="clientCity" class="form-control" placeholder="Localidade">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-4">
                            <label for="clientNif">NIF</label>
                            <input type="text" name="clientNif" class="form-control " placeholder="NIF">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="clientBirthdate">Data de Nascimento</label>
                            <div class="form-group">
                <div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
                <input type='text' name="clientBirthdate" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="sex">Sexo:</label>
                            <br>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioSex" value="M">
                            Masculino
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadioSex" value="F">
                            Feminino
                        </label>
                        </div>
                    </div>
        </div>
        <!--END CLIENTDATA-->
        <div class="tab-pane" id="phoneparkdata">
            <div class="row">
                        <div class="col-md-12">
                            <div class="page-header">
                                <h3>Dados Phonepark</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h4>Documentos:</h4></div>
                        <div class="form-group col-md-4">
                            <label for="document">Tipo de Documento:</label>
                            <select name="documenttype" class="form-control">
                                <?php selectListDocuments();?>
                            </select>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="documentNumber">Número do Documento:*</label>
                            <input type="text" name="documentNumber" class="form-control">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="documentNumber">Número do Documento (Secundário):</label>
                            <input type="text" name="documentNumberSec" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><h4>Comunicações:</h4></div>
                        <div class="form-group col-md-4">
                            <label for="phone1">Telemóvel:*</label>
                            <input type="text" name="clientPhonePri" class="form-control">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="phone2">Telemóvel Secundário:</label>
                            <input type="text" name="clientPhoneSec" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <h4>Perfil:</h4>
                            <label for="profile">Perfil(s) a utilizar:*</label>
                            <?php 
                                profileCheckBoxes();
                            ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="activationDate">Data de Activação:</label>
                            <div class="form-group">
                <div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
                <input type='text' name="clientActivationTime" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="limitDate">Data de Limite:</label>
                            <div class="form-group">
                <div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
                <input type='text' name="clientDeactivationTime" class="form-control" />
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
                </div>
                </div>
                        </div>
                    </div>
                </div>
                <!--END PHONEPARKDATA-->    
            </div>
    <!--END TAB-CONTENT-->
    <div class="row">
        <div class="col-md-4 col-lg-4 pull-right">
            <button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
                </div>
            </div>
        </form>

And this is the php function that generates the checkboxes:

function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
  while($row = mysqli_fetch_array($listProfiles)){
    ?>
    <label class="checkbox-inline">
      <input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
      <?php echo $row['Nome']; ?>
    </label>
    <?php
  }
}
}

How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?

Did you get any error during serialization?

Madhu
– Madhu

2014-07-07 09:13:55 +00:00
Commented Jul 7, 2014 at 9:13 — Madhu
– Madhu, Commented Jul 7, 2014 at 9:13
@Madhu actually I don't get any error during serialization.

Pedro Oliveira
– Pedro Oliveira

2014-07-07 09:19:53 +00:00
Commented Jul 7, 2014 at 9:19 — Pedro Oliveira
– Pedro Oliveira, Commented Jul 7, 2014 at 9:19

Duncan Cowan · Accepted Answer · 2014-07-07 09:15:42Z

1

This jQuery documentation page explains how to use the serialize function: http://api.jquery.com/serialize/

If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:

foreach ($_POST['profiles'] as $profile) {  
    //process code here
}

answered Jul 7, 2014 at 9:15

Duncan Cowan

4953 silver badges12 bronze badges

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

3 Comments

Pedro Oliveira Over a year ago

Using your solution this is the console.log() of my form.serialize

clientName=Teste+EST&clientEmail=teste%40est.pt&clientAddressone=&clientAddresstwo=&clientCPostal=&clientCity=&clientNif=&clientBirthdate=&documenttype=BI&documentNumber=1231231&documentNumberSec=&clientPhonePri=31231231231&clientPhoneSec=&profiles=1&profiles=2&profiles=3&clientActivationTime=&clientDeactivationTime=&submitNewClient=

Duncan Cowan Over a year ago

Have you changed the names of your checkboxes from profiles[] to profiles? If you have, undo it! You need the square brackets so that PHP treats it as an array. Once you have changed the name back your form.serialize function should return profiles[]=1&profiles[]=2&profiles[]=3. You can then pass the result of form.serialize into your php script using an AJAX request ($.ajax({...})) and $_POST['profiles'] will be [1, 2, 3].

Pedro Oliveira Over a year ago

Cowman Thank you, that was indeed correct, it's now working flawless. thanks again for your help!

EduSanCon · Accepted Answer · 2014-07-07 09:38:44Z

0

jQuery's form.serialize only pass checksboxes that are checked. if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.

I would also change the checkboxes name to "profiles"

edited Jul 7, 2014 at 9:38

answered Jul 7, 2014 at 9:32

EduSanCon

1,9391 gold badge12 silver badges9 bronze badges

1 Comment

Pedro Oliveira Over a year ago

Actually I'm only trying to obtain the value of the checked checkboxes, since those are the ones that build the connect between the profile and the user on this case.

Collectives™ on Stack Overflow

Form.Serialize with checkbox array

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related