9

javascript を使用して、パラメーター文字列に基づいてフォームに「入力」するための非常に一般的な方法を探しています。

たとえば、次のフォームがある場合:

<form id="someform">
  <select name="option1">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select name="option2">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
</form>

次のようなパラメーター文字列を取得できるようにしたいと思います。option1=2&option2=1

そして、クエリ文字列のオプションに基づいて正しいものを選択します。

フォームの子を調べて、さまざまなキーと一致するかどうかを確認してから値を設定するという、一種の醜いソリューションがありますが、本当に好きではありません。

どのフォームでも機能する、よりクリーンで一般的な方法が必要です（param文字列にすべての適切なキーがあると仮定します）。

私はプロトタイプの JavaScript ライブラリを使用しているので、それを利用した提案を歓迎します。

編集：これは私がこれまでに思いついたものです（のプロトタイプを使用Form.getElements(form)）

function setFormOptions(formId, params) {
  params = params.split('&');
  params.each(function(pair) {
    pair = pair.split('=');
    var key = pair[0];
    var val = pair[1];
    Form.getElements(form).each(function(element) {
      if(element.name == key) {
        element.value = val;
      }
    });
  });
}

ただし、それでもより高速/クリーンになる可能性があると感じています。

4

5 に答える 5

6

Prototype を使用している場合、これは簡単です。まず、String オブジェクトでtoQueryParamsメソッドを使用して、各パラメーターの名前と値のペアを持つ Javascript オブジェクトを取得できます。

次に、Form.Elements.setValue メソッド (文書化されていないようです) を使用して、各クエリ文字列値を実際のフォーム入力状態に変換できます (たとえば、クエリ文字列値が「オン」の場合にチェックボックスをオンにします)。name.value=value 手法の使用は、テキストと選択 (1 つ、多くはありません) の入力に対してのみ機能します。Prototype メソッドを使用すると、チェックボックスと選択 (複数) 入力のサポートが追加されます。

あなたが持っているものを入力する単純な機能に関しては、これはうまく機能し、複雑ではありません。

function populateForm(queryString) {
    var params = queryString.toQueryParams();
    Object.keys(params).each(function(key) {
        Form.Element.setValue($("someform")[key], params[key]);
    });
}

これは、Object.keysとeachメソッドを使用して各クエリ文字列パラメーターを反復処理し、一致するフォーム入力を (input name 属性を使用して) クエリ params オブジェクトの一致する値に設定します。

編集:このソリューションが機能するために、フォーム要素に id 属性を設定する必要はないことに注意してください。

于 2008-11-02T21:24:51.287 に答える
3

これを試して：

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
      param = param.split('=');
      key = param[0];
      val = param[1];

      $(key).value = val;
  });
});

上記のコードは、id 値と名前を各フォーム要素に割り当てることを前提としています。次の形式のパラメータを取ります。

?キー=値&キー=値

また

?オプション1=1&オプション2=2

要素の名前だけに留めておきたい場合は、上記の代わりに試してください：

Event.observe(window, 'load', function() {
  var loc = window.location.search.substr(1).split('&');

  loc.each(function(param) {
    param = param.split('=');
    key = param[0].split('_');

    type = key[0];
    key = key[1];
    val = param[1];

    $$(type + '[name="' + key + '"]').each(function(ele) {
      ele.value = val;
    });
});

このコードは、次の形式でパラメーターを受け取ります。

?type_key=値&type_key=値

また

?select_option1=1&select_option2=2
于 2008-11-02T20:32:34.387 に答える
1

あなたはすでに要素を調べて値を設定していると言いました。しかし、おそらくこれはあなたが持っているものよりもきれいですか？

function setFormSelectValues(form, dataset) {
    var sel = form.getElementsByTagName("select");
    dataset.replace(/([^=&]+)=([^&]*)/g, function(match, name, value){
        for (var i = 0; i < sel.length; ++i) {
            if (sel[i].name == name) {
                sel[i].value = value;
            }
        }
    });                
}

必要に応じて、要素を選択するだけでなく、それを適応させることができます。

于 2008-11-02T20:09:26.087 に答える
0

formManagerを使用して、JavaScript オブジェクトでフォーム データを取得できます。

于 2010-09-28T18:19:20.573 に答える
0

prototype.jsの 3 行のコード:

$H(query.toQueryParams()).each(function(pair) {
    $("form")[pair.key].setValue(pair.value);
});
于 2008-11-12T13:29:06.360 に答える