Php $_POST returns empty when using javascript to call php function

Question

I am still studying php and java script. I am creating a simple contact form and set the form action to the same page using $_Server[php_self]

What I want to do is when someone submit to my form, it will show a message including the name that was submitted on the same page. replace the contact form with the message.

I also tried pointing action to a different php page. and it still did not work. Does Javascript work like that? or I have to use different code or language to do that.

Here is my code

<!DOCTYPE html>
<html>
<head>
    <?php 
    include 'action.php';
?>
    <title> My profle</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="contact">
   <form class="form" class="contact" id="contact-form" action="action.php" method="POST">
            Name: <br>
           <input type="text" class="field" name="name"><br>
           Number:<br>
           <input type="text" class="field" name="number"><br>
           Email:<br>
           <input type="email" class="field" name="email:>"<br>
           <br>
           <input type="submit" class="submit" name="submit" value="submit"
           onclick ="document.getElementById('contact-form').innerHTML='<?php thankyou();?>'">
       </form>
</div>
</body>
</html>

Then here is the action.php

<?php
    function thankyou(){
        $name = $_POST['name'];
        echo "Thank you"." $name ! Your message has been submitted.";
    }
?>

P.S. the javascript returns the thankyou() function successful but the $name is missing/ — Jerick Gutierrez, May 29 '18 at 22:30
You can mix js/php that way. The problem is, $_POST hasn't been set before the form is submitted. The second time you submit the form, the name should be displayed. — Phil Cross, May 29 '18 at 22:32
this wont work as want, you will have to use js to get the name for the thank you message, then submit the form to be processed in php — , May 29 '18 at 22:32

score 3 · Answer 1 · answered May 29 '18 at 22:34

You have a couple of different problems here.

The first is a lack of understanding about the timing of when PHP and JS run.

The second is that DOM changes are lost when a new page is loaded.

This is what is happening:

The browser requests the page
The PHP runs ($_POST does not have a name key)
The browser gets the page
You click the submit button
The JavaScript runs, and set the innerHTML (remember that the PHP ran back at step 2)
The form submits causing the browser to navigate to a new page
The PHP runs again
The browser gets the new page … and the DOM changes make to the previous page are lost

Further reading: What is the difference between client-side and server-side programming?.

+1 for answering in an informative way that still leads to some research instead of copy and paste code. Trying to make my answers more like this... — TCooper, May 29 '18 at 22:37

TCooper · Answer 2 · 2018-05-30T22:50:20.490

I'm open to hearing better ways to do this in the comments, as this is off the top of my head and I know there are better solutions... but here's what I would do in your situation:

<!DOCTYPE html>
<html>
<head>
    <title> My profle</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="contact">
   <form class="form" class="contact" id="contact-form" action="" method="POST">
           <?php 
               if(isset($_POST)){
                   //process data however (I'm assuming) you need to - even if just posting to another script at this point...
                   echo 'Thank you '.$_POST['name'].' ! Your message has been submitted';
               }
               else{
                    echo 'Name: <br>
                    <input type="text" class="field" name="name"><br>
                    Number:<br>
                    <input type="text" class="field" name="number"><br>
                    Email:<br>
                    <input type="email" class="field" name="email"><br>
                    <br>
                    <input type="submit" class="submit" name="submit" value="submit">';
               }
           ?>
       </form>
</div>
</body>
</html>

Thank you, I still need to study more, I'll take a look how to combine and time them correctly. anyway, This is the demo I've been working on. http://resume.sofisticadoblends.com/ — Jerick Gutierrez, May 29 '18 at 23:58
np, thought it might help to see some code that takes the language processing order into account correctly - although I was hoping for some more community input - I know using php and html together has a lot of best practices and some people disagree on what is actually best practice. — TCooper, May 30 '18 at 22:49

Php $_POST returns empty when using javascript to call php function

2 Answers2