2012-04-24 22 views
0

ユーザーが何かを入力したテキストフィールドでフォームを作成し、そのフォームをユーザーがリダイレクトされる外部サイトへのリンクに組み込む必要があります。フォームデータをURLに組み込む

ユーザーが「foobar」と入力したとします。彼が提出をクリックした後、彼はhttp://example.com/foobarに連れて行くべきです。

これはJS内にあることが望ましいですが、PHPでも動作します。 ?これが行う唯一のことは、追加のユーザー= foobarのをURLにある

<html> 
<head> 
<script type="text/javascript"> 

function genURL() { 
var user = document.getElementById('user'); 
window.location.href = "http://example.com/" + user; 
} 

</script> 
</head> 
<body> 

<form> 
username: <input type="text" name="user"> 
<input type="submit" value="Submit" name="user" onClick="genURL()"> 
</form> 

</body> 
</html> 

これまでのところ、私はこれを持っています。

これを行うには何が必要ですか?

答えて

1

あなたは提出されてからフォームを防ぐ必要があります。

次に、あなたが持っているでしょう。これを行うには、フォームのonsubmitハンドラを関数にして、フォームが送信されないようにfalseを返します。

さらにdocument.getElementById('').value.valueを使用してフィールドのコンテンツを取得する必要があります。

はJavaScript:

function genURL() { 
    var user = document.getElementById("user").value; 
    window.location = "http://google.com/" + user; 
}​ 

HTML:

<form onsubmit="genURL(); return false;"> 
    <input type="text" id="user" /> 
    <input type="submit" value="Submit" /> 
</form>​ 

デモ:http://jsfiddle.net/jhogervorst/CFHtG/

+0

目をやったおかげで、 eトリック! –

0

user要素の値が必要です。

var user = document.getElementById('user').value; 
0

以下で試してみてください:

function genURL() { 
    var user = document.getElementById('user'); 
    window.location.href = "http://thisisnotarealurl.com/" + user.value; 
} 
0

が、あなたが呼び出したいURLとフォームのメソッドのGETするためにフォームのアクションを設定する方が簡単ではないでしょうか? :) JavaScriptが

<html> 
    <body> 
     <form action="http://example.com" method="GET"> 
      username: <input type="text" name="user"> 
      <input type="submit" value="Submit" name="user"> 
     </form> 
    </body> 
</html> 

不要を

0
function genURL() { 
    var user = document.getElementById('user'); 
    window.location.href = document.URL + user.value; 
} 
関連する問題