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."; } ?>

Answer 1

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

Answer 2

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>

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

Question

2 answers

solution1
3 2018-05-29 22:34:23

solution2
0 2018-05-29 22:53:46

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

Question

2 answers

solution1 3 2018-05-29 22:34:23

solution2 0 2018-05-29 22:53:46

solution1
3 2018-05-29 22:34:23

solution2
0 2018-05-29 22:53:46