Question:
I have a table where I place various data resulting from a SQL query, for each record that a query returns I place a button to show the data in a form of the record that I selected so far I can only retrieve a single value with this code, how can I retrieve the other registry values that I selected?
$('#modalSi').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data().id;
$(e.currentTarget).find('#txtNombre').val(id);
});
This is the link with which I open the modal window, through the data-id attribute I pass the id value that you have selected, you can pass more values
<a href="#" id="link1" data-id="row.id" data-toggle="modal" data-target="#modalSi"><button type="button" class="btn btn-success">Si </button></a>
And this is the HTML:
<!--modal-->
<div class="modal fade bs-example-modal-lg" id="modalSi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- body panel -->
<div id="panelNo" class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Reporte de renovación </h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="lblNombre" class="control-label col-sm-2">Nombre</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" id="txtNombre" disabled>
</div>
</div>
<div class="form-group">
<label for="lblTelefono" class="control-label col-sm-2">Telefono</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone"></span>
</span>
<input type="text" class="form-control" id="txtTelefono" disabled>
</div>
</div>
<div class="form-group">
<label for="lblFechaa" class="control-label col-sm-2">Fecha Activación</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<input type="text" class="form-control" id="txtFechaa" disabled>
</div>
</div>
<div class="form-group">
<label for="lbltipoTramite" class="control-label col-sm-2">Opciones</label>
<div class="input-group date col-sm-10">
<span class="input-group-addon">
<span class="glyphicon glyphicon-th-list"></span>
</span>
<select name="tipo" size="1" id="tipo" class="form-control">
<option value="">--Seleccionar--</option>
<option value="1">Buzón</option>
<option value="2">Fuera de servicio / número ha cambiado</option>
<option value="3">No contesta</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-10">
<input type="button" name="Submit" value="Guardar" id="btn-enviar" class="btn btn-success" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--modal-->
Answer:
Considering that the link is inside a td tag and it is inside a tr tag that contains the rest of the cells with their values: I give you a detailed example of how I would obtain all the values of a row
<table>
<tr>
<td>Columna 1 1</td>
<td>Columna 1 2</td>
<td><a href="#"><button>Get Fila</button></a></td>
</tr>
<tr>
<td>Columna 2 1</td>
<td>Columna 2 2</td>
<td><a href="#"><button>Get Fila</button></a></td>
</tr>
</table>
In your application as you are using JQuery, in the show.bs.modal event that you use, you could apply the parent() function twice.
var row= $(e.relatedTarget).parent().parent()
That would return the row in which the link that the user clicked is located. With JQuery you can get all the elements contained in that row, that is, all its cells (level 1) and their content (level 2).
To get all the child elements (cells in this example) of the row, you can use JQuery's children() function. It will return, in this case, an array of td elements
You can do the path of the elements with an each
row.children().each(function () {
var celda= this;
//Con $(celda).text() obtendrías el contenido de la celda que es lo que buscás
});
The problem with this is that in your problem you need to associate each cell with an element of the form. Surely there are more elegant alternatives but I'm going to opt for the simple version: you go through each position of the array manually
var celdas= row.children();
//$(celdas[0]).text() te daría el contenido de la primer celda de la fila
//$(celdas[1]).text() te daría el contenido de la segunda celda de la fila
//etc
I put together a small example, it does not include bootstrap or the modal or the form. But it is useful to see how to get the row and go through its cells. I hope it helps you.
Something important to mention is that I have seen other answers and would advise you to consider them. I limited myself to solving it based on what you had, without straying too far from what you were doing, without accessing the server side (.net) and without resorting to other libraries. This would work and solve your problem quickly, but I advise you to consider other ways to solve situations like these in the future.
I would choose to take the id and with it fetch the data from the server.
Luck!