Targeting iframe src from user input in javascript form - javascript

I'm trying to target an iframe's source from a javascript form. So if someone typed in http://www.reddit.com the iframe's source would change to reddit.com
I've tried a few things but you can't put a script tag within src, so is there any way to do this with javascript, or would i need to make a php echo function?
<iframe src="http://www.stachoverflow.com/"></iframe>

Do you mean something like this?
<input type="url" placeholder="http://example.com/" /><button id="urlclick">Go</button>
<iframe id="frm"></iframe>
<script type="text/javascript">
document.getElementById('urlclick').onclick = function() {
document.getElementById('frm').src = this.previousSibling.value;
return false;
}
</script>

By using jquery we can do like this..
<input type="text" id="address">
<button onclick="get_url()"></button>
<iframe id="frm"></iframe>
<script>
function get_url()
{
var adr=$('#address').val();
$('#frm').attr('src', url);
}
</script>

Related

javascript onkeypress input text

I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
So, what exactly difference between above 2 codes?
When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
Why is not working to place above the input
-Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded
<body onload="start()">
<input type="text" id="name">
<script type="text/javascript">
function start() {
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e) {
console.log('Pressed!')
})
}
</script>
</body>
And the second one -you are using two function in a single event. So use with any one of the event
if use with inline keypress of keyPressListener() else use Dom event of the
keypress (addEventListener)
*Note:
Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .
<head>
<script type="text/javascript">
function keyPressListener() {
console.log('Pressed!')
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
You can use addEventListener.
Or try this as your input:
Add a ; after keyPressListener():
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this:
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.
You can also just grab the element from the DOM and then add the event listener to the element like so:
jQuery: $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );

I need to dynamically update an iframe using an input from a user

I have been searching for the right information for days and weeks now, and I must just be missing it. I have a simple problem, so it would seem. I have an iframe, which loads with a default URL. I also have a text box, and a submit button. What I want to do now, is to let the user input a URL, and then have the URL displayed in the iframe. Please don't suggest I simply do other things, or ask why I want to do this. It is a ongoing learning process.
I have a java-script function that works when I use the "onclick" function. Here is the java-script:
<script>
function setURL(url){
document.getElementById('myframe').src = url;
}
This works with a set url function such as this:
<input type="button" id="mybutton" value="Home Page" onclick="setURL('includes/guests.php')" />
The function works in that kind of scenario just fine. But, I want to instead, replace "onclick="setURL('includes/guests.php')" with the url entered by the user in this line:
<input type="text" name="sendurl" size="100">
I am unsure exactly how to get this to work right. I want the iframe to be loaded with the url the user inputs. If i use a standard submit, and submit the form to itself, the post info for the url can be checked, and i even verified it works.
if($_POST['sendurl'] != null) {
$tisturl = $_POST['sendurl'];
}
echo $tisturl;
echo $tisturl is simply to show me that it is carrying the url over correctly.
My problem is, how do I now dynamically update the iframe to the new url value?
Here is working code for something that will take what is typed by the user into a text box and use that as the src for the iFrame. Check your console to see if there are further errors (like Mixed Content security warnings, etc.).
<script>
function myFunction() {
url = document.getElementById('newURL').value;
url = url.replace(/^http:\/\//, '');
url = url.replace(/^https:\/\//, '');
url = "https://" + url;
document.getElementById('myframe').src = url;
};
</script>
<input type="button" id="mybutton" value="Home Page" onclick="myFunction()" />
<input type="text" id="newURL" />
<iframe id="myframe" src="">
</iframe>
I've updated the script to remove http:// and https://prefixes before prepending https:// to ensure it tries to fetch secure resources.
This will work. It will show the loaded URL of the iframe n the text box and it will load the URL typed in the text box to the iframe using the button in the page or the enter key on your computer.
NOTE: You do not need to have a URL, you can have anything you want, this is just an example.
JavaScript
<script language="JavaScript">
function handleKeyPress(e)
{
var key=e.keyCode || e.which;
if (key==13){
event.preventDefault();
GoToURL();
}
return false;
}
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
test1 = document.URLframe.u1.value
test2 = document.URLframe.u2.value
// just add more of these above the more text boxes you want to use for it, or you can just have one.
{
var location= ("http://" + URLis + test1 + "anything_you_want" + test2 + ".com"); // delete or add the name of the text boxes of above.
window.open(location, 'iframefr');
}
}
</script>
Boby HTML
<form name="URLframe" id="URLframe" method="post">
<iframe name="iframefr" id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u1" size="71" value="" placeholder=" U1 " onkeypress="handleKeyPress(event)">
<br>
<input type="text" name="u2" size="71" value="" placeholder=" U2 " onkeypress="handleKeyPress(event)">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>
</form>
NOTE: It is important that the function loadurl() is last in the <form>code and not in the head code as the rest of the javascript.

Fill input with jquery variable (Input receive html code)

I am able to open an external page in the DOM.
But I am trying to fetch all the child tags from a div and save it to the javascript variable and then print the variable in the input value
I need to save in the input all html content of the div and the child tags:
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="<script>document.write(content)</script>">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html"); // load external page in Dom
var content = $(this).closest('#div1');
/* find all parents tags e content of div id="div1"
(This is inside the external index.html file) */
});
</script>
I'm not getting it, I do not know where I'm going wrong in the code above
Thanks
//try like below
<form method="POST" action="test.php">
<input id="content" type="text" name="content" value="">
<input type="submit" value="submit">
</form>
<div id="mydiv"></div>// here load external page
<script>
$(document).ready(function(){
$("#mydiv").load("index.html");
var loadFile = load("index.html");
var content = $(loadFile).find('#div1').html();
$('#content').val(content);
});
</script>
you need to use callback function to view/explore the loaded contents using $.fn.load
$(document).ready(function(){
$("#mydiv").load("index.html", function(data){
// assuming #div1 is inside "index.html"
var content = $(data).find("#div1");
});
});

Input text to a link within an <iframe>

I have a list of links not in an iframe which refresh the iframe with different info.eg
href="http://www.myfav.co.uk/nf_req_grid.php?g=top_72&e=joebloggs#mail.com<? echo $email; ?>" target="iframe_c"
This works well, but I also need the user to input text for the g=xxxx bit that are not on the general list, which also resides outside the iframe. I have tried various methods including hidden in an input statement but only sucessfully done by re-loading the whole page which I wish to avoid.
I am sure the answer is simple but is eluding me. Thanks
I think it will be easiest to just rig this up with some javascript like this:
<input name="g" type="text" />
<button name="b" value="Refresh" />
<script>
$(document).ready( function(){
$('button[name="b"]').click( function() {
var g = $('input[name="g"]').val();
var e = '<?= $email ?>';
var url = 'http://www.myfav.co.uk/nf_req_grid.php?g='+g+'&e='+email;
$('#iframeId').attr('src', url);
});
});
</script>
Try this:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="ginpt"><br/>
a<br/>
b<br/>
c<br/>
<iframe src="" name="iframe_c"></iframe>
The Javascript:
<script>
$(document).ready( function(){
$('.dlink').on('click',function(e){
e.preventDefault();
window.open(
$(this).attr('href').replace('{g}',$('.ginpt').val()),
$(this).attr('target')
);
})
});
</script>
In this example, I'm just replacing your g querystring value with a macro that'll be replaced by javascript function when they click on the anchor.
jsFiddle: http://jsfiddle.net/0dzassds/1/

Submit button alert box bug. How do I identify the bug and fix the code?

HELP! I need to know for this code to pop up an alert box, but the submit button does not bring it up! What is the bug and how can I fix the code without entirely changing the all of it? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dougie's Script</title>
<script>
var textinput;
function submitHandler(e){
alert("You entered " + textinput.value + "\n");
e.preventDefault();
}
textinput=document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
</script>
</head>
<body>
<form id="theform" action="#">
<label>Enter text here...</label>
<input id="textfield" type="text" >
<input type="submit" value="Submit" >
</form>
</body>
</html>
Move this to underneath the ending form tag:
<script type="text/javascript">
textinput=document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
</script>
Move your <script> tag to the bottom of your <body>:
</form>
<script>...</script>
</body>
Right now, your script is trying to look for elements that haven't been created yet. The alternative would be to listen for the document's DOMContentLoaded event, but that isn't cross-browser.
Try moving your script tag to the very bottom of the body. This way the script will execute after the document has loaded (and then your elements should be "gettable" and "listener-attachable".)
The problem is that the elements of the page have yet to load when the javascript is ran. Therefore, document.getElementById("textfield") does not return an element, and no event is tied to it.
Try encapsulating the event handling of your javascript code as follows:
var textfield;
function submitHandler(e) { ... }
// When the window loads, run this function.
window.onload = function() {
textfield = document.getElementById("textfield");
var form = document.getElementById("theform");
form.addEventListener("submit", submitHandler, false);
}
That will make sure the event is tied to the element once it is loaded.
Remember to keep things in scope; where you are grabbing the text input dynamically every time you call the function in-order to keep the value updating within the response. Also, make sure the DOM is loaded before trying to access elements within the HTML tree, and since you are using addEventListener, here is a working version of your script:
<!DOCTYPE html>
<html>
<head>
<title>Dougie's Script</title>
<script>
(function(d){
var init = function(){
var form = d.getElementById("theform"), submitHandler = function(e){
var textinput = d.getElementById("textfield");
alert("You entered " + textinput.value + "\n");
e.preventDefault();
};
form.addEventListener("submit", submitHandler, false);
};
d.addEventListener("DOMContentLoaded", init, false);
})(document);
</script>
</head>
<body>
<form id="theform" action="#">
<label for="textfield">Enter text here...</label>
<input id="textfield" type="text" >
<input type="submit" value="Submit" >
</form>
</body>
</html>

Categories

Resources