How to insert data in database through jQuery Ajax in php

Question

Hello stack right now I am facing a problem I am unable to insert data in database through jQuery Ajax I have attached all related files Can anyone go through it I am new in php development.

**task.php**

<html>
<head>
<style type="text/css">

    html, body {
        margin: 5px;
        padding: 5px;
        background: #fff;
    }

    form {
        border: 1px solid #999;
        padding: 0.25em;
        background: #EEE;

    }

    div {
        padding-bottom: 0.25em;
    }

    /* essential */
    label {
        float: left;
        width: 6em;
        text-align: right;
        padding-right: 0.5em;
    }

    input, textarea {
        text-align: left;
        width: 200px;
        height:30px;
    }

    input.submit {
        margin-left: 6.5em;
        width: auto;
    }


    label, input.submit {
        font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
</style>
<script src="jquery-3.3.1.js"></script>
<script src="insert.js"></script>

<script>
</script>
</head>
<body>
<h1>FORM</h1>
<form>
    <div>
        <label>Name:</label>
        <input type="text" name="name" id="Name" />
    </div>
    <div>
        <label>Age:</label>
        <input type="text" name="age" id="age"/>
    </div>
    <div>
        <label>Email Id:</label>
        <input type="text" name="emailId" id="emailId"/>
    </div>
    <div>
        <label>Password:</label>
        <input type="text" name="password" id="pass"/>
    </div>

    <div>
        <input type="submit" id="submit" name="submit" value="Submit" onclick="insertData()" />
    </div>
</form>
</body>
</html>

This is my insert.php file where I have write all query related to insert my data.

**insert.php**

<?php
include("connection.php");

if(isset($_POST['submit']))
{

    $Fname=$_POST["name"];
    $Age=$_POST["age"];
    $EmailId=$_POST["emailId"];
    $Password=$_POST["password"];

    $Insert = "INSERT INTO simpleform (Name, Age, Email_Id, Password) 
               VALUES ('.$Fname.', '.$Age.', '.$EmailId.', '.$Password.')";
    $Query=mysqli_query($con, $Insert);

    print_r($Insert);


    if(!$Query) 
    {
        echo mysqli_error();
    }
    else
    {
        echo "Successfully Inserted <br />";

    }
}

?>

This is my insert.js file where I did all ajax related work.

**insert.js**

  function insertData() {
      debugger;
      var name=$("#Name").val();
      var age=$("#age").val();
      var emailId=$("#emailId").val();
      var pass=$("#pass").val();
      debugger;

      // AJAX code to send data to php file.
      $.ajax({
          type: "POST",
          url: "kamalesh/insert.php",
          data: {name:name,age:age,emailId:emailId,pass:pass},
          dataType: "JSON",
          success: function(data) {

              alert("Data Inserted");

          }
      });
  }

Can you add a clear explanation of your issue? What do you expect to happen, what is happening, are there any errors? This is so unclear as to what you're asking — Can O' Spam, Jun 26 '18 at 16:15
In console my getting proper data but unable to hit my insert.php file — Ginni, Jun 26 '18 at 16:17
You need to have a full and proper explanation in your question, we can't do anything with the limited verbal information that you've provided I'm afraid — Can O' Spam, Jun 26 '18 at 16:17
Have you tried running the query in phpMyAdmin with similar data? — Quinten, Jun 26 '18 at 16:18
Look here; https://stackoverflow.com/questions/11321491/when-to-use-single-quotes-double-quotes-and-back-ticks-in-mysql — Can O' Spam, Jun 26 '18 at 16:20
Without using ajax I am able to insert but when I am using jQuery Ajax unable to insert data and no error found. — Ginni, Jun 26 '18 at 16:28

Kevin · Answer 1 · 2018-06-26T16:38:42.173

It looks like In your insert.php the if(isset($_POST['submit'])) is preventing the script from running when your insert.js function passes parameters to insert.php. When AJAX passes parameters to insert.php, the isset($_POST['submit']) will return false.

You will need to remove the if(isset($_POST['submit'])) from nsert.php. I will also suggest you to prevent the form from submitting and refreshing your page. Look into e.preventDefault.

Also for your $insert query you should remove the "." before and after each variable in the "VALUES". They are not needed.

How to insert data in database through jQuery Ajax in php

1 Answers1