在javascript中填寫表單的通用方法

Question

我正在尋找一種真正通用的方式來根據使用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> 

我希望能夠採取一個PARAM字符串是這樣的：option1=2&option2=1

然後要有正確的事情選定基礎上，查詢字符串中的選項。

我有一種醜陋的解決方案，我通過窗體的孩子，並檢查它們是否匹配各種鍵，然後設置值，但我真的不喜歡它。

我想要一個清潔工，通用這樣做的方式可以適用於任何形式（假設參數字符串具有所有正確的鍵）。

我正在使用原型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; 
     } 
    }); 
    }); 
} 

我覺得這可能仍然是更快/更清潔但是。

Answer 1

如果您使用的原型，這是很容易。首先，您可以使用String對象上的toQueryParams方法來爲每個參數獲取帶有名稱/值對的Javascript對象。其次，您可以使用Form.Elements.setValue方法（似乎沒有記錄）將每個查詢字符串值轉換爲實際的表單輸入狀態（例如，當查詢字符串值爲「on」時檢查複選框）。使用name.value = value技術僅適用於文本並選擇（一個，不是很多）輸入。使用Prototype方法添加對複選框和選擇（多個）輸入的支持。

至於一個簡單的函數來填充你有什麼，這工作得很好，它並不複雜。

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

這使用Object.keys和each方法來迭代每個查詢字符串參數和匹配的形式輸入（使用輸入名稱屬性）設定爲在查詢params對象的匹配值。

編輯：請注意，您無需在此表單元素上使用此ID解決方案的ID屬性。

Answer 2

你說你已經在瀏覽元素並設置值。然而，也許這是更清潔，你有什麼？

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; 
      } 
     } 
    });     
} 

然後，您可以根據需要對其進行調整，以便不僅僅選擇元素。

Answer 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值以及名稱每個表單元素。它採用參數形式：

?key=value&key=value

或

?option1=1&option2=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=value&type_key=value

或

?select_option1=1&select_option2=2

Answer 4

三行代碼在prototype.js：

$H(query.toQueryParams()).each(function(pair) { 
    $("form")[pair.key].setValue(pair.value); 
}); 

Answer 5

你可以使用 formManager在JavaScript對象表單數據。