HTML Frame problem - html

Hi got a simple frame problem. I have 2 frames a top and a bottom frame. A html file opens in the top frame(final.html) and a php file in the bottom frame(final.php)
When i enter data it the top frame it should post to the bottom frame but it doesnt. It just loads final.php in the top frame with the search results.
The frame html code follows:
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="50, 100">
<FRAME src="final.html">
<Frame src="final.php">
</FRAMESET>
<NOFRAMES>
<P>This frameset document contains:
</NOFRAMES>
</FRAMESET>
</HTML>
Final.html coding:
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Database search</h1>
<form action="final.php" method="post">
Choose Search Type:<br />
<select name="searchtype">
<option value="pdb_code">PDB Code</option>
<option value="smile_string">Smile String</option>
</select>
<br />
Select Operator Type:<br />
<select name="operator">
<option value="LIKE">Contains</option>
<option value="=">=</option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type=""text" size="40"/>
<br />
<input type="submit" name="submit" value="Search"/>
</form>
</body>
</html>

You need to give the frame a name and then target it in your form.

To illustrate David's answer, use this code for your frameset :
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET rows="50, 100">
<FRAME src="final.html" name="top">
<Frame src="final.php" name="bottom">
</FRAMESET>
<NOFRAMES>
<P>This frameset document contains:
</NOFRAMES>
</FRAMESET>
</HTML>
And this code for final.html:
<html>
<head>
<title>Search</title>
</head>
<body>
<h1>Database search</h1>
<form action="final.php" method="post" target="bottom">
Choose Search Type:<br />
<select name="searchtype">
<option value="pdb_code">PDB Code</option>
<option value="smile_string">Smile String</option>
</select>
<br />
Select Operator Type:<br />
<select name="operator">
<option value="LIKE">Contains</option>
<option value="=">=</option>
</select>
<br />
Enter Search Term:<br />
<input name="searchterm" type=""text" size="40"/>
<br />
<input type="submit" name="submit" value="Search"/>
</form>
</body>
</html>

Related

How would I get these two drop down menus right next to each other?

On my website Website I can't seem to get these drop down menus right next to each other, how would I do that?
This is the code I have...
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$MODULE_NAME$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
$GLOBAL_AHEADER$
<!-- <middle> -->
<div id="maincol">
$MODULE_SEARCH_FORM$
<!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><!--<s5176>-->MAIN<!--</s>--> ยป <!--<s5208>-->MOVIES<!--</s>--></td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <!--<s5202>-->Add new entry<!--</s>--> ]<?endif?></td>
</tr>
</table>
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<div>
<form name="yearselect">FILTER BY:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</form>
</div><div>
<form name="genreselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</form>
</div>
<td align="right"><?if($PAGE_SELECTOR$)?><!--<s3015>-->Pages<!--</s>-->: $PAGE_SELECTOR$<?endif?></td>
</tr>
</table>
<hr />
$BODY$
<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?> <!-- </body> -->
</div>
<div id="sidebar">
<div id="soc">
<?if($RSS_LINK$)?> <?endif?>
</div>
$GLOBAL_CLEFTER$
</div>
<div class="clear"></div>
<!-- </middle> -->
</div>
</div>
$GLOBAL_BFOOTER$
</div>
</div>
</div>
</body>
</html>
That is the full source of the code but, I only need help with part..
Here's a valid HTML5 solution to your problem, fiddle
<form>
<table>
<tr>
<td>FILTER BY:
<select name="yearselect">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</td>
<td>
<select name="genreselect">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</td>
</tr>
</table>
</form>
Avoid table!! Refer this fiddle
Markup:
<div>
<form name="yearselect">FILTER BY:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</form>
</div><div>
<form name="genreselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</form>
</div>
CSS:
div {
display: inline-block;
width: 50%;
}
So you have the table stretching all the way across the div, and each drop down centered in each column. You need to set a max width on the table's div so that it will only spread a certain width and then the drop downs will not spread further apart from that. Or, you could put them in the same column (so basically no table) and justify them to one side.

Access a form value in one frame from another frame

I have created two frames with two different forms as shown in link below:
http://demo.4page.info/framedemo/main.html (Please view in IE)
Now, when I click on Get Text button, a predefined value should display in the text box above it, and then when I click on the Copy Here button the same value from textbox1 should display in the text box above it.
So my question is how to access that value in second frames form by clicking copy here button?
Below is my code:
<!--main.html-->
<html>
<head>
<frameset cols="50%, 50%">
<frame name="f1" src="left.html" />
<frame name="f2" src="right.html" />
</frameset>
</head>
</html>
This successfully divides page into two frames.
<!--left.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
dim msg
msg="Hello"
function func()
document.form1.text1.value=msg
end function
</script>
</head>
<body>
<form name="form1">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text1" /></td></tr>
<tr><td><input type="button" value="Get Text" onClick="func()" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
left.html is working properly and accessing value on button click.
<!--right.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
</script>
</head>
<body>
<form name="form2">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text2" /></td></tr>
<tr><td><input type="button" value="Copy Here!" onClick="??????" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
What do I have to put in right.html?
You can access content of other frames via the frames property of the parent object, so something like this should work:
<script type="text/vbscript">
Sub CopyHere
document.form2.text2.value = parent.frames("f1").document.form1.text1.value
End Sub
</script>
...
<form name="form2">
<input type="text" name="text2" /></td></tr>
<input type="button" value="Copy Here!" onClick="CopyHere()" />
</form>
Note that you may need to adjust your browser's security settings for the code to work.
On a more general note I'd recommend using id attributes instead of name attributes, because the latter is deprecated.

iframe navigation via textbox

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>

Aligning a Button with a Select Box (HTML Forms)

I am trying to create a Search panel on a page, consisting of three select boxes (dropdowns) and a button. however I am unable to get them to line-up. This must have been doen thousands of times before yet it is giving me so much grief.
In an effort to simplify it and understand what is going on, I created the following minimalist page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1">
<td bgcolor="#FF0000">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
</td>
<td bgcolor="#FF0000">
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C">
</td>
</form>
</tr>
</table>
</body>
</html>
The result looks like this in Firefox,
this in Chrome,
this in IE9,
and this in IE9 Compatibiity View.
Sorry, I'm not allowed to post images as I'm a newbie, but take it from me, they're all different. I haven't even dared to look at it in older versions of IE!
How can I get the select box to vertically align centrally with the button in all browsers? I must be missing something obvious: it's not rocket surgery!
http://i.stack.imgur.com/LI9vf.gif
http://i.stack.imgur.com/HcCKN.gif
http://i.stack.imgur.com/bHAkP.gif
http://i.stack.imgur.com/PUXkl.gif
You need to play with line-height and vertical-align...
And theres no real need for a table there, well at least not in the simplified example you posted:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="search1" id="search1">
<div style="background-color:red;padding:0;height:30px;line-height:30px;">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;">
</div>
</form>
</body>
</html>

html page with frameset tag not working

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.