bootstrap modal jquery plugin - login

StackOverflow https://stackoverflow.com/questions/22162732

  •  19-10-2022
  •  | 
  •  

Question

I am trying to use the plug in for login form where email and password are the two fields. Though I have the code for validating email and password against the data stored in database, modal closes without validation as soon as the submit button is clicked. I don't want to exit the modal until either valid email and password are entered or cancel button is clicked. The markup is as follows: 

<!Doctype = html>
<head>
  meta data entered
</head>
<body>
<div class="modal-content">
<div class="modal-header">
<h1>Sign In</h1>
</div>
<div class="modal-content">
<form>
<input name="email" type="email">
<input name="password" type="password">
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-footer">
</div>
</div>

Can someone help please? Thanks

No correct solution

OTHER TIPS

One way of approaching this is by "catching the click event", preventing the default action and taking it from there. 

<script>

$('button[type="submit"]').click(function(event){

    event.preventDefault();

    $.ajax({
        success: function(data, status, xhr) {

            $('#modal-div').modal('close');

        },
        url: ...,
        type: ...,

    })
})

You need to make an AJAX request to a PHP script that validates your credentials from MySQL or whatever. That script should return a HTTP header 200 if login went well, and 401 otherwise. This HTTP request should also return a body (not <body>) with "OK" or similar so that it's easy to check that everything went fine in the success-handler of the AJAX request. The success-handler (callback) is also the proper place to close the modal.

Research whatever you do not understand in my answer. Read introductory material to the topics below. When you have a sufficient understanding of these concepts, update your question with code that you have written. Explain why you think that code should work, and outline your ideas about why you think it doesn't work. That way, you will get help on this site.

  • HTTP status codes
  • PHP HTTP header
  • PHP HTTP response
  • why is javascript asynchronous
  • success callback
  • jQuery ajax request
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top