Question

I have an iframe like this:

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

I want to replace the src value using values from a form

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

so the resulting source of the iframe is:

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

Then reload the iframe with the passed parameters.

I want to do this using only javascript/jquery if possible.

Answer 1

这是一种jQuery方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

This JSFiddle完成你所要求的。您需要调整它的稳健性，但基本上您可以定位表单（我使用$('form')但是对于真实场景，您可能希望更具体。）并使用.serialize()转向将其值放入查询字符串中，然后将其附加到iframe的src属性中。

修改：请注意，对于使用.serialize()的特定示例，您希望＃form-type的name属性为“param_type”，并且name属性为＃form-date为“param_date”

Using javascript/jquery, pass form variables to iframe src parameters

2 个答案: