HamzaLAMFAOUAR HamzaLAMFAOUAR - 1 month ago 12
HTML Question

How to display an input's source in an iframe using jQuery?

Good morning,
I'm now a beginner in jQuery and I have a problem using iframes and inputs.
Here's the situation :
I have an input where I can enter (for example) a website, and display it on an iframe. I tried a lot but without a result. Here's my code.
I'd appreciate your help guys, thanks a lot !

<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<input type="button" value="GO" onClick="getval()" />
<input type="text" name="url" src="http://www.google.com" id="textframe">

<iframe src="" id="targetframe"></iframe>

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
function getvalue() {
var xframe = $("textframe").val();
$("targetframe").attr('src', xframe);
}
</script>
</body>

Answer

You were using a undefined function and you didn't put hash symbol on the jquery objects when querying for an id.

I fixed your snippet and it should work.

function getval() {
   var xframe = $("#textframe").val();
   $("#targetframe").attr('src', xframe);
}
$("#btnGo").click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btnGo" value="GO" onClick="getval()" />
<input type="text" name="url" value="http://www.stackoverflow.com" id="textframe"> <br>
<iframe src="" id="targetframe"></iframe>

Remember that iframes needs http://in the url in order to work.

If you're on your website and you simply do www.google.com and your website is www.example.com, your iframe source will become www.example.com/www.google.com