Modal still appears after form submit

Question

I have a modal for customer registration in an HTML Page, after the user enter all his data i want the modal to be available after form submit and just to show alert message that it has been added successfully,how can this be done?

HTML Page

<div class="modal-body">
<form action="AddNCustomer.php" target="" method="post" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-4">
            <label class="Modallabel">First Name:</label>
        </div>
        <div class="col-sm-8">
            <div class="input-group input-group-sm" style="margin-top: -5px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="FName" type="text" class="form-control ModalInput" name="FName" placeholder="First Name">
            </div><br>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <label class="Modallabel">Last Name:</label>
        </div>
        <div class="col-sm-8">
            <div class="input-group input-group-sm" style="margin-top: -5px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input id="LName" type="text" class="form-control ModalInput" name="LName" placeholder="Last Name">
            </div><br>
        </div>
    </div>
      //rest of input fields go here....
    <div class="row">
        <button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
    </div>
</form>

PHP Page

<?php
  include_once "connect.php";

if(isset($_POST['submit'])){
    $FName = $_POST['FName'];
    $LName = $_POST['LName'];
    $NName = $_POST['NName'];
    $FaceName = $_POST['FaceName'];
    $email = $_POST['email'];
    $BDate = $_POST['BDate'];
    $OName = $_POST['OName'];
    $CelfoneNumber = $_POST['CelfoneNumber'];
    $LandlineNumber = $_POST['LandlineNumber'];
    $Latitude = $_POST['Latitude'];
    $Longitude = $_POST['Longitude'];
    $c_image = $_FILES['fileUpload']['name'];
    $c_image_tmp = $_FILES['fileUpload']['tmp_name'];

    move_uploaded_file($c_image_tmp,"../CustomerImages/$c_image");
    //To check if the customer is already entered before
    $query="SELECT * from Customers where email_address_='".$_POST["email"]."'";
    $queryresult = $conn->query($query)->fetchAll(PDO::FETCH_ASSOC);

    if (count($queryresult) == 0)
    {
        //To get the largest customer id to add a new one
        $sql="SELECT MAX(Cust_id) as max FROM Customers";

        foreach ($conn->query($sql) as $row1)
        {
            $CustID=$row1['max'] + 1;
        } 

        //Inserting the customer details in table customer
        $stmt = "INSERT INTO Customers (first_name_,last_name_,nick_name_,facebook_name_,email_address_,birthdate_,name_of_organization_,celfone_no_,landline_no_,_delivery_location_1_coordinates__longitude,_delivery_location_1_coordinates__latitude,photo_,Cust_id) VALUES (:Fname,:Lname,:Nname,:Facename,:Email,:BDate,:Oname,:Cphone,:Lphone,:latvalue,:lngvalue,:Photo,:CustID)";

        $result=$conn->prepare($stmt);
        $result->bindparam(':Fname', $FName, PDO::PARAM_INT);
        $result->bindparam(':Lname', $LName, PDO::PARAM_INT);
        $result->bindparam(':Nname', $NName, PDO::PARAM_INT);
        $result->bindparam(':Facename', $FaceName, PDO::PARAM_INT);
        $result->bindparam(':Email', $email, PDO::PARAM_INT);
        $result->bindparam(':BDate', $BDate, PDO::PARAM_INT);
        $result->bindparam(':Oname', $OName, PDO::PARAM_INT);
        $result->bindparam(':Cphone', $CelfoneNumber, PDO::PARAM_INT);
        $result->bindparam(':Lphone', $LandlineNumber, PDO::PARAM_INT);
        $result->bindparam(':latvalue', $Latitude, PDO::PARAM_INT);
        $result->bindparam(':lngvalue',$Longitude, PDO::PARAM_INT);
        $result->bindparam(':Photo',$c_image, PDO::PARAM_INT);
        $result->bindparam(':CustID',$CustID, PDO::PARAM_INT);
        if($result->execute()) 
            { 
                echo "<script>alert('Account has been created successfully, Thanks!')</script>";                    
            } 
        else 
            { 
                echo "Failure!"; 
            }
    }
}
?>

Its weird that you use prepared statements to save data and then you opt to ope your system to SQL injection by doing this `$query="SELECT * from Customers where email_address_='".$_POST["email"]."'";` — Rotimi, May 24 '17 at 09:19
@Akintunde can you tell me how to get the image name & tmp in javascript so that i can pass it through ajax, the same i did in php `$c_image = $_FILES['fileUpload']['name']; $c_image_tmp = $_FILES['fileUpload']['tmp_name'];` — NewDeveloper, May 24 '17 at 09:19
Similar question [link](https://stackoverflow.com/a/20462576/4627015) — Ejaz47, May 24 '17 at 09:26

score 0 · Answer 1 · answered May 24 '17 at 09:20

look at => http://getbootstrap.com/2.3.2/javascript.html#modals

use

data-backdrop="static"

or

$("#yourModal").modal({"backdrop": "static"});

on your link opening your modal ==>

<a href="#" onclick="$('#yourModal').modal({'backdrop': 'static'});" class="btn btn-primary">yourModal</a>

Edit2 :

http://jsfiddle.net/BVmUL/39/

score 0 · Answer 2 · answered May 24 '17 at 09:30

0

Try This

$(document).ready(function(){
    $("#form-id").submit(function(){
        $("#modal-id").modal("hide");
    });
});

answered May 24 '17 at 09:30

Sharad Kale

971
1
7
19

Alessandro · Answer 3 · 2017-05-24T09:39:39.740

0

You could serialize the form and send it via ajax, something like follow:

$("#submit").click(function(){
    $.post('AddNCustomer.php', $('form').serialize())
    .done(function() {
        $("#myLabel").text("added successfully");
    });
)}

I hope it helps you, bye.

edited May 24 '17 at 09:39

answered May 24 '17 at 09:33

Alessandro

4,382
8
36
70

Modal still appears after form submit

3 Answers3