Collect the data of a Foreach in PHP with JavaScript

Question

Collect the data of a Foreach in PHP with JavaScript

Navigation

#1 by (1 votes)

0

First I generate a table with foreach in php to show the data of my students.

<div class="col col-md-12">
<h2>Alumnos de 1º ESO</h2>        
<table class="table table-striped" id="table_alumnos">
<thead>
  <tr>
    <th>ID</th>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>E-Mail</th>
    <th>Curso</th>
    <th>Fecha Registro</th>
    <th>Opciones</th>
  </tr>
</thead>
<tbody>
  <?php
    foreach($primer as $item) {
        echo "<tr>";
        echo "<td name='id' id='".$item->id."'>".$item->id."</td>";
        echo "<td name='nombre' id='".$item->nombre."'>".$item->nombre."</td>";
        echo "<td name='apellido' id='".$item->apellido."'>".$item->apellido."</td>";
        echo "<td name='email' id='".$item->email."'>".$item->email."</td>";
        echo "<td name='curso' id='".$item->curso."'>".$item->curso."</td>";
        echo "<td>".$item->fecha_registro."</td>";
        echo "<td><a href='".base_url()."alumno/".$item->id."/asdf' class='btn btn-warning'><span class='fa fa-eye'></span></a>";
        echo "<button type='button' class='btn btn-success' name='edit' id='edit' data-toggle='modal' data-target='#myModal' onClick='selectedAlumno()'><span class='fa fa-pencil-square-o'></span></button>";            
        echo "<button type='submit' class='btn btn-danger' value='".$item->id."' name='del'><span class='fa fa-trash'></span></button></td>";
        echo "</tr>";
    }
  ?>
</table>

Each one with its edit button that calls the following function: onClick='selectedAlumno()' corresponding to the following image:

//Función para pasar los parametros a nuestra ventana modal
function selectedAlumno() {


  $('#table_alumnos').click(function() {
    var $this = $(this);
    var id = $this.find('td[name=id]').attr('id');
    var nombre = $this.find('td[name=nombre]').attr('id');
    var apellido = $this.find('td[name=apellido]').attr('id');
    var email = $this.find('td[name=email]').attr('id');
    var curso = $this.find('td[name=curso]').attr('id');

    $('#mid').val(id);
    $('#mnombre').val(nombre);
    $('#mapellido').val(apellido);
    $('#memail').val(email);
    $('#mcurso').val(curso);
  });

}

In the Script I take the data of each ID by its NAME and assign it to its modal window with: $('#mid').val(id);

Modal Window:

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Formulario de edición: Exámenes <span class='fa fa-sign-in'></span></h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                    <form class="form-control" method="POST" action="<?php echo base_url().'Alumnos_listado/form_alumnos_validacion_editar' ?>">
                        <div>
                        <label>URL actual</label>
                        <input type="text" class="form-control" name="url" value="<?php echo base_url(uri_string()) ?>">
                        <br>
                        </div>
                        <div>
                        <label>ID Alumno</label>
                        <input type="text" class="form-control" name="mid" id="mid" readonly>
                        <br>
                        </div>
                        <label>Nombre del Alumno</label>
                        <input type="text" class="form-control" name="mnombre" id="mnombre" placeholder="">
                        <br>
                        <label>Apellido del Alumno</label>
                        <input type="text" class="form-control" name="mapellido" id="mapellido" placeholder="">
                        <br>
                        <label>E-Mail del Alumno</label>
                        <input type="text" class="form-control" name="memail" id="memail" placeholder="">
                        <br>
                        <label class="mr-sm-2">Curso</label>
                        <select class="custom-select mb-2 mr-sm-2 mb-sm-0" name="mcurso" id="mcurso"> 
                          <option disabled selected value>Seleccione un curso</option>
                          <option value="1ESO">1º ESO</option>
                          <option value="2ESO">2º ESO</option>
                          <option value="3ESO">3º ESO</option>
                          <option value="4ESO">4º ESO</option>
                        </select>
                        <br><br>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="mbtnCerrarModal">Cerrar <span class='fa fa-close'></span></button>
                            <button type="submit" class="btn btn-success" >Actualizar <span class='fa fa-refresh'></span></button>
                        </div>
                    </form>
                    <?php
                        if($this->session->flashdata('error_message') != '') {
                            echo "<div class='alert alert-danger'>";
                            echo $this->session->flashdata('error_message');
                            echo "</div>";
                        }
                        if($this->session->flashdata('success_message') != '') {
                            echo "<div class='alert alert-success'>";
                            echo $this->session->flashdata('success_message');
                            echo "</div>";
                        }
                    ?>
                    </div>
                </div>
            </div>

If I edit the first student in the table, the modal opens and shows all of your data perfectly, but when clicking on the other students, always take the first student from the table.

How could I control it?

javascript jquery php

asked by Daniel Moreno Alcubilla 23.08.2017 в 10:00

source

1 answer

Close an application on android Pass the value of a DropDownList to a JavaScript function

score 1 · Accepted Answer

First you have to keep in mind that the ids of the html elements should be unique, that is, two html elements should not have the same id. Your code generates that a table where the ids are repeated in each row, and since you use the javascript selector as the id, javascript what it does is select the first one it finds with that id.

You should modify the code generated by the html so that it does not produce the same id for two elements.

In addition, you do not need to use the .click() function of jQuery, since the attribute onClick of html is already responsible for making an equivalent action.

A simple way to determine the element that has been pressed is simply to pass the object in the onClick attribute.

html:

onClick='selectedAlumno(this)'

Then in javascript you can take that object i from the get the values you need, an option can be.

javascript:

function selectedAlumno(boton) {

  var celdas = $(boton).closest('tr').find('td');

  var id = celdas.eq(0).text();
  var nombre = celdas.eq(1).text();
  var apellido = celdas.eq(2).text();
  var email = celdas.eq(3).text();
  var curso = celdas.eq(4).text();

  $('#mid').val(id);
  $('#mnombre').val(nombre);
  $('#mapellido').val(apellido);
  $('#memail').val(email);
  $('#mcurso').val(curso);

}

This code takes the text of each cell, if you prefer a method similar to the one you have, where you use an attribute that contains the information, keep in mind that html5 allows the use of own attributes.

The name cell could be

<td data-nombre="Juan">Juan</td>

and access the value with

selectorDeLacelda.attr('data-nombre');