Question 41980 in PHP Question posted in
Official manual can be found here.

Open modal with javascritp – PHP

I’m trying to open a modal with javascript, if the ajax form is executed, can someone help me?
i am using bootstrap library and jquery
basically if the form is sent so that no error occurs then the modal should open just as the form is sent to the database

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>
    </head>

    <body>
        <form method="post">
            <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
            <br/>
            <input type="email" id="email" name="email" placeholder="Digite o email" />
            <br/>
            <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
        </form>
        <div id="resposta"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/main.js"></script>
           
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            Launch demo modal
          </button>
          
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  ...
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                </div>
              </div>
            </div>
          </div>

        
    

    </body>
  

</html>

here is my javascript form for the request from both backend and front

main.js

$("#btn_gravar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();
   
    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "create.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");
          
        }
    }).done(function(e){
        $("#resposta").html("Dados registrado amigo com sucesso...");
        $("#exampleModal").modal("show");//<--this line that was to open the modal
       
        
    })
})

$("#btn_atualizar").on("click",function(){
    var txt_nome = $("#nome").val();
    var txt_email = $("#email").val();
    var txt_id = $("#id").val();
    
    console.log(txt_email + " - " + txt_nome);

    $.ajax({
        url: "update.php",
        type: "post",
        data:{
            nome: txt_nome, email: txt_email, id: txt_id
        },
        beforeSend : function(){
            $("#resposta").html("Enviando...");
        }
    }).done(function(e){
        $("#resposta").html("Dados atualizado com sucesso...");
        window.location="read.php";
    })
})
Tags:

3

Answers


  1. 0

    Please move

     <script src="js/main.js"></script>

    and

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    in before </body> or you can move it to inside <head> tag

    Login or Signup to reply.
  2. 0

    As Paul Mahardika wrote, move main.js and jquery before the closing body tag. You have to move the bootstrap javascript after jquery, because it uses it.

    Like this:

    <body>
...
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>        
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>        
    <script src="main.js"></script>
</body>

    Or just move bootstrap after jquery in <head> and wrap your code in main.js in a document.ready function:

    $(document).ready(function(){
    ...insert your current main.js code here
});

    And you can remove main.js and jquery below <div id="resposta"></div>

    Login or Signup to reply.
  3. 0 
    <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<script>
  jQuery(document).ready(function()
  {
   jQuery("#btn_gravar").on("click",function(){
    var txt_nome = jQuery("#nome").val();
    var txt_email = jQuery("#email").val();
    jQuery.ajax({
        url: "<?=base_url()?>/Test/insert_data/",
        type: "get",
        data:{
            nome: txt_nome, email: txt_email
        },
        beforeSend : function(){
            jQuery("#resposta").html("Enviando...");
        }
    }).done(function(e){
        jQuery("#resposta").html("Dados registrado amigo com sucesso...");
        jQuery("#exampleModal").modal("show");//<--this line that was to open the modal
       
        
      })
    })

    jQuery("#btn_atualizar").on("click",function(){
      var txt_nome = jQuery("#nome").val();
      var txt_email = jQuery("#email").val();
      var txt_id = jQuery("#id").val();
      
      console.log(txt_email + " - " + txt_nome);

      jQuery.ajax({
          url: "update.php",
          type: "post",
          data:{
              nome: txt_nome, email: txt_email, id: txt_id
          },
          beforeSend : function(){
              jQuery("#resposta").html("Enviando...");
          }
      }).done(function(e){
          jQuery("#resposta").html("Dados atualizado com sucesso...");
          window.location="read.php";
      })
    })
  });

  </script>
  <body>
    <form method="post">
      <input type="text" id="nome" name="nome" placeholder="Digite o nome" />
      <br/>
      <input type="email" id="email" name="email" placeholder="Digite o email" />
      <br/>
      <input type="button" id="btn_gravar" value="Salvar" name="salvar" />
    </form>
    <div id="resposta"></div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </body>

    This work for me

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search