表单可以有多个目标吗？

问题描述

我有一个连接到iframe的表单，我想在提交表单时将其击中多个iframe。

innerHTML

和这个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>

有没有办法做到这一点？

解决方法

表单只能有一个目标。

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

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

更新（jQuery示例）：

iframe

,

此功能的另一种工作方式。
Button（）用于其中带有onclick =“”的按钮。点击文档中的“表单”。表单必须与表单名称匹配：

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

您可以重复多次以击中所有目标。效果很好。