将所选选项值的ID发送到控制器

时间:2017-03-28 12:15:12

标签: php jquery forms twitter-bootstrap codeigniter-3

我有一个选择选项,其中包含从数据库中选择的标签!

我的问题是我不想发送标签的值,我想发送它的id。

这是我的代码:

<div class="form-group">
                 <h3>Veuillez choisir un cycle :</h3><br/>

                  <label>Cycle: </label>

                  <form method="post" accept-charset="utf-8" action="<?php echo site_url("filiere/filiere_add"); ?>">

                 <select name="cyc" id ="Select1" class="input-small">

                    <?php foreach($cycle as $row) {?>

                         <option><?php echo $row->libelle; ?></option>

                    <?php }?>
                </select>
                  </form>

                  <button class="btn btn-success" onclick="display()"><i class="glyphicon glyphicon-plus"></i> display</button>
                </div>

该表包含Id和libelle,我想在select选项表单中显示libelle,但我想将其id发送给控制器!

谢谢。

2 个答案:

答案 0 :(得分:0)

这就是你应该如何将ID发送给控制器:

<option value="<?php echo $row->id; ?>"><?php echo $row->libelle; ?></option>

答案 1 :(得分:0)

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>



    <div class="form-group">
                     <h3>Veuillez choisir un cycle :</h3><br/>

                      <label>Cycle: </label>

                      <form method="post" accept-charset="utf-8" action="<?php  echo site_url("filiere/filiere_add"); ?>">

                     <select name="cyc" id ="Select1" class="input-small">

                        <?php foreach($cycle as $row) {?>

                             <option value="<?php echo $row->id; ?>"><?php echo $row->libelle; ?></option>

                        <?php }?>
                    </select>
                      </form>

                      <button class="btn btn-success" onclick="display()"><i  class="glyphicon glyphicon-plus"></i> display</button>
                    </div>





  <div id="x" style="display:none;" class="container">

</center>


      <button class="btn btn-success" onclick="add_filiere()"><i class="glyphicon glyphicon-plus"></i> Ajouter une filiere</button>
    <br />
    <br />

      <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
                 <th>Identifiant</th>
          <th>Libellé</th>

          <th>Action</th>
        </tr>
      </thead>
      <tbody>
                <?php foreach($filiere as $row){?>
                     <tr>
                         <td><?php echo $row->id;?></td>
                         <td><?php echo $row->libelle;?></td>

                                <td>
                                    <button class="btn btn-warning" onclick="edit_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                                    <button class="btn btn-danger" onclick="delete_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>


                                </td>
                      </tr>
                     <?php }?>



      </tbody>


    </table>

  </div>



     <script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
      <script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>


       <script type="text/javascript">
       $(document).ready( function () {
        $('#table_id').DataTable( {
        "lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
       });
     } );
    var save_method; //for save method string
    var table;


    function add_filiere()
    {
      save_method = 'add';
      $('#form')[0].reset(); // reset form on modals
      $('#modal_form').modal('show'); // show bootstrap modal
    //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
    }

    function display()
    {
     document.getElementById('x').style.display = 'block';
    }

    function edit_filiere(id)
    {
      save_method = 'update';
      $('#form')[0].reset(); // reset form on modals

      //Ajax Load data from ajax
        $.ajax({
         url : "<?php echo site_url('index.php/filiere/filiere_edit/')?>/" + id,
         type: "GET",
          dataType: "JSON",
         success: function(data)
        {

            $('[name="i"]').val(data.id);
            $('[name="l"]').val(data.libelle);



               $('#modal_form').modal('show'); // show bootstrap modal when   complete loaded
            $('.modal-title').text('Modifier département');                                       // Set title to     Bootstrap modal title

        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error get data from ajax');
        }
    });
    }



    function save()
    {
      var url;
      if(save_method == 'add')
      {
          url = "<?php echo base_url('index.php/filiere/filiere_add')?>";
      }
      else
      {
        url = "<?php echo base_url('index.php/filiere/filiere_update')?>";
      }

       // ajax adding data to database
          $.ajax({
            url : url,
            type: "POST",
            data: $('#form').serialize(),
            dataType: "JSON",
            success: function(data)
            {
               //if success close modal and reload ajax table
               $('#modal_form').modal('hide');
              location.reload();// for reload a page
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error adding / update data');
            }
        });
    }


    function delete_filiere(id)
    {
      if(confirm('Voulez vous supprimer cette filiere ?'))
      {
        // ajax delete data from database
          $.ajax({
            url : "<?php echo site_url('index.php/filiere/filiere_delete')?>/"+id,
            type: "POST",
            dataType: "JSON",
            success: function(data)
            {

               location.reload();
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Error deleting data');
            }
        });

      }
    }

  </script>

  <!-- Bootstrap modal -->
  <div class="modal fade" id="modal_form" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Départements</h3>
      </div>
      <div class="modal-body form">
        <form action="#" id="form" class="form-horizontal">

          <div class="form-body">
            <div class="form-group">
              <label class="control-label col-md-3">Identifiant</label>
              <div class="col-md-9">
                <input name="i" placeholder="Identifiant" class="form-control" type="text">
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-3">Libelle</label>
              <div class="col-md-9">
                <input name="l" placeholder="Nom" class="form-control" type="text">
              </div>
            </div>




          </div>
        </form>
          </div>
          <div class="modal-footer">
            <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  <!-- End Bootstrap modal -->

  </body>
</html>