Solucionado (ver solução)
Solucionado
(ver solução)
13
respostas

Criar um Modal com Javascript

por sergio guerjik
| 59.6k xp | 252 posts
Aluno

Boa noite eu agradeceria ajuda. Gostaria de criar um modal simples onde o usuário pudesse inserir um numero de um documento e quando ele clicar em enviar, o retorno preencheria um input type text para depois enviar todas as informações para o BD. Eu tenho um modal simples que segue:

<script>
   $(function(){
    $('#myModal').modal('show');
});
   </script>
<div class="form-row">

   <div class="form-row">

   <div class="form-group col-md-4">

<button type="btn btn-danger" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
</div>
</div>
13 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Olá Sergio tudo bem?

Poderia postar o código completo para eu analisar onde está ocorrendo o erro?

Ou se não está dando erro e quiser aprender mais pode conferir a documentação https://getbootstrap.com/docs/4.0/components/modal/ também.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Espera um instante, agora entendi sua pergunta. Pera um instante que já coloco o código que precisa da parte de front-end.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Aqui está

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <h2>Modal Example</h2>
        <!-- Button to Open the Modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            Open modal
        </button>

        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- Modal Header -->
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Heading</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <input id="meu_input" placeholde="Digite aqui o número do documento">
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"
                            onclick="salvar()">Salvar</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <script>

        function salvar(){

        $.ajax({
            url: "enderecodomeupost.php",
            method: "POST",
            data: {
                meuinput: document.getElementById("meu_input").value
            }
            })
            .done(function (data) {
                console.log('success', data)
            })
            .fail(function (xhr) {
                console.log('error', xhr);
            });

        }

        document.getElementById("meu_input").value="";

    </script>
</body>

</html>

Do lado do servidor você precisa usar algum backend para pegar a informação e fazer um insert no banco de dados.

Espero ter ajudado!!!

por sergio guerjik
| 59.6k xp | 252 posts
Aluno

Muito obrigado pelo seu retorno André. O modal é exatamente o que preciso mas não estou conseguindo que a informação seja mostrada no input type: Não sei se fiz certo mas coloquei o id=meu_input para tentar receber as informações que são passadas através do botão salvar e preencher este input. Quando preencho o campo e clico em salvar ele retorna para a tela de cadastro do cliente mas não exibe o nome no input type text. O envio para o BD eu entendi. Envio todos os dados do formulário para o incluir- cadastro.php para tratar os dados e enviar ao servidor.

<label for="dados">Numero</label>
         <input type="text" class="form-control" name="numero" id="meu_input" placeholder="Preencher"
        >
       </div>
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Deixa eu ver se entendi no final você quer que o input fique com o texto do nome dentro do input?

Então não é só tirar essa parte document.getElementById("meu_input").value=""; ?

Agora se ele está retornando para tela de cadastro é porque tem um action no seu form para redirecionar não é? Por isso passei por ajax para não sair da mesma página.

por sergio guerjik
| 59.6k xp | 252 posts
Aluno

Entendi André você está certo, na verdade eu quero que ele não saia da página, que os dados voltem do modal e preencham o input. Por isso eu preenchi na url o mesmo arquivo. Depois disso eu envio todo o formulário para o BD, mas isso está ok. Veja que retirei o que vc me pediu mas mesmo assim não está indo para o input type text.

 function salvar(){

        $.ajax({
            url: "cadastro-cliente.php",
            method: "POST",
            data: {
                meuinput: document.getElementById("meu_input").value
            }
            })
            .done(function (data) {
                console.log('success', data)
            })
            .fail(function (xhr) {
                console.log('error', xhr);
            });

        }



    </script>
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Desculpe, estou confuso rsrsrs.

Você quer que os dados do input meu_input vão para o meu_input ou para outro lugar da página?

por sergio guerjik
| 59.6k xp | 252 posts
Aluno

oi André sem problemas até eu fico confuso as vezes....rsrsr. Eu gostaria de os dados digitados no modal fossem para o input type por isso eu achei que se eu colocasse id="meu_input" ele pegaria e exibiria os dados no campo. eu queria que fosse exibido aí dentro:

<label for="dados">Numero</label>
         <input type="text" class="form-control" name="numero" id="meu_input" placeholder="Preencher"
        >
       </div>
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Ah não, os dados digitados no input meu_input ficam no input e no post vão para o banco de dados.

Se quer que vá para outro input faça assim. Ou incorpore tudo dentro da função salvar.

<label id="label_dados" for="dados">Numero</label>
         <input onclick="document.getElementById('meu_outro_input').value=this.value;salvar();" type="text" class="form-control" name="numero" id="meu_input" placeholder="Preencher"
        >
       </div>
por sergio guerjik
| 59.6k xp | 252 posts
Aluno

Ainda não consegui André, me fala uma coisa na função salvar eu alterei a url para a própria página será que não é isso que está dando errado? Ah ele está enviando o dado para algum lugar porque quando inspecionei o console do chrome apareceu o "success " da função logo no inicio da pagina

function salvar(){

        $.ajax({
            url: "cadastro-cliente.php",
            method: "POST",
            data: {
                meuinput: document.getElementById("meu_input").value
            }
})
            .done(function (data) {
                console.log('success', data)
            })
            .fail(function (xhr) {
                console.log('error', xhr);
            });

        }



    </script>
solução!
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Você tem que usar uma URL cuja única função seja se comunicar com o banco de dados e dar insert da informação. Não é para colocar a da mesma página.

A sua página de insert tem que ser algo do tipo 

 <?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('"+$_GET["name"]+"', '"+$_GET["lastname"]+"', '"+$_GET["email"]+"')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
por sergio guerjik
| 59.6k xp | 252 posts
Aluno

Ah entendi André e valeu também pelas suas explicações porque vc me deu um ótimo exemplo utilizando o $.ajax para enviar dados ao BD que eu tinha alguma dificuldade. Vou implementar tudo isso amanhã e te retorno boa noite e muito obrigado.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Dinada, boa noite!!! Amanhã lá pro por do sol eu entro no fórum e dou uma olhadinha!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software