2016-06-22 11 views
0

HTMLフォームのフィールドの1つを使用して、アクションのURLを変更します。私はthis questionに続きました。これはGETリクエストでどのように処理されたかを示していますが、POSTリクエストのテクニックを修正するのに問題があります。POSTリクエストからHTMLフォームURLに追加する方法

<!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> 

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 

POSTのために私が得るのに対し:

方法が POSTであっても、まだ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 

私は何を生成したいです:

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 

誰かができるだけ少ないJavaScriptコードで、正しい方向に私を指すことができますか?

答えて

3

あなたのコードはフォームを送信していません。実際にはGETで直接URLを呼び出しています。つまり、このメソッドはGETでのみ動作します。

てみてください:

<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> 
関連する問題