In javascript how to send data to php file using post method

Question

In javascript i want to know how to send data to php file using post method. I have tried diffewrent method. But i didn't get any output so please help me. My code is shown below.

index.php

<form method="post" name="form" enctype="multipart/form-data">
    <input type="text" name="name" id="name" placeholder="Name" required/>
    <input type="email" name="email" id="email" placeholder="Email" required/>
    <input type="password" name="pass" id="pass" placeholder="Password" required/>
    <input type="submit" name="submit" value="Send" onclick="myFunction()"/>
</form>

<script>
    function myFunction() {
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
        ////  I want post the values to profile.php
    }
</script>

profile.php

if (isset($_POST['submit'])) {
    $name = $_POST['name']; 
}

Answer 1

Do something like this and pass your values like this and you can check in your profile.php page....Here you cannot check if(isset($_POST['submit'])), but you you can check if(isset($_POST['name']))

    <form method="post" name="form" enctype="multipart/form-data">
    <input type="text" name="name" id="name" placeholder="Name" required/>
    <input type="email" name="email" id="email" placeholder="Email" required/>
    <input type="password" name="pass" id="pass" placeholder="Password" required/>
    <input type="submit" name="submit" value="Send" onclick="myFunction()"/>
    </form>
    
  <script>
    function myFunction() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    $.ajax({
            type : "POST",  //type of method
            url  : "profile.php",  //your page
            data : { name : name, email : email, password : password },// passing the values
            success: function(res){  
                                    //do what you want here...
                    }
        });
    }
    </script>

Answer 2

Do some thing like this. Send ajax request on profile.php file.

ON profile.php file print_r($_REQUEST) you will get all your form indexes.

$(document).ready(function() {
  $("form").on("submit", function(event) {
    $.ajax({
      type: 'POST',
      url: 'profile.php',
      data: $( this ).serialize(),
      success: function(data) {
        //success code
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="form" enctype="multipart/form-data" onSubmit="return false;">
  <input type="text" name="name" id="name" placeholder="Name" required/>
  <input type="email" name="email" id="email" placeholder="Email" required/>
  <input type="password" name="pass" id="pass" placeholder="Password" required/>
  <input type="submit" name="submit" value="Send" />
</form>

profile.php

print_r($_REQUEST);