CODEWITHSUNDEEP
phpjquerymysqlajax
Indra Gotamey
Indra Gotamey

Reputation: 133

Using SweetAlert to Display messages after inserting data to MySql using php

I have combined html, php and ajax to insert data in mysql database. And I want to display success or error messages in ajax success function using SweetAlert. The data is getting inserted into the database but I am unable to display the messages. Following is my code:

insert.php

<?php
$connection = mysql_connect("localhost", "root", ""); 
$db = mysql_select_db("hotelmanagement", $connection);

$fName = $_POST['fName'];
$lName = $_POST['lName'];
$address1 = $_POST['address1'];
$address2 = $_POST['address2'];
$phone =  $_POST['phone'];
$email =  $_POST['email'];
$checkInDate =  $_POST['checkInDate'];
$checkOutDate =  $_POST['checkOutDate'];
$adults =  $_POST['adults'];
$children =  $_POST['children'];
$specialInstructions =  $_POST['specialInstructions'];
$query = mysql_query("INSERT INTO reservation(FirstName,LastName,Address1,Address2,Phone,Email,Adults,Children,CheckInDate,CheckOutDate,SpecialInstructions) VALUES('$fName','$lName','$address1','$address2','$phone','$email','$checkInDate','$checkOutDate','$adults','$children','$specialInstructions')");

echo json_encode($query);

mysql_close($connection);

?>

And this is my ajax code:

$("#submit").click(function(){
    var fName = $("#fName").val();
    var lName = $("#lName").val();
    var address1 = $("#address1").val();
    var address2 = $("#address2").val();
    var phone = $("#phone").val();
    var email = $("#email").val();
    var checkInDate = $("#checkinDate").val();
    var checkOutDate = $("#checkoutDate").val();
    var adults = $("#adults").val();
    var children = $("#children").val();
    var specialInstructions = $("#specialInstructions").val();


    if(fName == '' || lName == '' || phone == ''){
        swal("Oops!!", "Looks like you missed some fields. Please check and try again!", "error");
    }else{
        $.ajax({
            type:'post',
            url:'insert.php',
            data: {fName:fName,lName:lName,address1:address1,address2:address2,phone:phone,email:email,checkInDate:checkInDate,checkOutDate:checkOutDate,adults:adults,children:children,specialInstructions:specialInstructions},
            dataType:'json',
            succcess:function(data){
                swal("Success", "Data Saved Successfully", "success");
            },
            error:function(xhr, thrownError, ajaxOptions){

            },
        });
    }
});

Could you please tell me what am I missing. Thank you.

Upvotes: 1

Views: 7269

Answers (1)

jameshwart lopez
jameshwart lopez

Reputation: 3131

your success callback is triple ccc and try to remove dataType:'json',

try this ajax request

$.ajax({
            type:'post',
            url:'insert.php',
            data: {fName:fName,lName:lName,address1:address1,address2:address2,phone:phone,email:email,checkInDate:checkInDate,checkOutDate:checkOutDate,adults:adults,children:children,specialInstructions:specialInstructions},

            success:function(data){
                swal("Success", "Data Saved Successfully", "success");
            },
            error:function(xhr, thrownError, ajaxOptions){

            }
       });

Upvotes: 1

Related Questions