CODEWITHSUNDEEP
javascripthtml
DonX
DonX

Reputation: 16367

How to read the post request parameters using JavaScript

I am trying to read the post request parameters from my HTML. I can read the get request parameters using the following code in JavaScript.

$wnd.location.search

But it does not work for post request. Can anyone tell me how to read the post request parameter values in my HTML using JavaScript?

Upvotes: 124

Views: 331341

Answers (19)

Grigory Kislin
Grigory Kislin

Reputation: 17990

I do request to another site to fill form, so at last do it with GET:

<form method="get" action="https://othersite.pro/form">
  <p>Name: <input name="Name" value="Name"></p>
  <p>Email: <input name="Email" value="[email protected]"></p>
  <p>Phone: <input name="Phone" value="8888"></p>
  <p>Promo: <input name="Promo" value="JavaOPs"></p>
  <input type="submit" value="Send">
</form>

and place script on other side page (under the same form):

<script>
  const url = new URL(document.location.toString());
  ['Name', 'Email', 'Phone','Promo'].forEach((key) => {
    const val = url.searchParams.get(key);
    if (val) {
        document.getElementsByName(key)[0].value = val;
    }
  })
</script>

Upvotes: 0

Roger
Roger

Reputation: 375

A little piece of PHP to get the server to populate a JavaScript variable is quick and easy:

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

Then just access the JavaScript variable in the normal way.

Note there is no guarantee any given data or kind of data will be posted unless you check - all input fields are suggestions, not guarantees.

Upvotes: 31

Louis Herv&#233;
Louis Herv&#233;

Reputation: 53

I have a simple code to make it:

In your index.php :

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

In your main.js :

let my_first_post_param = $("#first_post_data").val();

So when you will include main.js in index.php (<script type="text/javascript" src="./main.js"></script>) you could get the value of your hidden input which contains your post data.

Upvotes: 2

electrikmilk
electrikmilk

Reputation: 1043

<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  }
  echo "<script>\n$vars</script>\n";
}
?>
</script>

Or use it to put them in an dictionary that a function could retrieve:

<script>
<?php
if($_POST) {
  $vars = array();
  foreach($_POST as $field => $value) {
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  }
  echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>

Then in JavaScript:

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) {
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;
}

This is just an example and shouldn't be used for any sensitive data like a password, etc. The POST method exists for a reason; to send data securely to the backend, so that would defeat the purpose.

But if you just need a bunch of non-sensitive form data to go to your next page without /page?blah=value&bleh=value&blahbleh=value in your url, this would make for a cleaner url and your JavaScript can immediately interact with your POST data.

Upvotes: 1

Ian Mbae
Ian Mbae

Reputation: 146

Why not use localStorage or any other way to set the value that you would like to pass?

That way you have access to it from anywhere!

By anywhere I mean within the given domain/context

Upvotes: 6

William R.
William R.

Reputation: 165

It depends of what you define as JavaScript. Nowdays we actually have JS at server side programs such as NodeJS. It is exacly the same JavaScript that you code in your browser, exept as a server language. So you can do something like this: (Code by Casey Chu: https://stackoverflow.com/a/4310087/5698805)

var qs = require('querystring');

function (request, response) {
    if (request.method == 'POST') {
        var body = '';

        request.on('data', function (data) {
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            // use post['blah'], etc.
        });
    }
}

And therefrom use post['key'] = newVal; etc...

Upvotes: 1

Alexandre Parpinelli
Alexandre Parpinelli

Reputation: 146

Use sessionStorage!

$(function(){
    $('form').submit{
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    }
});

At another-page.html:

var formData = document.sessionStorage["form-data"];

Reference link - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Upvotes: 13

user3260912
user3260912

Reputation: 641

If you're working with a Java / REST API, a workaround is easy. In the JSP page you can do the following:

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>

Upvotes: 3

Platinum Azure
Platinum Azure

Reputation: 46183

JavaScript is a client-side scripting language, which means all of the code is executed on the web user's machine. The POST variables, on the other hand, go to the server and reside there. Browsers do not provide those variables to the JavaScript environment, nor should any developer expect them to magically be there.

Since the browser disallows JavaScript from accessing POST data, it's pretty much impossible to read the POST variables without an outside actor like PHP echoing the POST values into a script variable or an extension/addon that captures the POST values in transit. The GET variables are available via a workaround because they're in the URL which can be parsed by the client machine.

Upvotes: 16

Danny Beckett
Danny Beckett

Reputation: 20848

One option is to set a cookie in PHP.

For example: a cookie named invalid with the value of $invalid expiring in 1 day:

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

Then read it back out in JS (using the JS Cookie plugin):

var invalid = Cookies.get('invalid');

if(invalid !== undefined) {
    Cookies.remove('invalid');
}

You can now access the value from the invalid variable in JavaScript.

Upvotes: 0

le cuong
le cuong

Reputation: 11

function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");

Upvotes: 0

TV-C-1-5
TV-C-1-5

Reputation: 714

You can 'json_encode' to first encode your post variables via PHP. Then create a JS object (array) from the JSON encoded post variables. Then use a JavaScript loop to manipulate those variables... Like - in this example below - to populate an HTML form form:

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr){// Loop post variables array

        if(document.getElementById(key)){// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        }
    }


</script>

Upvotes: 0

praveen
praveen

Reputation: 71

We can collect the form params submitted using POST with using serialize concept.

Try this: 

$('form').serialize();

Just enclose it alert, it displays all the parameters including hidden.

Upvotes: -3

MikeMiller
MikeMiller

Reputation: 1

<head><script>var xxx = ${params.xxx}</script></head>

Using EL expression ${param.xxx} in <head> to get params from a post method, and make sure the js file is included after <head> so that you can handle a param like 'xxx' directly in your js file.

Upvotes: -4

Bunny Rabbit
Bunny Rabbit

Reputation: 8411

$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

In jQuery, the above code would give you the URL string with POST parameters in the URL. It's not impossible to extract the POST parameters.

To use jQuery, you need to include the jQuery library. Use the following for that:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Upvotes: -3

ssut
ssut

Reputation: 441

You can read the post request parameter with jQuery-PostCapture(@ssut/jQuery-PostCapture).

PostCapture plugin is consisted of some tricks.

When you are click the submit button, the onsubmit event will be dispatched.

At the time, PostCapture will be serialize form data and save to html5 localStorage(if available) or cookie storage.

Upvotes: 2

Chris Denman
Chris Denman

Reputation: 1207

POST variables are only available to the browser if that same browser sent them in the first place. If another website form submits via POST to another URL, the browser will not see the POST data come in.

SITE A: has a form submit to an external URL (site B) using POST SITE B: will receive the visitor but with only GET variables

Upvotes: -1

kiranvj
kiranvj

Reputation: 34107

POST is what browser sends from client(your broswer) to the web server. Post data is send to server via http headers, and it is available only at the server end or in between the path (example: a proxy server) from client (your browser) to web-server. So it cannot be handled from client side scripts like JavaScript. You need to handle it via server side scripts like CGI, PHP, Java etc. If you still need to write in JavaScript you need to have a web-server which understands and executes JavaScript in your server like Node.js

Upvotes: 1

rahul
rahul

Reputation: 187030

POST data is data that is handled server side. And Javascript is on client side. So there is no way you can read a post data using JavaScript.

Upvotes: 240

Related Questions