Set input text inside iframe and submit

Question

I'm trying to glue together two web services by passing a value from one to the other, unfortunately there's no API or clear way of hacking up the search query so I need to set the value of a input inside an iframe.

Here's the markup for the horrible iframe.

<form id="searchForm" method="post" action="/search/initialSearch">         
  <fieldset class="searchFields">
    <input type="text" name="searchTerm" value=""/>
    <input type="submit" value="Find stops"/>
  </fieldset>
</form>

I need to set the searchTerm text and then submit the form.

Note: This is going over mobile, so I would prefer a really lightweight solution

Answer 1

Isn't it as simple as:

myframe.document.getElementById("searchForm").searchTerm.value = 'hello';
myframe.document.getElementById("searchForm").submit();

Make sure your script runs AFTER the iframe is loaded. Your iframe tag has an onload event that you can use to determine when the page within the frame is loaded.

<iframe src="formPage.html" onload="loaded()" name="myframe" />

Answer 2

Are you able to access the web service from your server code?

If so, I'd sack off the iframe and create a proxy on your server. This would keep your HTML clean and lightweight for your intended audience.

Answer 3

just be aware that if your iframe's source is not coming from your server, it is impossible to access its contents with javascript from the page that contains the iframe. If you have access to the contents of the iframe that is coming from another server, then you can access all of the data from the parent page with:

window.top

If you do not have access to the iframe's page, then there is nothing you can do.