替换getElementsByTagName，通过隐藏表单输入框获取参数值

我帮你调整了JavaScript代码，完美适配新的隐藏表单结构，同时保留原有参数处理的逻辑和格式不变：

目标HTML结构 #

<form name="form1" id="form-search-widget">
  <input type="hidden" name="query" value="New York, NY">
  <input type="hidden" name="leadto" value="email@email.com">
  <input type="hidden" name="myid" value="5555">
</form>

修改后的JavaScript代码 #

单表单场景（对应原单个<li>） #

// 获取目标表单元素，不存在则直接退出
const form = document.getElementById("form-search-widget");
if (!form) return;

// 收集所有隐藏输入框的参数键值对
const params = {};
const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
hiddenInputs.forEach(input => {
  params[input.name] = input.value;
});

// 复制默认配置，避免修改原对象
let r = {...this.defaultOptions};

// 沿用原有参数验证与赋值逻辑
Object.keys(this.defaultOptions).forEach(key => {
  if (params.hasOwnProperty(key)) {
    switch (key.toLowerCase()) {
      case "ltype": {
        const validTypes = this.getValidListingTypes(params[key]);
        if (validTypes) r[key] = validTypes;
        break;
      }
      case "ptype": {
        const validTypes = this.getValidPropertyTypes(params[key]);
        if (validTypes) r[key] = validTypes;
        break;
      }
      default:
        r[key] = params[key];
    }
  }
});

// 调用组件创建方法，传入表单作为容器（可根据实际需求调整挂载元素）
this.createWidget(form, r);

多表单场景（对应原多个<li>） #

如果需要处理多个同类型的表单（替代原<ul>下的多个<li>），可以用以下代码遍历处理：

// 选择所有匹配的表单（这里用id前缀筛选，可根据实际情况调整选择器）
const forms = document.querySelectorAll('form[id^="form-search-widget"]');

forms.forEach(form => {
  // 收集当前表单的隐藏参数
  const params = {};
  const hiddenInputs = form.querySelectorAll('input[type="hidden"]');
  hiddenInputs.forEach(input => {
    params[input.name] = input.value;
  });

  // 复制默认配置并处理参数
  let r = {...this.defaultOptions};
  Object.keys(this.defaultOptions).forEach(key => {
    if (params.hasOwnProperty(key)) {
      switch (key.toLowerCase()) {
        case "ltype": {
          const validTypes = this.getValidListingTypes(params[key]);
          if (validTypes) r[key] = validTypes;
          break;
        }
        case "ptype": {
          const validTypes = this.getValidPropertyTypes(params[key]);
          if (validTypes) r[key] = validTypes;
          break;
        }
        default:
          r[key] = params[key];
      }
    }
  });

  // 为每个表单创建对应组件
  this.createWidget(form, r);
});

代码说明 #

• 表单定位：用精准的选择器获取目标表单，替代原有的混合选择逻辑，更简洁可靠。
• 参数收集：通过筛选隐藏输入框，将name和value映射为参数对象，完全对应原从<li>属性取值的逻辑。
• 逻辑复用：完整保留了原有的ltype、ptype参数验证逻辑，确保参数处理规则一致，不会破坏原有功能。
• 灵活性：支持单表单和多表单两种场景，可根据实际HTML结构选择对应实现。

内容的提问来源于stack exchange，提问作者kelsheikh