Develop Reference

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.

clearing textarea from outside php file doesn't work

I've looked around trying to find a solution to clear a textarea from an outside php file.
Basically this is my form:
<iframe name="post_target" style="display:none;"></iframe>
<form action="post_status.php" method="post" target="post_target">
<div class="status_update">
<div id="update_type"></div>
<?php load_picture($_SESSION['profile_picture']); ?>
<textarea class="scrollabletextbox" placeholder="Share your thoughts" onkeyup="textAreaAdjust(this)" name="status_update" id="status_update"></textarea>
</div>
<div id="update_options">
<button id="post" name="post" onclick="javascript:postUpdate()">Post</button>
</div>
</form>
And it calls post_status.php who's structure is basically:
<?php
function post_status($conn, $status){
// function
}
$status = $_POST['status_update'];
post_status($conn, $status);
?>
<script type="text/javascript">
// clear textarea
document.getElementById('status_update').value = "";
alert("passed clear");
</script>
What happens is the following : the php function executes properly, but the JS part doesn't. If I leave out ' .value = "" ' it works fine, if I don't then the alert never shows.
Does anyone have any idea concerning this issue ?

You use status_update on class attribute (div) and id attribute (textarea)
you need to make a choice.

Javascript code not being executed on button click

I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?

what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.

Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.

Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.

Targeting iframe src from user input in javascript form

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>

jquery change not fire

I've a problem with jquery change!
This is my .php page
<input id="numero_preventivi" style="display: none;" value="<?php echo $numeriPreventivi['preventivi']; ?>"/>
<input id="numero_preventivi_new" style="display: none;" value="0"/>
<script type="text/javascript">
$(function (){
var num_pr = $("#numero_preventivi").val();
var preventivi = new flipCounter('preventivi', {value: num_pr, inc:0, pace:600, auto:false});
$("#numero_preventivi_new").change(function (){
var num_pr_new = $("#numero_preventivi_new").val();
preventivi.incrementTo(num_pr_new);
});
});
And this is my .js function
$('#numero_preventivi_new').val(text[0]).change();
When my function, in .js page, change value of my hidden div I would fire .change(), but I can't run the function into jquery code. Where is the problem?

Changing the attribute doesn't change the value. Try this:
$('#numero_preventivi_new').val(text[0]).change();
Working demo: http://jsbin.com/acojed