CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
hhs
hhs

Reputation: 309

Showing AJAX Confrimation into a modal

I have a form which basically inserts the form data into database. I am doing this by AJAX request. Now, So when the data is inserted the success info of "rentinsert.php" is shown in the form page which is showing "Your order has bee placed". What i want to do is to show it into a modal. So how to show the success message upon AJAX in a modal. Below is my code -

the html - 

<form method="post"  id="rentalform" action="rentinsertdb.php">
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" placeholder="Enter full name" name="rentname">
        </div>
     </div>
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
        <div class="col-sm-8 tabular-border">
           <div class="dropdown">
              <select class="btn btn-default dropdown-toggle" name="rentcar" >
              <option>Choose your ride</option>
              <option value="Toyota Alion 2008">Toyota Alion 2008</option>
              <option value="Toyota Alion 2008">Toyota Premio 2008</option>
              <option value="Toyota Alion 2008">Toyota Corolla 2006</option>
              <option value="Toyota Alion 2008">Toyota Noah 2010</option>
           </select>
           </div>
        </div>
     </div>
     <!-- <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
        </div>
        <div class="col-sm-2">
           <p class="help-block"></p>
        </div>
     </div> -->
     <div class="form-group space" >
        <label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
        <div class="col-sm-8 tabular-border">
           <input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
        </div>
        <div class="col-sm-2">
           <p class="help-block"></p>
        </div>
     </div>
     <div class="form-group space">
        <label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
        <div class="col-sm-8 tabular-border"><textarea  name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
     </div>

     <div class="col-sm-8 col-sm-offset-2 space">
        <button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
     </div>
     </form>
  </div>
  <span id="result"></span>
  <script type="text/javascript">
     $("#submitrent").click( function() {
     $.post( $("#rentalform").attr("action"),
     $("#rentalform :input").serializeArray(),
     function(info){ $("#result").html(info);
     });
     // clearInput();
     });

     $("#rentalform").submit( function() {
        return false;
     });
// function clearInput() {
//     $("#myForm :input").each( function() {
//        $(this).val('');
//     });
// }
  </script>

rentinsert.php -

<?php
header("Access-Control-Allow-Origin: *");

include_once "rentconnection.php";

// echo "<pre>";
// print_r($_POST);

$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";

if(mysqli_query($con, $sql)){

?> 

<body style= "background-color:#1D726A">

<h1>Your Order Has Been Placed! </h1>

</body>

<?php

    } else {
        echo "Error: " . $sql . "<br>" . mysqli_error($con);
    }
    mysqli_close($con);
    ?>

Upvotes: 2

Views: 69

Answers (2)

Imvydao
Imvydao

Reputation: 26

if (mysqli_query($con, $sql)) {
    echo json_encode(array('message' => 'Your Order Has Been Placed!'));
    exit();
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

Add modal 

<div class="modal fade" id="modal-content">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p id="msg">Message here!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Show message in view

("#submitrent").click( function() {
        $.post( $("#rentalform").attr("action"),
        $("#rentalform :input").serializeArray(),
        function(info){
           var obj = jQuery.parseJSON(info);
           $("#msg").html(obj.message);
           $("#modal-content").modal('show');
        });
    // clearInput();
    });

Upvotes: 0

Saty
Saty

Reputation: 22532

You need to echo your message when you successfully insert data into database

if (mysqli_query($con, $sql)) {
    echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

Upvotes: 1

Related Questions