一个表单可以有多个目标吗？答案

【问题标题】：can a form have multiple targets?一个表单可以有多个目标吗？
【发布时间】：2020-09-09 11:14:37
【问题描述】：

我有一个连接到 iframe 的表单，我想在提交表单时遇到多个 iframe。

<form action="{{route('chart.home')}}" method="get" id="" target="Charts">
                        <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('yy-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('yy-m-d')}}">
                        </div>
                        <br>
                        <button type="submit"  class="btn btn-sm btn-white">filter</button>

还有这个 iframe

 <iframe class="embed-responsive-item" name="Charts" id="iframe" src="{{route('chart.home')}}"></iframe>

我希望能够在提交表单时定位更多 iframe，例如

 <iframe class="embed-responsive-item" name="Charts1" id="iframe" src="{{route('chart1.home')}}"  allowfullscreen></iframe>

 <iframe class="embed-responsive-item" name="Charts2" id="iframe" src="{{route('chart2.home')}}"  allowfullscreen></iframe>

有没有办法做到这一点？

【问题讨论】：

也许使用了一些 ajax
不，这不可能。也许你可以通过 JavaScript 做到这一点，将表单提交到一个 iframe，然后更改表单目标，然后再次提交……但是这样做的实际目的是什么，你想在这里实现什么？
您显示的这两个 iframe 的代码似乎完全相同，顺便说一句，这从一开始就没有什么意义。 ID 在 HTML 文档中必须是唯一的，如果您希望能够单独定位它们，那么它们的名称也必须不同。

标签： javascript php forms iframe

【解决方案1】：

表单只能有一个目标。

相反，您可以使用 JavaScript 来捕获表单上的 submit 事件，并以编程方式设置所有 iframes 的 src 属性。

您可以使用 vanilla FormData 或例如使用 jQuery 的 serialize() 来做到这一点。

更新（jQuery 示例）：

$("form[target=Charts]").on("submit", function(event) {
    event.preventDefault();
    var baseSrc = $(this).attr('action');
    var queryArgs = $(this).serialize();
    $('iframe[name=Charts]').each(function() {
        $(this).attr('src', baseSrc + '?' + queryArgs);
    });
});

【讨论】：

【解决方案2】：

另一个可行的方法是这个函数。
Button() 用于其中带有 onclick="" 的按钮。在 document.Form 中点击“表单”必须匹配表单名称：

    function Button()
{
    document.Form.action = "target action"    // First target
    document.Form.target = "name of target";    // Open in a iframe
    document.Form.submit();        // Submit the page
    document.Form.action = "target action"    // Second target
    document.Form.target = "name of target";    // Open in a iframe
    document.Form.submit();        // Submit the page
    return true;
}

您可以根据需要多次重复此操作，以击中所有目标。效果很好。

【讨论】：