عامة طريقة ملء استمارة في جافا سكريبت

Question

أنا أبحث عن الحقيقة عاما إلى "ملء" نموذج يستند إلى معلمة سلسلة باستخدام جافا سكريبت.

على سبيل المثال, إذا كان لدي هذا الشكل:

<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

ومن ثم يكون الأشياء الصحيحة المختارة استنادا إلى الخيارات في سلسلة الاستعلام.

لدي نوع من القبيح الحل أين أذهب من خلال الأطفال من النموذج والتحقق من ما إذا كانت تطابق مختلف المفاتيح ، ثم قم بتعيين القيم ، ولكن أنا حقا لا ترغب في ذلك.

أود نظافة ، عامة طريقة لفعل هذا العمل لأي شكل (على افتراض المعلمة سلسلة كل مفاتيح الحق).

أنا باستخدام النموذج مكتبة جافا سكريبت, لذلك أود أن أرحب الاقتراحات التي تستفيد من ذلك.

تحرير:هذا هو ما جئت حتى الآن (باستخدام نموذج 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

إذا كنت تستخدم النموذج ، هذا أمر سهل.أولا, يمكنك استخدام toQueryParams طريقة في سلسلة كائن على كائن جافا سكريبت مع أزواج الاسم/القيمة لكل معلمة.

ثانيا يمكنك استخدام النموذج.عناصر.setValue طريقة (لا يبدو أن تكون موثقة) ترجمة كل سلسلة الاستعلام القيمة الفعلية شكل مساهمة الدولة (مثلا ، التحقق من خانة الاختيار عند الاستعلام سلسلة القيمة "على").باستخدام الاسم.قيمة=قيمة التقنية تعمل فقط على النص واختر (أحد ولا كثير) المدخلات.استخدام أسلوب النموذج يضيف دعم وحدد مربع الاختيار (متعددة) المدخلات.

أما بالنسبة وظيفة بسيطة لملء ما لديك, هذا يعمل بشكل جيد و ليس معقد.

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

يستخدم هذا الكائن.مفاتيح و كل طرق تكرار عبر كل معلمة سلسلة الاستعلام وتعيين مطابقة شكل المدخلات (باستخدام إدخال اسم السمة) إلى قيمة مطابقة في الاستعلام params الكائن.

تحرير: لاحظ أنك لا تحتاج إلى أن يكون معرف الصفات على شكل عناصر هذا الحل إلى العمل.

Answer 2

جرب هذا:

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

رمز أعلاه تفترض تعيين معرف القيم وكذلك أسماء كل عنصر من عناصر النموذج.فإنه يأخذ المعلمات في النموذج:

?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 3

قلت وأنت تسير بالفعل من خلال العناصر ووضع القيم.ومع ذلك, ربما هذا هو نظافة هذا كل ما لديك ؟

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 4

ثلاثة خطوط من التعليمات البرمجية في prototype.js:

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

Answer 5

يمكنك الحصول على نموذج البيانات في كائن جافا سكريبت باستخدام formManager .