表单能否设置多个目标？如何实现提交时更新多iframe？

首先明确一点：原生HTML表单的target属性不支持同时指定多个iframe——它只能指向单个目标（比如一个iframe的名称、_blank或_self）。要实现同时更新多个iframe的需求，我们需要借助JavaScript来手动控制每个iframe的内容更新。

下面是具体的实现步骤，结合你的Laravel项目代码来调整：

步骤1：调整表单和iframe的HTML结构 #

首先，给表单添加唯一ID（方便JS监听），移除原有的target属性（因为我们要手动处理提交）；同时给每个iframe设置唯一ID（避免重复ID导致DOM选择错误）：

表单代码： #

<form action="{{route('chart.home')}}" method="get" id="filterForm">
  <div>
    <label for="daterange">Date Range:</label>
    <input type="date" name="StartDate" id="StartDate" class="form-control col-md-3" 
           value="{{isset($searchParams['StartDate']) ? $searchParams['StartDate'] : \Carbon\Carbon::now()->subDay(7)->format('Y-m-d')}}">
    to
    <input type="date" name="EndDate" id="EndDate" class="form-control col-md-3" 
           value="{{isset($searchParams['EndDate']) ? $searchParams['EndDate'] : \Carbon\Carbon::now()->format('Y-m-d')}}">
  </div>
  <br>
  <button type="submit" class="btn btn-sm btn-white">filter</button>
</form>

注意：这里把Carbon的日期格式从yy-m-d改成了Y-m-d，因为HTML的<input type="date">要求值必须是YYYY-MM-DD格式，否则无法正确识别日期。

iframe代码： #

<iframe class="embed-responsive-item" name="Charts" id="iframeCharts" src="{{route('chart.home')}}"></iframe>
<iframe class="embed-responsive-item" name="Charts1" id="iframeCharts1" src="{{route('chart1.home')}}"></iframe>
<iframe class="embed-responsive-item" name="Charts2" id="iframeCharts2" src="{{route('chart2.home')}}"></iframe>

步骤2：添加JavaScript处理逻辑 #

我们需要监听表单的提交事件，阻止默认的表单提交行为，然后手动构造查询参数，更新每个iframe的src属性（带上筛选参数）。

方案1：灵活可扩展的写法（推荐） #

这种写法可以轻松添加更多iframe，只需要在数组里新增条目即可：

// 监听表单提交
document.getElementById('filterForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交
  e.preventDefault();

  // 获取表单所有字段的参数（自动包含所有input，以后加字段无需修改JS）
  const formData = new FormData(this);
  const queryParams = new URLSearchParams(formData);

  // 定义所有需要更新的iframe：键是iframe的ID，值是对应的路由地址
  const targetIframes = [
    { id: 'iframeCharts', baseUrl: "{{route('chart.home')}}" },
    { id: 'iframeCharts1', baseUrl: "{{route('chart1.home')}}" },
    { id: 'iframeCharts2', baseUrl: "{{route('chart2.home')}}" }
    // 新增iframe的话，直接在这里加一行即可
  ];

  // 遍历更新每个iframe的src
  targetIframes.forEach(iframe => {
    const url = new URL(iframe.baseUrl);
    url.search = queryParams.toString(); // 拼接查询参数
    document.getElementById(iframe.id).src = url.toString();
  });
});

方案2：手动指定参数的写法（适合固定字段的场景） #

如果你的表单字段固定，也可以手动获取参数值：

document.getElementById('filterForm').addEventListener('submit', function(e) {
  e.preventDefault();

  // 手动获取日期参数
  const startDate = document.getElementById('StartDate').value;
  const endDate = document.getElementById('EndDate').value;

  // 构造查询字符串
  const queryParams = new URLSearchParams({
    StartDate: startDate,
    EndDate: endDate
  });

  // 更新第一个iframe
  const chartsUrl = new URL("{{route('chart.home')}}");
  chartsUrl.search = queryParams.toString();
  document.getElementById('iframeCharts').src = chartsUrl.toString();

  // 更新第二个iframe
  const charts1Url = new URL("{{route('chart1.home')}}");
  charts1Url.search = queryParams.toString();
  document.getElementById('iframeCharts1').src = charts1Url.toString();

  // 更新第三个iframe
  const charts2Url = new URL("{{route('chart2.home')}}");
  charts2Url.search = queryParams.toString();
  document.getElementById('iframeCharts2').src = charts2Url.toString();
});

为什么原生表单做不到？ #

HTML规范里，<form>的target属性只能接受单个值：可以是iframe的名称、特殊关键字（如_blank、_self），或者窗口/标签页的名称。没有语法支持同时指定多个目标，所以必须通过JavaScript来实现批量更新逻辑。

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