JavaScript to get URL value and post into iFrames

Question

I'm trying to replicate the script functionality of this site: http://responsinator.com/

The idea is to get the URL from the form and insert into a one or more iFrames.

Sorry I'm a bit of a noob. I thought this would be simple, but am stuck. This is where I'm at so far:

  function handleButtonEnterClick() {
    var textbox_value = document.getElementById("url_textbox").value;
    document.getElementById('myUrl').value = window.location;
    var form = document.getElementById('myForm');
    form.action = textbox_value;
    form.submit();
}

<div id="container">
<form action="" method="post" id="myForm">
    <p>Enter URL:</p>
    <input type="hidden" id="myUrl" name="url" />
    <input type="text" id="url_textbox" name="url_textbox" />
    <input type="button" id="button_enter" name="button_enter" 
           value="enter" onclick="handleButtonEnter" />
</form>
</div>

Thanks!

Where's this iframe you speak of?

Ian
– Ian

2013-03-15 13:39:47 +00:00
Commented Mar 15, 2013 at 13:39 — Ian
– Ian, Commented Mar 15, 2013 at 13:39

Jeff Shaver · Accepted Answer · 2013-03-15 13:43:56Z

1

Like this? http://jsfiddle.net/xtpD5/1/

You can just submit the form to the iframe via the target attribute. and it opens it in the iframe

function handleClick() {
    var url = document.getElementById('url_textbox').value;
    document.getElementById('myForm').action = url;
    return true;
}

<div id="container">
    <form action="" method="post" id="myForm" target='iframe'>
        <p>Enter URL:</p>
        <input type="hidden" id="myUrl" name="url" />
        <input type="text" id="url_textbox" name="url_textbox" />
        <input id="button_enter" name="button_enter" value="enter" type="submit" />
    </form>
</div>
<iframe name="iframe"></iframe>

answered Mar 15, 2013 at 13:43

Jeff Shaver

3,35520 silver badges19 bronze badges

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

2 Comments

John Pate Over a year ago

Amazing! This is going on a WordPress page. Next hurdle will be to get the script running on that. I think WP likes to load its jQuery first. Thanks for your help! I'll work on this today.

John Pate Over a year ago

Oops, I would like this to loops n number of times. The script would need to insert the identical URL into several iFrames. Otherwise, tested and runs great on my WordPress test site.

Collectives™ on Stack Overflow

JavaScript to get URL value and post into iFrames

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related