CODEWITHSUNDEEP
javascripthtmlhttp-post
Brian Tompsett - 汤莱恩
Brian Tompsett - 汤莱恩

Reputation: 5883

How to append to an HTML form URL from a POST request

I want to take one of the fields of an HTML form and use it to modify the URL for the action. I followed this question, which shows how it's done for a GET request, but I'm having trouble amending the technique for a POST request.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>User location lookup</title>
    </head>

    <body>
        <!-- method: https://stackoverflow.com/questions/11811782/form-value-creates-a-url -->

        <script>
            function process()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form onSubmit="return process();" method="get">
            Username: <input type="text" name="url" id="url"></input>
            <input type="submit" value="go"></input>
        </form>

        <script>
            function process2()
            {
                var url="http://localhost:43/" + document.getElementById("url").value;
                location.href=url;
                return false;
            }
        </script>

        <form method="post"  onSubmit="return process2();">
            Username: <input type="text" name="url" id="url"> </input>
            Location: <input type="text" name="location" id="location"> </input>
            <input type="submit" value="go"></input>
        </form>
    </body>
</html>

The GET request correctly sends:

GET /brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:43
DNT: 1
Connection: Keep-Alive

Whereas for the POST I get:

GET /brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:43
DNT: 1
Connection: Keep-Alive

Which is still a GET, even though the method is POST.

What I would like to generate is:

POST /brian HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-GB
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: localhost:43
Content-Length: 11
DNT: 1
Connection: Keep-Alive

location=SO

Can someone point me in the right direction, with as little JavaScript code as possible?

Upvotes: 3

Views: 4123

Answers (1)

pshoukry
pshoukry

Reputation: 765

Your code isn't submitting the form. It's actually directly calling the URL via GET, i.e.: This method only works with GET.

Please try:

<form id="myformid" method="post">
    Username: <input type="text" name="url" id="url2" onChange="updateAction()"> </input>
    Location: <input type="text" name="location" id="location"> </input>
    <input id="mysubmit" type="submit" value="go"></input>
</form>

<script>
    function updateAction() {
        var url = document.getElementById("url2").value;
        document.getElementById("myformid").setAttribute("action", "http://localhost:43/" + url);
    }
</script>

Upvotes: 7

Related Questions