0

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.

nouveau
  • 1,162
  • 1
  • 8
  • 14

1 Answers1

1

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());
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thank you. I was reading the .attr() docs but I couldn't wrap my head around that second part `.attr("src", "?")` – nouveau Nov 01 '13 at 00:11
  • think of `getters` and `setters`.... to get you leave out second argument as in `var src=$("#iframe01").attr("src")` to set you use second argument. Is pretty standard across whole jQuery library – charlietfl Nov 01 '13 at 00:33