storing form data using ajax request

Question

I'm trying to store my form data using ajax but it gives me error. I'm submitting form data in js file which calls another php file to perform insert operation. here is my code:

  <button id="submit" class="btn btn-primary" type="submit" onclick="myFunction()" >Create an Account</button>

clicking on that button it calls the js file serve.js

 function myFunction(){


           var name = document.getElementById("firstName").value;
            var lname = document.getElementById("lastName").value;
            var mail = document.getElementById("email").value;
            var password =document.getElementById("password").value;

            var confpass= document.getElementById("passwordConfirmation").value;

                   // var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
            if(password != confpass)
            {
                alert ('password doesnot match!');
            }

            // var form_data = $('#edit_user').serialize();
         var datastring= 'name1=' + name + 'name2=' + lname +'email='+mail+ 'pass='+password;

           $.ajax({
        url: "learnapi.php",
        type: "get",
        dataType: "json",
        data: {type: "signup", datastring:datastring },
        //type: should be same in server code, otherwise code will not run
        ContentType: "application/json",
        success: function (response) {
            alert(JSON.stringify(response));
        },
        error: function (err) {
            alert(JSON.stringify(err));
        }
    });
};

Through ajax request it perform insert operation learnapi.php

<?php
 header('Access-Control-Allow-Origin: *');
mysql_connect("localhost","root","");
mysql_select_db("learnapp");
if(isset($_GET['type']))
{
   $res = [];


  if($_GET['type'] =="signup"){
    $name  = $_GET ['name1'];
    $lname = $_GET['name2'];

    $passW = $_GET['pass'];
  //  $passW1 = $_GET['Pass1'];
    $mail  = $_GET ['email'];



    $query1  = "insert into signup(firstname,lastname,password,email) values('$name','$lname','$passW','$mail')";
    $result1 = mysql_query($query1);

    if($result1)
    {
        $res["flag"] = true;
        $rest["message"] = "Data Inserted Successfully";
    }
    else
    {
        $res["flag"] = false;
        $rest["message"] = "Oppes Errors";
    }
    } 


else{
$res["flag"] = false;
$rest["message"] = "Invalid format";
    }

 echo json_encode($rest);
}  
?>

It gives me error as:

Answer 1

Remove the onclick attribute and use a event listener

$('#submit').on('click',myFunction(event));

Change data to

 data: JSON.stringify({type: "signup",name1:name ,name2:lname,email:mail,pass:password});

prevent the submit add this to you function

event.preventDefault();

add this to you php page

header('Content-Type: application/json');

change the syntax try using mysqli or pdo, the current syntax isn't used any more

Answer 2

your passing of parameters is wrong. replace your ajax data with the following and remove your "var datastring".

data: {type: "signup", name1: name,name2:lname,email:mail,pass:password },

Answer 3

instead of json data use post data in ajax method

$.ajax({
    url: "learnapi.php",
    type: "get",
    dataType: "json",
    data: {type: "signup", datastring:datastring },
    //type: should be same in server code, otherwise code will not run
    ContentType: "application/json",
    success: function (response) {
        alert(JSON.stringify(response));
    },
    error: function (err) {
        alert(JSON.stringify(err));
    }
});

Use post method just giving you idea

<script type="text/javascript">
    function xxx(x1,x2)
    {
        $.post(
            "yy.php", // target post file
            {data: data, display: display,user: user,password: password}, 
    .......
  </script>

In learnapi.php Use $_POST method instead of $_GET method