3
I have a button type="button" and I want him to capture information from my Texts for me to make an appointment at Mysql and display this result in a modal. However, I’m only able to capture this data in one button type="submit" and that type="submit" doesn’t open my modal.
How to solve this?
1
On my website I use the following codes:
In this first situation I use the tag , where I save the id to make the query. see:
<a href="#" title="Visualizar Pedido Por Inteiro" data-toggle="modal" data-target="#modal-pedidos" data-id="<?php echo $idPedidos; ?>" onclick="mostrarModal()"><span class="fa fa-eye fa-2x" style="margin-INNER: 10px;"></span></a>
It is important that you use the data-id, because it can occur, confusion when sending the identifier code in the query, in my case the id.
Take the request id sent by onClick, load the detailed ff_pedidos_php.php content with the received id and open the modal
function mostrarModal(){
$(document).ready(function() {
$('#modal-pedidos').on('show.bs.modal', function(e) {
var idPedidos = $(e.relatedTarget).data('id');
var url = "../../componentes/php/ff_pedidos_detalhados_php.php";
$('.modal-content').load(url, {idPedidos:idPedidos},
function(resultado){
$('#myModal').modal({show:true});
});
});
});
}Note: it is worth remembering that ff_pedidos_detailed is where are the selects, and all the structure that lack the modal, IE you have to leave on the page you want to open the modal, the "skeleton of the modal", see how is mine:
<!-- ABRE A O CORPO DA MODAL QUE É CARREGADA PELA PEDIDOS_DETALHADOS_PHP.PHP -->
<div class="modal fade validate" id="modal-pedidos" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<!-- AQUI É INSERIDO O CÓDIGO TRAZIDO PELA CONSULTA -->
</div>
</div>
</div>
<!-- FECHA MODAL -->
0
On such button if you use the type="button" class="fazQuery" can use query via AJAX in javascript example:
$(".fazQuery").on('click', function() {
$("#modalId").modal('show');
$("#modalBody").html("A carregar...");
$.ajax({
url: "urlProcura.php",
data: {query: "Texto a procurar??" },
success: function(resultado) {
$("#modalBody").html(resultado);
},
error: function(erro, resultado) {
alert("Ocorreu um erro tente novamente.");
}
});
});
In case you are using a bootstrap modal the function to open the modal is modal('show')
Example of modal to be used:
<!-- Modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="modalBody">
A carregar...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Browser other questions tagged php html input button
You are not signed in. Login or sign up in order to post.
Can you put the
submitat the eventclickof yourbutton:<button type="button" onclick="javascript: <Apontar o form aqui>.submit();">Botão</button>. If it fits, put your code I’ll give you a complete answer.– LipESprY
Post the HTML and Javascript Code you are using to hood the data and display the modal
– KaduAmaral
https://pastebin.com/BNhQeucU
– Rodrigo Caio
I found a solution, but it is creating the modal within the data display while, ie, a modal for each record.
– Rodrigo Caio
I don’t understand the difficulty. You have a View type="button" button to open the modal that works. Click and open the modal. In the modal you have the information, a Close button (that works) and another Save changes. Does not use button type="Submit" in this Save changes? If there was a form in the code there would be solution to use type="button" in Save changes.
– user60252