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

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.

We can't do that for you, but there is already a topic on this question — cmizzi
– cmizzi, Commented Oct 20, 2016 at 20:03

Benny Lin · Accepted Answer · 2016-10-20 20:20:38Z

0

Here's a jQuery approach.

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>

answered Oct 20, 2016 at 20:20

Benny Lin

5363 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zeus · Accepted Answer · 2016-10-20 20:21:37Z

0

This JSFiddle accomplishes what you're asking. You'll want to tweak it for robustness, but basically you can target the form (I used $('form') but for a real-world scenario you might want to be more specific.) and use .serialize() to turn its values into a query string, then append that to the src attribute of your iframe.

Edit: Note that for your specific example to work with .serialize(), you'd want the name attribute of #form-type to be "param_type" and the name attribute of #form-date to be "param_date"

answered Oct 20, 2016 at 20:21

Zeus

2311 silver badge8 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related