I want to have a textbox in my HTML page, and also an iframe. When the user types in a URL in the textbox and clicks Submit, the iframe navigates to that page. Is it possible?
Its very simple using jquery single line code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="application/javascript">
function navigate() {
$('#iframe1').attr('src', $('#ifrmsite').val());
return false;
}
</script></head>
<body>
Enter website url below:<br/>
<form onSubmit="return navigate();" method="get" action="">
<input type="text" value="http://www.w3schools.com/" name="ifrmSite" id="ifrmsite"/>
<input type="submit" value="Submit">
</form>
<br /><br />
<iframe name="iframe1" id="iframe1" src="" width="600" height="700" scrolling="auto">
</iframe>
</body>
</html>
If you don't want to use jquery:
<script type="application/javascript">
function submitStuff(){
document.getElementById('iFrame').src = 'http://' + document.theForm.url.value;
return false ;
}
</script>
<form name="theForm" method="post" onsubmit="return submitStuff();">
<input name="url" value="">
<input type="submit" name="submitButton" value="Submit">
</form>
<iframe id="iFrame" src="http://www.default.com"></iframe>
Related
I'm trying to make a csrf script which will send a post request without sending a referrer. My code :
<html>
<body>
<meta name="referrer" content="no-referrer">
<iframe style="display:none" name="csrf-frame"></iframe>
<form method='POST' action='https://www.example.com/test.php' target="csrf-frame" id="csrf-form">
<input type='hidden' name='x' value='y'>
<input type='submit' value='submit'>
</form>
<script>document.getElementById("csrf-form").submit()</script>
</body>
</html>
I'm trying to use this meta tag : <meta name="referrer" content="no-referrer">
but no succes, there still is a referrer in the post request.
I believe the problem here is that you put the <meta> tag inside the body. However, <meta> tags are always supposed to go inside the <head> element. You may instead want to put the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="no-referrer">
</head>
<body>
<iframe style="display:none" name="csrf-frame"></iframe>
<form method='POST' action='https://www.example.com/test.php' target="csrf-frame" id="csrf-form">
<input type='hidden' name='x' value='y'>
<input type='submit' value='submit'>
</form>
<script>document.getElementById("csrf-form").submit()</script>
</body>
</html>
There is more information about this at https://www.w3schools.com/tags/tag_meta.asp.
I have web page in which i have input field when i enter any data in textfield screens slides up i want to stop this slides,i have searches some people say it is by default in ipad you can not fix it any idea how tackle this issue.
here is my code
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script>
function test(){
alert("Working");
window.scrollTo(0,600);
}
</script>
</head>
<body>
<h1>Form Demo</h1>
<form>
<label for="name">Text Input:</label>
<input type="text" onKeyPress="test()" name="name" id="name" value="" style="margin:400px 0 0 0;" />
</form>
</body>
</html>
Disabled scrolling with this:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>
I have an index.php page in which, there is a login form.
Index.php:
<?php include_once("include/header.php");?>
</head>
<body>
<div class="mainContainer">
<div class="header"><!--Header start-->
<!--Inlcluding Login Barr-->
<?php include("include/loginBar.php");?>
<div class="clear"></div>
</div><!--Header end-->
<div class="centerContent"><!--Center content start-->
</div><!--center content end-->
<div class="clear"></div>
<?php include("include/footer.php");?>
</div>
</body>
</html>
header.php:
<?php session_start();
ob_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/mainStylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
footer.php
<? ob_end_flush(); ?>
loginBar.php
<div class="loginBar">
<form name="Login" id="Login" action="actions.php" method="post">
<span class="label">Login</span>
<input type="text" name="name" id="username" value="Username" onBlur="if(this.value==''){this.value=this.defaultValue;}" onFocus="if(this.value==this.defaultValue){this.value='';}" />
<input type="password" name="password" id="userpassword" value="Password" onBlur="if(this.value==''){this.value=this.defaultValue;}" onFocus="if(this.value==this.defaultValue){this.value='';}"/>
<input class="loginButton" id="loginButton" type="submit" value="Go" />
<input type="hidden" value="loginValues" name="login" id="login"/>
</form>
</div>
actions.php
<?php session_start();
echo $_POST['name']; echo $_POST['password'];
if(isset($_POST['login']) && $_POST['login']=="loginValues"){
echo "HAHAHAHAHA";
}
?>
The problem is, form values are echoed outside the IF block in actions.php page, but nothing works inside this block. That means form values are successfully transferred.
In firebug console, I see an error stating "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol."
I have tried all options and have placed this line after HEAD tag :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> , but nothing works.
Please help me. Thanks.
Unless it is just a typo in what you copy/pasted you have an input that isn't closed, which probably kills the input after it (login in this case).
<input class="loginButton" id="loginButton" type="submit" value="Go"
should be
<input class="loginButton" id="loginButton" type="submit" value="Go" />
Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Magic Genie</title>
<link href="java-game.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="java-game.js"></script>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form>
Your question: <input type="text" name="question" size="40">
<input type="button" name="ask" value="Ask the Genie" onClick="if (this.form.question.value!='') this.form.answer.value = genie();">
<br />
<br />
Your magic genie says: <input type="text" name="answer" size="50">
</form></p>
</div>
</body>
</html>
Well your problem is you have no doctype, html, head or body tag.
Your page will not validate, simply because you are incorrectly nesting/closing tags, and some tags do not have correct attributes to them.
First of ALL things you are talking about xhtml and added xhtml-1.0-strict tag, but your heading states: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
I've never in my life seen <body class="oneColFixCtr"> class, being added to <body>. You can manipulate <body> in CSS by: body {background: red;}.
There were 1x <div> tags missing! There was 1x extra </p>. Lots of tags were not ended with /. <form> was missing method and action parameter!
Also, if you want 100% perfect validation, you cant use onclick="". I added jQuery to your script.
Live example: http://kopli.pri.ee/stackoverflow/5653786.php (click here to validate)
Full version of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I am trying to validate this form page xhtml and it will not validate - Kalle H. Väravas</title>
<link href="java-game.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="java-game.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form method="post" action="">
Your question: <input type="text" name="question" size="40" />
<input type="button" name="ask" value="Ask the Genie" /><br />
<br />
Your magic genie says: <input type="text" name="answer" size="50" />
</form>
</div>
</div>
<script type="text/javascript">
$('input[name=ask]').click(function () {
if ($(this).form.question.value!='') {
$(this).form.answer.value = genie();
}
});
</script>
</body>
</html>