How to change iframe URL based on user input from text field?

Question

I have a iframe url that I would like to change based on what the user inputs into the text field. So I have:

<iframe
    src="http://player.twitch.tv/?channel={CHANNEL}"
    height="720"
    width="1280"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>

I would like to change {CHANNEL} to be what the user inputs into a text field and submits via button. For example, if the user inputs "TestName" into the text field the new iframe URL would become src="http://player.twitch.tv/?channel=TestName"

Not sure how to do this.

Do you have any code? We can help you with specific questions to your code but we're not going to write it for you. You can you JavaScript events to change the src attribute of the iframe. — Canolyb1
– Canolyb1, Commented Mar 18, 2017 at 3:07

Feathercrown · Accepted Answer · 2017-03-18 03:06:07Z

1

Try this. Keep in mind the input is not validated/protected.

function changeChannel(){
  document.getElementById("twitchFrame").src = "http://player.twitch.tv/?channel="+document.getElementById("channel").value;
}

<input type="text" id="channel"></input>
<button type="button" onClick="changeChannel();">Change Channel</button>
<iframe
    id="twitchFrame"
    src="about:blank"
    height="720"
    width="1280"
    frameborder="0"
    scrolling="no"
    allowfullscreen="true">
</iframe>

answered Mar 18, 2017 at 3:06

Feathercrown

2,5911 gold badge19 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

How to change iframe URL based on user input from text field?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related