Mahmoud Mohmed Mahmoud Mohmed - 1 year ago 86
Javascript Question

submit form in bootstrap modal

I have a page using a

to register new user Here is the modal code :

<div id="register" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">New User</h4>
<div class="modal-body">

<form id="new_customer" action="../model/php/action.php" method="post">
<div class="form-group">
<label for="usr">username:</label>
<input type="text" name="user" class="form-control" id="usr">
<div class="form-group">
<label for="em">email :</label>
<input type="text" name="email" class="form-control" id="em">
<div class="form-group">
<label for="pwd">password :</label>
<input type="password" name="pwd" class="form-control" id="pwd">
<button type="submit" id="signup" name="signup" class="btn btn-success btn-lg">signup<span class="glyphicon glyphicon-user"></span></button>
</form> </div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">close</button>


and here example action page :

if(empty($_POST['user']) || empty($_POST['email']) || empty($_POST['pwd']))
echo $lang['empty'];

i want view back the results in the same dialog.

Answer Source

This ajax request for your question, if you don't understand it read about jquery and ajax requests.

ajax request it will not call reload of the page, so your modal will still displayed:

    type: "POST",
    data: {user: $('#usr').val(), email: $('#em').val(), pwd: $('#pwd').val()},
    url: "/model/php/action.php",
    success: function(data){
          //here data will contain all output from .php, so for your script it will equal to $lang['empty'], you ca do whatever you want with data
          //f.e. set to modal
    error: function(data) {
        console.log(data); //error message