how to read form data using javascript?

Question

This is the form data.

<div>
    <form name="payform" action="pay.html" method="POST">
        <div>
            <input id="customerName" name="firstname" ng-model="customerName" style="display:none"/>
            <input style="display:none" id="txnid" name="txnid" ng-model="transactionid" />
            <input type="submit" name="paybutton" id="payit" />
        </div>
    </form>
</div>

When i submit data the contents are posted to pay.html. How can I read those data using javascript on pay.html page?

Mihai Alexandru-Ionut · Answer 1 · 2017-09-20T07:17:52.457

1

The action attribute specifies where to send the form-data when a form is submitted and usually it's a server side method.

But,

If you don't use server-side programming, such as PHP or C#, or Java, you could use the query string, in order to GET search parameters.

For this, you have to use window.location.search property in order to get the search params.

var url_string = "http://www.example.com/t.html?a=1&b=3&c=4";
var url = new URL(url_string);
var c = url.search;
console.log(c);

get is not secure right? i cannot use method get. only allowed method is post.

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

You can use localStorage in order to access data from anywhere.

edited Sep 20 '17 at 07:17

answered Sep 20 '17 at 06:52

Mihai Alexandru-Ionut

47,092
13
101
128

can u tell more specifically? – ajithes1 Sep 20 '17 at 06:55
get is not secure right? i cannot use method get. only allowed method is post. – ajithes1 Sep 20 '17 at 07:03
@ajithes111, have a look now. – Mihai Alexandru-Ionut Sep 20 '17 at 07:19

score 1 · Answer 2 · answered Sep 20 '17 at 07:11

Actually, you are sending data of the FORM through POST. If you are sending data through POST method, then you need a 'Server' which processes the data received from the HTML page and then forward the same data as response to the requested HTML Page.

If you change the Form data to GET, then you can read the data by using JavaScript.
If you still want to use POST, you can use Cookies to store and retrieve data on another page. Here are the steps!

Hope this helps.

score 0 · Answer 3 · answered Sep 20 '17 at 06:55

You can send form data in URL, just set the form submission's method as "GET".

Then the url will be "localhost:XXXX/pay.html?firstname='himanshu'&txnid='1'".

Now at pay.html, you can read this URL from javascript methods and parse this url to get all the parameters. Use window.location.search

score 0 · Answer 4 · answered Sep 20 '17 at 06:58

0

You can use location.search

var params = {};

if (location.search) {
    var temp = location.search.substring(1).split('&');
    for (var i = 0; i < temp.length; i++) {
        var dt = temp[i].split('=');
        if (!dt[0]) continue;
        params[dt[0]] = dt[1] || true;
    }
}

console.log(params.abc);
console.log(params.xyz);

answered Sep 20 '17 at 06:58

mrJ0ul3

126
7

post is the preferred method. – ajithes1 Sep 20 '17 at 07:04
ah yes, then he need to change to GET on the method, due he is not using any server side programming. – mrJ0ul3 Sep 20 '17 at 07:21

how to read form data using javascript?

4 Answers4