複数のテキストボックスの値を結合

Pocket

テキストボックス(inputタグ)が大量にあって、これらをパラメータとしてPHPのファイルに送信する必要に迫られました。
一つずつnameを付けるのが基本ですが長くなるので、CSVとして渡し、配列化して使いたいと思います。

input

HTML

<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="button" id="mybtn" value="実行">

このようにinputタグが大量にあります。
実行ボタンを押すとそれぞれのテキストボックスの値をカンマ区切りで結合して、「test.php?q=val0,val1,val2,val3,val4」のような形で送信したいのです。
JavaScript(jQuery)で処理する方法を考えました。

jQuery

$(document).ready(function(){
    $("#mybtn").click(function(){
        var arrs = [];
        $("input.abc").each(function(){
            arrs.push($(this).val());
        });
        var url = document.location + "?q=" + arrs.join(",");
        document.location.href(url);
    });
});

このようにして「abc」というクラスのテキストボックスを全て配列に取得します。配列をカンマ区切りで結合します。
ここでは現在のファイル自身にパラメータを追加します。ファイル自身は「document.location」で取得できます。URLをセットすることもできます。

詳細は省略しますが、PHPとしては「$_get['q']」としてCSV("val0,val1,val2,val3,val4")を取得し、explodeで配列に分割して使います。

[ 2013年10月12日 | カテゴリー: JavaScript | タグ: , ]

« | »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

送信してください。


タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報