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']; 
}

• Ashwin: use ajax call post method to your php file!
• codtex: there are plenty of tutorials on this topic, did you first try to searching your question in google or other search engine?
• Ranjeet Singh: stackoverflow.com/questions/5004233/…
• Ahs N: You forgot the action parameter in your form. Also, either have the onClick function attached to submit return true, or remove it completely. In your case its better to remove the onclick event and the JS codes, it should automatically allow the POST to your PHP page.
• Vishnu: Why are you prefering JS to call your php? Just add action attribute to the form tag

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>

• JohnnyD: what's the point? If you already have the form ready why not simply use document.getElementById("myForm").submit(); ?
• Nawin: @JohnnyD question is asked without the form ID, so I gave on click action

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);

Answer 3

First I need to say that, you can post your data by ajax (without page reloading) or by direct post (reload your page).As your question doesn't tag jquery, so i'm leaving ajax. Here is the example for post a form data, I mean reload the current page and post the form data in profile.php Hence your enctype will be enctype="multipart/mixed" instead of enctype="multipart/form-data" because you didn't want to send any file input in your form.

<form method="post" action="profile.php" name="form" id="your_form_id" enctype="multipart/mixed">
<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="button" name="btnsubmit" value="Send" onclick="myFunction()"/>
</form>
<script>
function myFunction() {
//you didn't need to get the data by `document.getElementById()`. just submit your form
//var name = document.getElementById("name").value;
//var email = document.getElementById("email").value;
//var password = document.getElementById("password").value;
 document.getElementById('your_form_id').submit();
}
</script>

• bcag2: Yes, no JQuery !-)