-1

I have the following code sample index.php & process.php:

Index.php

-----------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!--Short cut  -->
<link rel="shortcut icon" href="../Final_projet/dashboard/images/chat.png">
</head>
<body class="hidden-sn blue-skin">
<!-- Start your project here-->
<!--
    <div style="height: 100vh">
        <div class="flex-center">
            <h1 class="animated fadeIn">Material Design for Bootstrap</h1>
        </div>
    </div>


<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <ul id="slide-out" class="side-nav custom-scrollbar">
    <!-- Logo -->
    <li>
      <div class="logo-wrapper waves-light"> <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png " class="img-fluid flex-center"></a> </div>
    </li>
    <!--/. Logo -->
    <!--Social-->
    <li>
      <ul class="social">
        <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
        <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
        <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
        <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
      </ul>
    </li>
    <!--/Social-->
    <!--Search Form-->
    <li>
      <form class="search-form" role="search">
        <div class="form-group waves-light">
          <input type="text" class="form-control" placeholder="Search">
        </div>
      </form>
    </li>
    <!--/.Search Form-->
    <!-- Side navigation links -->
    <li>
      <ul class="collapsible collapsible-accordion">
        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#" class="waves-effect">Submit listing</a> </li>
              <li><a href="#" class="waves-effect">Registration form</a> </li>
            </ul>
          </div>
        </li>
        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#" class="waves-effect">For bloggers</a> </li>
              <li><a href="#" class="waves-effect">For authors</a> </li>
            </ul>
          </div>
        </li>
        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#" class="waves-effect">Introduction</a> </li>
              <li><a href="#" class="waves-effect">Monthly meetings</a> </li>
            </ul>
          </div>
        </li>
        <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
          <div class="collapsible-body">
            <ul>
              <li><a href="#" class="waves-effect">FAQ</a> </li>
              <li><a href="#" class="waves-effect">Write a message</a> </li>
            </ul>
          </div>
        </li>
      </ul>
    </li>
    <!--/. Side navigation links -->
  </ul>
  <!--/. Sidebar navigation -->
  <!--Navbar-->
  <nav class="navbar navbar-fixed-top scrolling-navbar double-nav">
    <!-- SideNav slide-out button -->
    <div class="pull-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div>
    <!-- Breadcrumb-->
    <div class="breadcrumb-dn">
      <p>Breadcrumb or page title</p>
    </div>
    <ul class="nav navbar-nav pull-right">
      <li class="nav-item "> <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a> </li>
      <li class="nav-item "> <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a> </li>
      <li class="nav-item "> <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a> </li>
      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
        <div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
      </li>
    </ul>
  </nav>
  <!--/.Navbar-->
</header>
<!--/Double navigation-->
<script type="text/javascript">     
// SideNav init
$(".button-collapse").sideNav();      
// SideNav init
$(".button-collapse").sideNav();    
// Custom scrollbar init
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);    
    </script>
<!--Main layout-->
<main>
  <!--/Main layout-->
  <div class="container-fluid">      
<!--Form without header-->
<div class="card">
    <div class="card-block">    
        <!--Header-->
        <div class="text-center">
            <h3><i class="fa fa-pencil"></i> Subscribe:</h3>
            <hr class="mt-2 mb-2">
        </div>    
        <!--Body-->
        <p>We'll write rarely, but only the best content.</p>
        <br>
<form>
        <!--Body-->
        <div class="md-form">                
            <input type="text" id="name" class="form-control">                
        </div>    
        <div class="md-form">                
            <input type="text" id="message" class="form-control">                
        </div>    
        <div class="text-center">
            <button class="btn btn-deep-orange" id="button">Send</button>
        </div>
</form>
    </div>      
</div>
<!--/Form without header-->
<div id="info"></div>
  </div>
</main>
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
               $(document).ready(function(){
                   $("#button").submit(function() {
  return false;
};    
            $("#button").click(function(){
                    e.preventDefault();
                    var name=$("#name").val();
                    var message=$("#message").val();                                
                    $.ajax({
                        type:"post",
                        url:"process.php",
                        data:"name="+name+"&message="+message,
                        success:function(data){
                        $("#info").html(data);
                      }     
                          });
  e.preventDefault();
                    });
               });
       </script>    
</body>
</html>

process.php

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("dbex");

  $name=$_POST["name"];
  $message=$_POST["message"];

  $query=mysql_query("INSERT INTO comment(name,message) values('$name','$message') ");

  if($query){
    echo "Your comment has been sent";
  }
  else{
    echo "Error in sending your comment";
  }
?>

Ajax function in jquery are not working with MDB 4.2.0.document ready section are working and even button click event is also working fine but only ajax fuction are not performed.any alternative of ajax are there ??

shahzeb akram
  • 906
  • 7
  • 24
Zodiac070495
  • 9
  • 5

1 Answers1

0

As I have said in the comments above, on your ajax you have a POST type but your form uses a GET method

this is how your form currently look : <form></form> if you don't specify the method type the default form method is GET you can test that on your browser just do a form without a method when you submit you will see in the url page.php?field=&anotherField=?

one of your comment :

when i press the button then entire page is refresh..

Well that was suppose to happen as you did not prevent the default form action.

e.preventDeafult(); will not prevent you form from refreshing if you did not define your e even if you could check your console you will see that error, that e is undifined.

Ok I talk too much here's how your code should look. 1) Your form

<form method="POST" id ="myForm">
        <!--Body-->
        <div class="md-form">

            <input type="text" id="name" class="form-control">

        </div>

        <div class="md-form">

            <input type="text" id="message" class="form-control">

        </div>

        <div class="text-center">
            <button class="btn btn-deep-orange" id="button">Send</button>
        </div>
</form>

Then thee AJAX

<script type="text/javascript">
              $('document').ready(function(){

                $('#myForm').submit(function(e){
                   e.preventDefault();

                    var FormData = $('#myForm').serialize();

                    $.ajax({
                      type:"post",
                      url:"process.php",
                      data: FormData,
                      success:function(data){
                      $("#info").html(data);


                  }
              });

                });

              });

       </script>

That's it then then on your proccess.php i'm not gonna touch that, but please don't use mysql_* functions they are depreciated. If you are still learning please try to use mysqli_* functions with prepares statements or PDO prepared statements.

The api that you are using is depreciated and no longer supported, it will be a waste if you continue learning that.

Basically this is how your process should look :

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dbex";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

  $name=$_POST["name"];
  $message=$_POST["message"];


   $query = $conn->prepare("INSERT INTO comment(name,message) VALUES (?,?)");
   $query->bind_param("ss",$name,$message);

   if($query->execute()){

    echo "Your comment has been sent";
   }else{

    echo "Error in sending your comment";
   }


?>

For your own good please follow the following threads, very helpful.

  1. Why you should not use mysql_* functions? Answer here
  2. Why should you use prepared statements? Find out here
Community
  • 1
  • 1
Masivuye Cokile
  • 4,754
  • 3
  • 19
  • 34