All geek questions in one place

How to make a PHP form work as modal

I have this HTML code for a form in modal (using Bootstrap)

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="edit-user-modal-label" aria-hidden="true">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">


          <form name="login_form" action="test.php" method="post" role="form">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">                  
                      <label for="email">Email:</label>
                      <input type="email" class="form-control" id="email" placeholder="Enter email">                  
                </div>

                <div class="form-group">
                      <label for="pwd">Password:</label>
                      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                </div>
            </div>

            <div class="modal-footer">
                <input id="submit" name="submit" type="submit" value="Ok" class="btn btn-primary">
            </div>

          </form>

      </div>

    </div>
</div>

The problem is that when I click the ok button, nothing happens. This is the test.php file (which I used only for viewing, if it worked)

<html>
    logged
</html>

I'm new to bootstrap, so I'm not quite sure why it doesn't work like a regular HTML + CSS page. Thank you for your help!

EDIT

I found this AJAX code, tried to add it to my code, but still didn't work.

$(document).ready(function () {
            $("input#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "test.php", // 
                    data: $('form.login_form').serialize(),
                    success: function(msg){
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("failure");
                    }
                });
            });
        });

For now, I just want to go to another PHP page after clicking the button (I haven't encoded the login check yet).

+3
source share
2

, ,

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    $(document).ready(function(){

    $('#submit').click(function(){

      $('#loginModal').modal('show'); 
    });

</script>
0

, , AJAX, . , ajax . jQuery, - false :

$(document).ready(function () {
            $("input#submit").click(function(){
                $.ajax({
                    type: "POST",
                    url: "test.php", // 
                    data: $('form.login_form').serialize(),
                    success: function(msg){
                        $("#form-content").modal('hide');   
                    },
                    error: function(){
                        alert("failure");
                    }
                });
                return false;//stop form submission
            });
        });

jQuery return false vanilla-JS:

eventObj.preventDefault();//do not handle event in a normal fashion
eventObj.stopPropagation();//do not propagate event to other handlers

, , (<form id='modalformid'>) ( enter), :

$('#modalformid').on('submit', function()
{
    var frm = $(this);//reference to the form that is submitted
    $.ajax({
        type: "POST",
        url: "test.php",
        data: frm.serialize(),//serialize correct form
        success: function(msg) {
            //the response from the server is in msg here!
            $("#form-content").modal('hide');   
        },
        error: function(){
            alert("failure");
        }
    });//your ajax call here
    return false;
});

, , JS- (, jQuery), $(document).ready() ( console.log($) console.log($ === jQuery))..
, $('form.login_form') : ID . - . $('form.login_form') . : CSS, JS (), /: .

0

Source: https://habr.com/ru/post/1612421/

More articles:


All Articles