Open modal window with php function via JS

Asked

Viewed 797 times

0

I need to click a button, open a modal with a form for inserting data in mysql. I’m adapting a code I used earlier to display iframe, but when modal opens it shows the page inside the iframe with the php function. I need you to only open the form inside the modal to fill in. Follows:

Admin.php

 <li> <a role="button" data-toggle="modal" href="#insere" class="fa fa-info-circle"  style="font-size:18px"> Inserir</a></li>
  <div class="modal fade" id="insere" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close blank" title="Fechar" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title text-center">Inserir</h2>
                </div>
                <div class="modal-body text-center">
                    <iframe width="100%" height="900px" frameborder="none"></iframe>
                </div>
            </div>
        </div>
    </div> 
    <script type="text/javascript">
    //função JS
  $('#insere').on('show.bs.modal', function () {
  $('#insere iframe').attr('src','?insere');
  });
     $('#insere').on('hide.bs.modal', function () {
$('#insere iframe').removeAttr('src');
 });
 </script>

Commands.php

if (isset($_GET['insere'])) {
<form id="executainserir" method="post" enctype="multipart/form-data">
<strong>Inserir documentos no banco de dados:</strong>
<table width="1075" border="1">
<tbody>
<tr>
  <td width="180" scope="col">Título:
    <input name="titulo" type="text" autofocus required title="Título" size="30"></td>
  <td width="498" scope="col">Descrição:
    <input name="descricao" type="text" required title="Descrição" size="83"></td>
  <td width="375" scope="col">Link:
    <input name="link" type="url" value="http://" size="62"></td>

</tr>
</tbody>
</table>
<input name="arquivo" type="file" accept=".pdf" required title="Arquivo com extensão *.pdf" id="arquivo"><br> 
<input type="submit" name="executainserir" value="Gravar">
</form>
php javascript

2 answers

1

I believe you will need one AJAX.

When you click on the modal button, do a GET via AJAX, returning the contents of the Commands.php page (which in this case would be the html form), with this return, just popular the element that will display this form (imagine that would be the .modal-body).

0

Well, first of all:

$('#insere iframe').attr('src','?insere');

should be

$('#insere iframe').attr('src','comandos.php?insere');

However, as Denis Bernardo said, the ideal is an AJAX request for.php commands and ideally with 'method' POST and abandon GET.

I assume that the purpose of this code is to upload with animation or progress indication, but this technique (via iframe) is discouraged to the maximum. There are lighter, easier and safer alternatives. See: http://www.javascripture.com/FormData

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.