Form.Serialize with checkbox数组

时间:2014-07-07 08:40:03

标签: javascript php jquery html forms

我通过使用form.serialize方法通过JQuery提交表单。但是同一个表单有一个复选框数组,由PHP函数动态地进行通过 这是形式:

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

这是生成复选框的php函数:

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

如何在Jquery中使用form.serialize提交表单,在PHP端处理复选框,以便我可以从复选框数组中提取值?

2 个答案:

答案 0 :(得分:1)

此jQuery文档页面介绍了如何使用序列化功能: http://api.jquery.com/serialize/

如果然后使用POST将输出传递到php页面,则在PHP脚本中,选中的值将作为数组存储在$_POST['profiles']中。因此,要遍历复选框的值,您可以使用:

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

答案 1 :(得分:0)

jQuery的form.serialize只传递已检查的复选框。 如果您希望将所有复选框传递给服务器,请考虑生成隐藏的输入以存储这些值。

我还会将复选框名称更改为“个人资料”