'How to put a PHP form into a modal

I have this HTML code for a form in a 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 on the "ok" button, nothing happens. This is the "test.php" file (which I only used to see if it worked)

<html>
    logged
</html>

I'm new in bootstrap so I'm not quite sure about why it does not work as a usual HTML+CSS page. Thanks for your help!

EDIT

I found this AJAX code, tried to adapt it into 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");
                    }
                });
            });
        });

By now, I just want to go to another PHP page after pressing the button (I haven't coded the login validation yet).

phphtmltwitter-bootstraptwitter-bootstrap-3bootstrap-modal


Solution 1:[1]

I see what is happening, just add this

<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>

Solution 2:[2]

The most obvious part of your problem is that, while you're performing an AJAX call, you'r not actually preventing the form from submitting. You don't want to submit the page, but instead wait for the ajax request to end, and process the response in your success callback. Since you're using jQuery, the easiest way to do that is to return false from the event callback:

$(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's return false is the equivalent of vanilla-JS's:

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

Having said that, your selector and event binding could be better, I'd set an ID for the form (<form id='modalformid'>), and bind the submit event (which can be triggered by the user pressing enter), and then bind the handler like so:

$('#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;
});

I'd also check the console to make sure you're including all JS dependencies (ie jQuery) before you're calling $(document).ready() and double-check for name conflicts (in console console.log($) and console.log($ === jQuery)).
Lastly, the $('form.login_form') selector is not reliable: ID's are by definition unique. Classes aren't. using $('form.login_form') could, in theory, match more than one form. rule of thumb: classes are useful for CSS rules, not so much for JS event handling (delegation asside), if you want to handle a single form/element: use an ID.

Solution 3:[3]

I agree with Elias. In the situation of an AJAX call you don't want to submit the form because page will reload and you'll never get a response.

In your JS, you're binding a click event, which is good, but your input is type="submit" which will cause an issue.

First thing, remove that.

<input id="submit" name="submit" value="Ok" class="btn btn-primary">

Secondly, in JQuery you're referencing an invalid selector for the form.

$('form.login_form').serialize()

There is no login_form class. Since AJAX handles the request for you I would suggest using an id instead and minimizing the attributes.

<form id="login_form" role="form">

Based on the HTML you provided I have to assume you were wanting to hide #loginModal instead of #form-content.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ethic Or Logics
Solution 2
Solution 3 EternalHour

Related Questions