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
– Jerick Gutierrez, Commented May 29, 2018 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
– Phil Cross, Commented May 29, 2018 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 — user9487972
– user9487972, Commented May 29, 2018 at 22:32

Quentin · Accepted Answer · 2018-05-29 22:34:23Z

3

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?.

answered May 29, 2018 at 22:34

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

TCooper Over a year ago

+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 · Accepted Answer · 2018-05-30 22:50:20Z

0

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>

edited May 30, 2018 at 22:50

answered May 29, 2018 at 22:53

TCooper

1,9701 gold badge14 silver badges20 bronze badges

2 Comments

Jerick Gutierrez Over a year ago

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. resume.sofisticadoblends.com

TCooper Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related