Javascriptを使用して、ユーザーが非フォーム要素をクリックした場合、フォームフィールドのコンテンツを取得したい

Question

私はアプリケーションのログインフォームを持っていますが、（ベンダー提供の）バックエンドは変更できません。テンプレート（つまり：htmlとjavascript）を変更することができます。その下には "パスワードを忘れた"リンクがあります。ほとんどすべてのユーザーがリンクをクリックするだけですが、ユーザー名を入力して、何度か繰り返して「パスワードを忘れた」リンクを押します。

私がしたいのは、javascriptを使用してユーザー名フィールドを調べ、コンテンツがある場合は、パスワード回復の次のステップを指すように「パスワードを忘れた」リンクのURLを変更します。そう

、ユーザーがユーザー名フィールドに値なしでリンクをクリックすると、リンクが行く：http://example.com/system/lookup.html

usernameフィールドに値がある場合は、私が解決するためのリンクを希望は、 ： http://example.com/system/lookup.html?id= {username}

かんたんですか？

Answer 1

はjQueryの

$('.selector').change(function(){ 
$('a#forgot').attr('href','your html address here').html('The text displayed here') 
}); 

Answer 2

行うのははい、簡単にダウン入力の変更イベントやキーを聞いてみた後、リンクに

を変更：あなたのマークアップで

1. は、リンクのhrefを残しますユーザーがJSをオフにした場合でも、ユーザーには引き続き機能するように、最初のURLとして指定します。
2. usernameフィールドの値をチェックするリンクにonclickハンドラを追加し、空白でない場合は、リンクのhrefを変更します。

コード：

window.onload = function() { 
    var link = document.getElementById("yourLinkId"); 
    link.onclick = function() { 
     var username = document.getElementById("username").value; 
     if (username != "") { 
      link.href = "http://example.com/system/lookup.html?id=" + 
         encodeURIComponent(username); 
     } 
    }; 
}; 

あなたのリンクとユーザー名フィールドは、JSで使用するものと一致するidセットを持っている必要があります。

Answer 3

入力の値を取得し、長さまたは値と照合することができます。

値に応じて、

をURLを変更することができますフィドルを参照してください： http://jsfiddle.net/Z3VXr/3/