Brian Tompsett - 汤莱恩 Brian Tompsett - 汤莱恩 - 5 months ago 14
Javascript Question

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

I want to take one of fields of an HTML form and use it to modify the URL for the action. I followed this question, which shows how its 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: http://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 as possible?

Answer

What your code is doing isn't submitting the form it's actually directly calling the url via get, ie: 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>
Comments