CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Deepak Yadav
Deepak Yadav

Reputation: 7079

unable to get input value and attach it to iframe src

I have a page with input box, where user will enter a URL, and than this URL gets added as SRC for multiple IFRAMES. but I'm unable to do so. Can anyone tell me whats wrong here and even improvise it.

And is it even possible to manage it using FORM Tag and Submit button? 

  var frametest = $('#test-url').val();
  var urlproto = 'http://';
  $('#get-url-btn').click(function() {
    $('.demo-frame').attr('src', urlproto + frametest);
  });
.demo-frame {
  width: 200px;
  height: 200px;
  overflow: hidden;
  overflow-y: auto;
  margin: 15px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <input type="url" id="test-url" placeholder="Enter URL">
  <button type="button" id="get-url-btn">Check</button>
</div>
<div class="demo">
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
  <iframe class="demo-frame" src=""></iframe>
</div>

Upvotes: 0

Views: 216

Answers (2)

Dimitar Stoyanov
Dimitar Stoyanov

Reputation: 349

You take the frametest variable too early Put it inside the click()function

  var urlproto = 'http://';
  $('#get-url-btn').click(function() {
    var frametest = $('#test-url').val();
    $('.demo-frame').attr('src', urlproto + frametest);
  });

Upvotes: 1

Mi-Creativity
Mi-Creativity

Reputation: 9654

your are retrieving a null value of that input text, instead make your js code like this: *you can test it with this url www.example.com

var urlproto = 'http://';
$('#get-url-btn').click(function () {
    var frametest = $('#test-url').val();
    $('.demo-frame').attr('src', urlproto + frametest);
});

However, this might not work always because of 'X-Frame-Options' to 'SAMEORIGIN'or DENY

JSFiddle

Upvotes: 2

Related Questions