2011-11-15 16 views
0

私は...そう私と一緒にお待ちください、これに新たなんだポスト複数のリンクで複数の値を取得したり、

私は例えば、リンクを使用して別のページに複数の変数を渡すことができるようにしたい

<a href="value1">some text</a>,<a href="value2">some text2</a>,<a href="value3">some text3</a>,<a href="value4">some text4</a> 

これを「マルチセレクタ」として使用できるようにして、ユーザーが希望のテキストをクリック(選択)できるようにして、送信ボタンを使用して選択した値を投稿または取得。

私はテキストを表示しようとしており、各リンクはテキストのさまざまな部分を保持しているので、メニューやリストを使用したくないので、章のパラグラフの種類があるので、ユーザーは段落をクリックしますリンク、または少なくとも1つのように見える)、その値を他のページに送りますが、複数のパラグラフが必要なので、ユーザーは選択でき、可能であればパラグラフを選択解除できます。

誰かが複数の値を渡すための最良の方法は、フォームの送信やAJAXリクエストを介して行われ可能

+0

は、チェックボックスがあまりにも退屈している(私はすべてのクリックで、アレイを通過することを避けるためにマップではなく、上記の配列を使用してください)? – nnnnnn

答えて

0

は、ここで私はこれを実装については行くかもしれない方法は次のとおりです。

HTML

<a data-id="value1" href="value1">some text</a>,<a data-id="value2" href="value2">some text2</a>,<a data-id="value3" href="value3">some text3</a>,<a data-id="value4" href="value4">some text4</a> 
<input type="button" id="submit" value="submit"></input> 

Javascriptを:

var els = document.getElementsByTagName("a"); 
var sz = els.length; 

var o = {}; 
for(var n = 0; n < sz; ++n) { 
    els[n].onclick = function(e) { 
     e.preventDefault(); 
     var s = e.currentTarget.getAttribute("data-id"); 
     if(o[s] !== undefined) { 
      delete o[s]; 
     } else { 
      o[s] = ""; 
     } 
    }; 
} 
document.getElementById("submit").onclick = function(e) { 
    var s = ""; 
    for(key in o) { 
     s += key + "&"; 
    } 
    var location = s.substring(0, s.length-1); 
    // redirect user using location as parameter list or send ajax request 
}; 

http://jsfiddle.net/5y7wK/

-1

場合、ユーザは値を選択したときにように、あなたは複数のチェックボックスを持っている可能性があり、正しい方向に私を指すことになり希望1つの要求でそれらを送信したいとします。

は、相続人のサンプル:Sample



<form action="/myurl" method="POST"> 
     <input id="Val1" name="paragraph" type="checkbox" value="value1"/> 
     <label for="Val1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     In egestas tempus dictum. Mauris purus urna, congue non scelerisque non, 
     feugiat at arcu. Donec venenatis facilisis fermentum. Morbi ac lorem odio. 
     Cras nulla justo, pharetra et placerat ut, sagittis nec urna. 
     Praesent luctus, sem ac lobortis aliquam, purus sapien tempor dui, nec 
     pretium metus leo eu ligula. Cras ac egestas dolor. 
     </label> 
     </br> 
     </br> 
     <input id="Val2" name="paragraph" type="checkbox" value="value2"/> 
     <label for="Val2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     In egestas tempus dictum. Mauris purus urna, congue non scelerisque non, 
     feugiat at arcu. Donec venenatis facilisis fermentum. Morbi ac lorem odio. 
     Cras nulla justo, pharetra et placerat ut, sagittis nec urna. 
     Praesent luctus, sem ac lobortis aliquam, purus sapien tempor dui, nec 
     pretium metus leo eu ligula. Cras ac egestas dolor. </label> 
     </br> 
     <input type="submit"/> 
    </form> 
関連する問題