PHP: Using $_POST to display form values

Question

I have a basic HTML form with one input text field, along with a submit button. Now, I want to use JavaScript to display the content entered by the user in the text field after form submission.

Here's the code of my form:

<form method = "POST">
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit" onclick = "postResul()" />
</form>

On clicking the submit button, the postResul() function is called:

<script>

function postResul()
{
    var htmlString="<?php echo $_POST['tweet1']; ?>";
    alert(htmlString);
}

</script>

Now, both these code snippets are stored inside a PHP file. However, on submitting the form, the data entered in the input form field doesn't get displayed. I'm displaying the $_POST['tweet1'] variable in order to display the entry submitted by the user.

What seems to be wrong here? Am I using the $_POST variable in PHP the wrong way?

Answer 1

If you want to display the input's value BEFORE sending it to your server:

document.querySelector("form").addEventListener("submit", function()
{
    var value = this.querySelector("input[name='tweet1']").value;
    alert(value);
    return false; //disable sending the data to the server
}, false);

    <form id="myForm" method="post" action="index.php">
       <input type="text" name="tweet1" />
       <br>
       <input type="submit" />
    </form>

If you want to display the input's value AFTER sending it to your server:

<form method="post" action="index.php">
   <input type="text" name="tweet1" />
   <br>
   <input type="submit" />
</form>

<?php echo htmlspecialchars($_POST["tweet1"]); ?>

These are different things. You can use $_POST only after you've sent some datas to the server. When you open yoursite.com/index.php in your browser, you make a HTTP GET request. In this case, $_POST will be an empty array, since it's a GET request, no data is sent to the server. When you submit the form, you make a HTTP POST request. Your PHP can access only that data you sent to the server. With Javascript, you work on the visitor's computer, not on the server. The only one way to send the data to the server without refresing the page, if you use AJAX, and make a new HTTP POST request, that'll run in the "background". But you do not need this if you just want to display the input's value, and you don't want to save it on your server. That can be done with Javascript, and without PHP.

The code you posted above would work like this:

1. You make a HTTP GET request to yoursite.com/index.php.
2. No data is sent to the server, $_POST will be empty.
3. var htmlString="<?php echo $_POST['tweet1']; ?>"; In this line, you try to echo an non-existing member of $_POST, you might see an error if display_errors is not disabled.
4. You click on the submit button.

5. It has an onclick attribute, postResul (a Javascript function) is called. If you open the page's shource, you'll see this:

   function postResul()
   {
       var htmlString="";
       alert(htmlString);
   }
   

6. After an empty popup is shown, and you press OK, the browser send the data to your server, and you'll able to acess the input's value via $_POST.

7. If you press the submit button again, you'll see submited value (and not the input's actual value), because if you open the source code, you'll see this:

   function postResul()
   {
       var htmlString="entered data";
       alert(htmlString);
   }
   

But that isn't want you want, so see the examples above depending on what you want (save the data, or just display it in the browser).

Answer 2

This should work:

function postResul()
{
    var htmlString=document.getElementsByName("tweet1")[0].value;
    alert(htmlString);
}

But you should really read more on how client-side and server-side languages work.

Answer 3

You cannot use $_POST['tweet1'] to get the value when you are invoking a Javascript function. Basically client side and server side are totally different.

You can obtain the result using Javascript as:

function postResul()
{
    var htmlString= document.getElementsByName("tweet1")[0].value;
    alert(htmlString);
}

In HTML:

<form method = "POST">
   <input type = "text" name = "tweet1"/>
   <br>
   <input type = "submit" onclick = "postResul()" />

</form>

Note: The above function runs in client side and not in server side.

$_POST can be used to get values of the submitted form in a php page.

Cheers.

Answer 4

You have to make another file. Change your code to:

<form method="POST" action="another.php" >
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit"  />
</form>

In file another.php you can show the variable then:

<?php echo htmlspecialchars($_POST['tweet1'], ENT_QUOTES, 'UTF-8'); ?>

Answer 5

You should use the form in a different way

<form method="POST">
   <input type = "text" name = "tweet1" />
   <br>
   <input type = "submit" />
</form>

test.php file

<?php
return json_encode([1, 2, 3]);

js

$('form').on('submit', function() {
   $.post('test.php', {}).done(function(response) {
      alert(response);
   })
})

Something like this. Hope it's useful.

Answer 6

if you are using jquery library you can do this

<form method="POST">
   <input type = "text" name = "tweet1" class="tweet" />
   <br>
   <input type = "submit" class="submit" />
</form>

$('.submit').click(function(e){
    alert($('.tweet').val());
    e.preventDefault();
});

jsfiddel working example http://jsfiddle.net/mdamia/j3w4af2w/2/