使用javascript / jquery，将表单变量传递给iframe src参数

Question

我有一个这样的iframe：

<iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe>

我想使用表单中的值替换src值

<form method="post" target="report-iframe">
<input id="form-type" name="form-type" type="text" />
<input id="form-date" name="form-date" type="date" />
<input type="button" value="Update Report" onclick="javascript_function()"/>
</form>

因此，iframe的最终来源是：

src="https://reporting.com/embed?param_type=form-type&param_date=form-date"

然后，使用传递的参数重新加载iframe。

如果可能的话，我只想使用javascript / jquery做到这一点。

Answer 1

这是一种jQuery方法。

 function javascript_function() { $('#report-iframe').attr('src','https://reporting.com/embed?param_type=' + $('#form-type').val() + '&param_date=' + $('#form-date').val()); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe name="report-iframe" id="report-iframe" src="https://reporting.com/embed" width="100%" height="300" frameborder="0"></iframe> <form method="post" target="report-iframe"> <input id="form-type" name="form-type" type="text" /> <input id="form-date" name="form-date" type="date" /> <input type="button" value="Update Report" onclick="javascript_function()"/> </form> 

Answer 2

这个JSFiddle可以满足您的要求。 您将需要对其进行调整以提高鲁棒性，但是基本上您可以将表单作为目标（我使用$('form')但对于实际情况，您可能希望更具体一些。）并使用.serialize（）进行转换将其值添加到查询字符串中，然后将其附加到iframe的src属性中。

编辑：请注意，您的具体实例一起工作.serialize()你想要的name ＃窗体类型的属性是“param_type”和name ＃形式最新的属性是“param_date”