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

there are plenty of tutorials on this topic, did you first try to searching your question in google or other search engine? — codtex, May 22 '17 at 05:52
http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php — Ranjeet Singh, May 22 '17 at 05:53
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. — Ahs N, May 22 '17 at 05:53
Why are you prefering JS to call your php? Just add action attribute to the form tag — Vishnu, May 22 '17 at 05:54
Add an action to the form tag so it knows what page to send to. If you want to prevent form submission if javascript is disabled, then turn the submit button into a plain button, and submit with javascript only. — Gary Hayes, May 22 '17 at 06:02

score 3 · Accepted Answer · edited Jul 29 '20 at 07:28

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>

what's the point? If you already have the form ready why not simply use `document.getElementById("myForm").submit();` ? — JohnnyD, Sep 07 '22 at 10:46
@JohnnyD question is asked without the form ID, so I gave on click action — Nawin, Feb 16 '23 at 12:02

score 2 · Answer 2 · answered May 22 '17 at 05:57

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

Ataur Rahman Munna · Answer 3 · 2017-05-22T06:07:06.787

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>

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

3 Answers3

Linked