Ajax Jquery Not Works On Html Form Data Insert To The Server

Question

I am working hard on this topics and search many tutorial on Google as well as on stackoverflow too. Now I am trying to save html form data to the server by Ajax jQuery as below.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Mcss.css">
<link rel="stylesheet" href="menu.css">
</head>
<body style="margin:0; padding:0;">
 <div class="main">

   <div class="dd"></div>
    <center>
      <img class="image" src="HLogo.png"/>
    </center>
   <div class="dd1"></div>
    <div class="dd2">
     <center>
       <p class="tt"><b>Harshal Trading Co.</b></p>
     </center>
   </div>

   <div id="container">
     <ul id="menu">
      <li><a href="index.html">Home</a></li>
      <li><a href="product.html">Products</a></li>
      <li><a href="contact.html">Contact Us</a></li>
      <li><a href="#">Order Now</a></li>
      <li><a href="#">Online Payment</a></li>
    </ul>
  </div>


   <div style="width:100%; height:500px;background:#DCDCDC">

    <p style="margin-top:10px;font-size:30px;position:absolute;margin-left:2%;"><b>Place your 
     order here</b></p>

   <form id="myform" action="" method="post">
    <table style="width:100%; margin-top:60px; margin-left:2%;position:absolute">
        <tr >
            <td style="margin:0;padding:0;width:1%;"><label for="name">Order Ref:</label></td>
            <td style="width:80%;"><label for="name" id="dtime">Order Ref:</label><br><br</td>
        </tr>
        <tr >
            <td style="margin:0;padding:0;width:1%;"><label for="name">Name:</label></td>
            <td style="width:80%;"><input type="text" id="fname" name="fname" 
                       style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="mobile">Mobile:</label></td>
            <td><input type="text" id="mob" name="mob" style="height:35px;width:30%;padding- 
                 left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="eml">Email:</label></td>
            <td><input type="text" id="email" name="email" 
                 style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="sb">Subject:</label></td>
            <td>    <input type="text" id="subj" name="subj" 
                     style="height:35px;width:30%;padding-left:5px;"><br><br></td>
        </tr>
        <tr>
            <td><label for="dtt">Details:</label></td>
            <td><textarea name="det" cols="40" rows="5" id="det"  style="padding- 
                left:5px;padding-top:5px;"></textarea><br><br></td>
        </tr>
        <tr></tr><tr></tr><tr><td>
        </td><td>
         <input type="submit" class="button" name="insert" value="insert" style="width:100px; 
             height:40px"/></td></tr>
    </table>
    
  </form>


   </div>

   </div>


   <div style="width:100%; height:300px;background-color:#DCDCDC;position:absolute;margin- 
    top:10px;text-align:center">
     
   <p style="font-family: 'Trebuchet MS', sans-serif;
      font-size:30px;
      margin:0;
      padding:0;
      margin-top:20px;color:red"><b><u>We Are Also Available On Following Link</u></b></p>   
      
          
              <div class="dol">
                  <a href="https://www.facebook.com/profile.php?id=100087646165162">
                    <img src="logo/fb.webp" style="width:80px;height:80px;float:left;"/>
                      
                  </a>
                  
              </div >
         
              <div class="dol">
                  <a href="https://twitter.com/harshaltrading">
                       <img src="logo/tol/ng/tw.png" 
 style="width:80px;height:80px;float:left;"/>
               
                  </a>
              
              </div>   
          
              <div class="dol">
                  <img src="logo/tol/ng/insta.png"style="width:80px;height:80px;float:left;"/>
       
              </div>
              
              <div class="dol">
                  <a href="https://www.youtube.com/">
                      <img src="logo/tol/yt.png" style="width:80px;height:80px;float:left;"/>
            
                  </a>
                 
              </div>
              
              
              
              <p style="font-family: 'Trebuchet MS', sans-serif;
                        font-size:20px;
                        margin:0;
                        padding:0;
                        margin-top:15px;"><a href="#"><b>Privacy Policy</b></a></p>




              <p style="font-family: 'Trebuchet MS', sans-serif;
                        font-size:20px;
                        margin:0;
                        padding:0;
                        margin-top:15px;"><a href="#"><b>Terms & Condition</b></a></p>


     </div>


    <script >

       var dateDiv = document.getElementById('dtime');

        Object.defineProperty(Date.prototype, 'YYYYMMDDHHMMSS', {
        value: function() {
         function pad2(n) {  // always returns a string
        return (n < 10 ? '0' : '') + n;
    }

    return this.getFullYear() +
           pad2(this.getMonth() + 1) + 
           pad2(this.getDate()) +
           pad2(this.getHours()) +
           pad2(this.getMinutes()) +
           pad2(this.getSeconds());
    }
   });

    dateDiv.innerHTML = new Date().YYYYMMDDHHMMSS();

   </script>

  <script language="JavaScript" type="text/javascript" src="jquery-3.6.1.min.js"></script>
   <script>

     $(document).on('click', '.button', function(){
      var dtime = $("#dtime").val();
      var fname = $("#fname").val();
      var mob =   $("#mob").val();
      var email = $("#email").val();
      var subj =  $("#subj").val();
      var det =   $("#det").val();

  jQuery.ajax({
  type: "POST",
  url: "http://harshaltrading.com/DBInsert/topinsert.php",
  dataType: 'json',
  data: {dtime: dtime, fname: fname, mob: mob, email: email, subj: subj, det: det},
    success: function(res) {
      if (res)
      {
        alert('Hurray! Successfully done');
      }
    },
    error: function(xhr) {
      if (xhr)
      {
        alert('There was an error');
       }
    }
  });
 });



  </script>

 </body>
 </html>

and php file

  include 'DatabaseConfig.php' ;

  $con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);

  if(!$con) {
   echo 'Not connected to server!';
  }

  $dtime = $_POST['dtime'];
  $fname = $_POST['fname'];
  $mob = $_POST['mob'];
  $email = $_POST['email'];
  $subj = $_POST['subj'];
  $det = $_POST['det'];


  $Sql_Query = "insert into myorder (oid,name,mobile,email,sub,odet) values 
  ('$dtime','$fname','$mob','$email','$subj','$det')";

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

  echo 'Thanks';
 }
 else{
  echo 'Try Again'; }
  mysqli_close($con);    
 ?>

I have tried hard on this code to insert data on server but fail. No data inserted. I have press F12 to debug but no issue found on Consol. Where is I am wrong on above code please tell me.

Did you check your browser's devconsole/Network tab to debug the request? Is it ok? What's the response? — brombeer, Nov 28 '22 at 09:30
You need to add `return false` to your `.button` click handler. The usual cause of what you've described is that there's a **submit button** that is *submitting* the form. In your case it's ` — freedomn-m, Nov 28 '22 at 09:30
You could also change your `input type=submit` to `` so that it doesn't submit the form. — freedomn-m, Nov 28 '22 at 09:31
@freedomn-m Yes, You are right and I have change input tag to button as per your suggestion and now its showing server error message. Thanks — user2741987, Nov 28 '22 at 09:37
@freedomn-m, as per JQuery : error: function(xhr) { if (xhr) { alert('There was an error'); } } }); — user2741987, Nov 28 '22 at 09:46
@freedomn-m " there is error in response not received Like :There was an error" so my question is where is the error in Server Or Code?. — user2741987, Nov 28 '22 at 09:47

Ajax Jquery Not Works On Html Form Data Insert To The Server

0 Answers0