CODEWITHSUNDEEP
javascriptphpformspost
Jerick Gutierrez
Jerick Gutierrez

Reputation: 1

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

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

Upvotes: 0

Views: 70

Answers (2)

TCooper
TCooper

Reputation: 1900

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>

Upvotes: 0

Quentin
Quentin

Reputation: 944170

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:

  1. The browser requests the page
  2. The PHP runs ($_POST does not have a name key)
  3. The browser gets the page
  4. You click the submit button
  5. The JavaScript runs, and set the innerHTML (remember that the PHP ran back at step 2)
  6. The form submits causing the browser to navigate to a new page
  7. The PHP runs again
  8. 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?.

Upvotes: 3

Related Questions