CODEWITHSUNDEEP
phphtmltwitter-bootstrap-3
user1012181
user1012181

Reputation: 8726

How to disable the modal close upon button press

I'm trying to create a login form in modal window. The problem is when I click on the sign in button, and if the login credentials are wrong, the modal closes. User needs to click again on the sign in button to see the modal and the error message.

How can I solve this?

This is the modal content. 

<div id="signin" class="modal fade">
  <div class="modal-dialog">
                <?php include "view/login.html";  ?>
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

login.html file. 

<section class="frontoffice" style="padding: 20px 0;">
    <div class="">
        <h3 class="text-center" style="font-weight:700">SIGN IN</h3>
        <div class="row">
        <form action="" method="POST">
            <div class="col-md-1">
            </div>
            <div class="col-md-10 request-form">
                <div class="form-area">
                    <div class="row">
                        <div class="col-md-12">
                            <input class="text-field" name="username" type="text" placeholder="Username*" style="width:100%">
                            <?php echo $unameerror; ?>
                            <input class="text-field" name="password" type="password" placeholder="Password*" style="width:100%">
                            <?php echo $passerror; ?>

                        </div>
                    </div>
                </div>
                <div class="row" style="margin:20px;">
                    <div class="col-md-12 text-center">
                        <input type="submit" value="SIGN IN" name="login" class="blueButton">
                    </div>
                </div>
            </div>
        <div class="col-md-1">
        </div>
        </form>
        </div>
    </div>
</section>

Javascript 

<script type="text/javascript">
$(document).ready(function() {
    $("[rel='popup']").popover();
});

Upvotes: 0

Views: 1195

Answers (1)

Dan
Dan

Reputation: 3103

The <input type='submit'/> automatically posts a form, once pressed. So the page should be refreshed after button press. You should use ajax to send the form and post back the response. It should look like this:

$(function(){

 $("form").on("submit", function(e){
  e.preventDefault();
  $.post("url", $(this).serialize(), function(response){
    //present errors
  }, "json");
  })
})

On the php side, set the response as an array, and use echo json_encode($array) to present the result.

Hope i got it this time :D

Upvotes: 2

Related Questions