I want my iFrame window to show the URL I enter from the Form Text box, To that I want the iframe src="" to be changed to the form field input. How can I do that? Here is a sample code that I intent to use.
<html>
<head>
<title>Blah.</title>
<link href="style.css"rel="stylesheet" type="text/css" />
</head>
<body>
<form>
Enter URL: <input type="text" />
<input type="submit" value="GO" />
</form>
<iframe src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Try this.
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
Related
any ideas how to have say a set url for iframe like mysite.com/ and then this input form would add the input field to the end like mysite.com/txtsrc?
<html>
<head>
<title>Blah.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes"></iframe>
</body>
</html>
so rather than user inputting the full src i want mysite.com/then the form input after that but so user would not have to put mysite.com/
thanks in advance
i have tried but failed anyone able to help?
I am trying to build a todo app based on Materialize-css. I want the input-field to be on the same line, as the submit button which should include a materialize icon. That's what I have currently:
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<input type ="submit" class ="btn waves-effect waves-light inline" value = "Submit"/>
</div>
</div>
Here's a picture about how it looks currently. I just don't know how to add the icon to the submit button, because there is no opening and closing tag, it's just an input tag. I need that input-tag to be able to use php code after the submition.
Todo-App
You just have to replace the input tag with a button tag like in the example, hope it will help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper blue darken-3">
Charts
<!-- <i class="material-icons">menu</i> -->
<ul class="right hide-on-med-and-down">
<!-- <li>Sass</li> -->
</ul>
</div>
</nav>
<!-- <ul class="sidenav" id="mobile-demo">
<li>Sass</li>
</ul> -->
</header>
<main >
<div class="col s12">
Hinzufügen
<div class="input-field inline">
<input id="todo" type="email" class="validate">
<label for="todo">todo</label>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
I have an ionic 1 app that I'm working on updating.
One of the new requirements is that I add an 'x' on the right side of an input field.
I've tried a number of things and this is the closest I think I've gotten to the right implementation, but still doesn't work.
Any thoughts?
<form action="">
<input type="text" onfocus="this.placeholder = ''" style="border-top:none; border-left:none; border-right:none; border-bottom:solid gray 3px; background:transparent; margin-left:auto; margin-right:auto; text-align:center; font-size:1.2em; margin-bottom:20px; color:#acb2b4;" placeholder="{{profileEdit.userName}}" ng-model="profileEdit.theUserName">
<i class="icon ion-close" style="font-size:14px;" item-right></i>
</form>
You can use the list and item classes, along with item-icon-right class to achieve what you are looking for. Here is a working sample:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Input X Icon</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Input X Icon On Right</h1>
</ion-header-bar>
<ion-content>
<form>
<div class="card list">
<div class="item item-icon-right">
<input type="text" placeholder="Placeholder Goes Here">
<i class="icon ion-close"></i>
</div>
</div>
</form>
</ion-content>
</body>
</html>
I have this in a bootstrap form:
Name
"/>
<div class="form-group ">
<label class="control-label col-sm-3 col-xs-3 col-md-3 col-lg-3" for="email">E-mail</label><?php echo #$_SESSION['ctform']['email_error'] ?>
<div class="col-sm-7 col-xs-7 col-md-7 col-lg-7">
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</div>
I cannot define the height of my and as a result I have a lot of space (200px) between the fields. Any idea how to solve this? Thank you.
Try to do this way:
var el = document.querySelector(".form-group");
el.style.width = "200px";
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<?php echo #$_SESSION['ctform']['email_error'] ?>
<input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(#$_SESSION['ctform']['ct_email']) ?>"/>
</div>
</form>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FENK34MFH506
I have the following code that I found on here.
If I type in http://google.com
It loads google.com into the iframe.
My question is,
How can I have more than 1 iframe to be filled
Can I have it so that I do not have to put in http:// just the domain, google.com
Thanks, Here is the code:
<html>
<head>
<title>Blah</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
Thanks alot. That is exactly what I was looking for! Here it is completed:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme3").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme4").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme5").src = 'http://' +
document.getElementById("txtSRC").value;
document.getElementById("myIfreme6").src = 'http://' +
document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<div style="clear:both">320 width</div>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="480" width="320"
scrolling="yes"></iframe>
<div style="clear:both">480 width</div>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="480" width="480"
scrolling="yes"></iframe>
<div style="clear:both">640 width</div>
<iframe id="myIfreme3" src="" frameborder="0" marginwidth="0" height="480" width="640"
scrolling="yes"></iframe>
<div style="clear:both">800 width</div>
<iframe id="myIfreme4" src="" frameborder="0" marginwidth="0" height="480" width="800"
scrolling="yes"></iframe>
<div style="clear:both">1024 width</div>
<iframe id="myIfreme5" src="" frameborder="0" marginwidth="0" height="480" width="1024"
scrolling="yes"></iframe>
<div style="clear:both">1280 width</div>
<iframe id="myIfreme6" src="" frameborder="0" marginwidth="0" height="480" width="1280"
scrolling="yes"></iframe>
</body>
</html>
THANKS alfasin - You are AWESOME!
Try:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Blah</title>
<script type="text/javascript">
function SetSrc()
{
document.getElementById("myIfreme1").src = document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = document.getElementById("txtSRC").value;
}
</script>
</head>
<body>
<form>
Enter URL:
<input type="text" id="txtSRC" />
<input type="button" value="GO" onclick="SetSrc()" />
</form>
<iframe id="myIfreme1" src="" frameborder="0" marginwidth="0" height="500" width="480">
</iframe>
<iframe id="myIfreme2" src="" frameborder="0" marginwidth="0" height="500" width="840">
</iframe>
</body>
</html>
If you don't want the user to enter http:// you can do:
...
<form>
Enter URL: http://
<input type="text" id="txtSRC" />
...
and
function SetSrc()
{
document.getElementById("myIfreme1").src = 'http://' + document.getElementById("txtSRC").value;
document.getElementById("myIfreme2").src = 'http://' + document.getElementById("txtSRC").value;
}
BTW, Google will block you from using www.google.com in an iframe.