CODEWITHSUNDEEP
javascriptjqueryhtmliframe
nouveau
nouveau

Reputation: 1272

Get the value of a text input and place it as source of iframe

I have an iframe with a default src="http://mysite.com"

I have an text input field and a submit button.

On submit, I want to take that value of the input field and load it into the src attribute of the iframe to show a different src

I have a hacked together solution that sorta works ok, but I want to distill it down and use jQuery methods. (or whatever is just the best way to do it)

Here is a codepen:

Current code:

HTML

<form class="visitor-input-form">
  <h2>Enter URL:</h2>

  <input type="text" class="currentUrl" placeholder="http://your-site.com" id="txtSRC" />

  <input type="submit" class="submit-button" value="View site" />
</form>

<div class="iframe-w">
  <h3>Small</h3>
  <iframe id="iframe01" class="i-frame small" src="http://nouveau.io"></iframe>
  <!-- default url -->
</div>

javaScript / jQuery

var ourUrl     =   $( ".i-frame" ).attr("src");
var urlValue   =   $("#txtSRC").val();

$(".submit-button").click( function() {

  //alert("heck");

  document.getElementById("iframe01").src = document.getElementById("txtSRC").value;


  // I want this to work...  //

  //$("#iframe01").attr("src") = $("#txtSRC").val();

});

Any help would be rad. Also, super ultra points if you can tell me the reg ex that will handle if people forget the http:// etc.

Upvotes: 0

Views: 1823

Answers (1)

charlietfl
charlietfl

Reputation: 171690

Your syntax is incorrect for jQuery method. When in doubt read the jQuery API for method you are using

jQuery setters never usemethod() = value they pass arguments to the method

You should use

$("#iframe01").attr("src", $("#txtSRC").val());

Upvotes: 1

Related Questions