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
– codtex, Commented May 22, 2017 at 5:52
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
– Ahs N, Commented May 22, 2017 at 5:53
Why are you prefering JS to call your php? Just add action attribute to the form tag — Vishnu
– Vishnu, Commented May 22, 2017 at 5:54

DonCarleone · Accepted Answer · 2020-07-29 07:28:31Z

3

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>

edited Jul 29, 2020 at 7:28

DonCarleone

91915 silver badges26 bronze badges

answered May 22, 2017 at 6:00

Nawin

1,6922 gold badges14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JohnnyD Over a year ago

what's the point? If you already have the form ready why not simply use document.getElementById("myForm").submit(); ?

Nawin Over a year ago

@JohnnyD question is asked without the form ID, so I gave on click action

Zaid Bin Khalid · Accepted Answer · 2017-05-22 05:57:36Z

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 · Accepted Answer · 2017-05-22 06:07:06Z

2

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>

edited May 22, 2017 at 6:07

answered May 22, 2017 at 6:01

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

1 Comment

bcag2 Over a year ago

Yes, no JQuery !-)

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related