I'm trying to set different texts on div fields in a modal, i'm using the Bootstrap
modal and setting 1 field with the next Javascript function, what i actually need to do is send several data texts to that modal. The data that I'm sending is the value
tag from different inputs hidden in a form, and there is too my <a></a>
tag which open my modal.
My current code looks like this, and it shows it from a php function, i'm sending their values with a data attribute to my JS:
echo '<form name="data-form">
<input type="hidden" name="value" value="'.$qb["value"].'">
<input type="hidden" name="idBol" value="'.$dat["id"].'">
<input type="hidden" name="numBol" value="'.$n.'">
<input type="hidden" name="idEvent" value="'.$qb["eventId"].'">
<input type="hidden" name="nameEvent" value="'.$nameEve.'">
<button type="button" href="#detallesModal" role="button" data-toggle="modal" data-nomb="'.$nomEve.'" data-precio="'.$valor.'" data-ciudad="'.$nomCiu.'" data-fecha="'.$fechaEvento.'" data-hora="'.$horaEvento.'" class="botonbol botonesbol btn-block ubicacionBoton open-detallesModal">
Details
</button>
</form>
</div>';
}
echo '</div>
</div>';
Here's my Javascript which sets a field with the value of my button, but i need to use all the values from those inputs and send'em to my modal, plus it. there's a foreach function, so that form change its values for each response from my database
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val(myBookId);
document.getElementById("content").innerHTML = $(this).name('valor');
document.getElementById("title-content").innerHTML = $(this).name('nombreEvento');
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
EDIT:
Now i set my modal in my view, and the form is in a controller, they conect eachother with the javascript code, no it sends data correctly, but only in the input fields, i need to set'em just in my <td>
tags. Here's my current modal table
<table class="table table-striped">
<tr>
<th style="text-align: right!important;">
Nombre del Evento:
</th>
<td>
<input readonly class="form-control" name="nomb" value="" id="nomb" type="text">
</td>
</tr>
<tr>
<th style="text-align: right!important;">
Precio de entrada:
</th>
<td>
<input readonly class="form-control" name="precio" id="precio" onkeydown="alpha(this)" onkeyup="alpha(this)" onblur="alpha(this)" onclick="alpha(this)" value="" type="text">
</td>
</tr>
<tr>
<th style="text-align: right!important;">
Ciudad:
</th>
<td>
<input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="ciudad" id="ciudad" value="" type="text">
</td>
</tr>
<tr>
<th style="text-align: right!important;">
Fecha:
</th>
<td>
<input readonly class="form-control" onkeydown="ime(this)" onkeyup="ime(this)" onblur="ime(this)" onclick="ime(this)" name="fecha" id="fecha" value="" type="date">
</td>
</tr>
<tr>
<th style="text-align: right!important;">
Hora:
</th>
<td>
<input readonly class="form-control" name="hora" id="hora" onkeydown="emailk(this)" onkeyup="emailk(this)" onblur="emailk(this)" onclick="emailk(this)" value="" type="time">
</td>
</tr>
</table>
<div>
<h4>Condiciones del Evento: </h4>
<p>aquí las condiciones del evento</p>
</div>