Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I turn this form function into a javascript?

Status
Not open for further replies.
cbsarge

cbsarge

IS-IT--Management
Jun 20, 2001
219
US
I have the included page. I'd like to be able reuse the input text in multiple iframes on the same page. To do this I need to make the form into an onsubmit type of event (I think) and dont know where to start! Any help would be greatly apreciated!

Code: 
<head>
<script type="text/javascript">
function show(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'inline';
}
}
function hide(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'none';
}
}
</script>
</head>
<body>
<div class="style1">
<style type="text/css">
iframe { display: none; }
.style1 {
	text-align: center;
}
</style></div>
<B>Enter text to find</B>:<BR>
<FORM method=GET action="[URL unfurl="true"]http://search.yahoo.com/bin/search?"[/URL] target="a">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Search">
</td></tr></TABLE>
</FORM>
<table cellpadding='0' cellspacing='0' style='padding:0px;margin:0px;' id='std-table-buttons' width='100%'><tr>
<tr>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>Yahoo</b>
<input type="button" value="Show" onclick="show('a');">
<input type="button" value="Hide" onclick="hide('a');"></td></tr></table>
<iframe src="" id='a' width='100%' height='400' name='a'></iframe><hr />

[!]The AutoSavers![/!] [2thumbsup]
 
Sort by date Sort by votes
Can you give a better description of what it is you want? At the moment, you seem to be asking for different things:

- Turning a form function into JavaScript (when the only functions on your page are already in JavaScript)

- Re-using form text in different iframes (this is also possible, assuming no cross-domain security issues)

If you simply want to be able to use the text entered in the text field within other iframes on the same page, then they should be able to access your frame using "parent", so "parent.document.forms[0].elements['ie']" would also work, for example.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I'm trying to make a search page where a user can input the search term and in each of the iframes a different search engine's results will display. I can't use my form because it can only have one action asigned to it to populate 1 iframe. I figured javascript would be the way to go but, don't know how to put it together.

I thought I could have a script that on the onsubmit event apended the search variable to the predefined url's and have each of them target an iframe by id.

I know this isn't real code but something like this:

Code: 
<script>
function = searchthing()
yahoo = "[URL unfurl="true"]http://search.yahoo.com"[/URL]
google = "[URL unfurl="true"]http://search.google.com"[/URL]
target iframe('a') = yahoo + searchvar (I know this isn't how it works!)
target iframe('b') = google + searchvar
etc.
</script>
</script>

[!]The AutoSavers![/!] [2thumbsup]
 
Upvote 0 Downvote
I'm still not sure how to build the javascript. My first try is (of course) not working. Can someone help?

Thanks!
Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
function show(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'inline';
}
}
function hide(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'none';
}
}
</script>
<script type="text/javascript">
function filliframes() {
frames['a'].location.href = '"[URL unfurl="true"]http://search.yahoo.com/bin/search?p="'[/URL] + searchvar +;
frames['b'].location.href = '"[URL unfurl="true"]http://www.google.com/search?q="'[/URL] + searchvar +;
frames['c'].location.href = '"[URL unfurl="true"]http://search.msn.com/results.aspx?q="'[/URL] + searchvar +;
frames['d'].location.href = '"[URL unfurl="true"]http://www.altavista.com/web/results?q="'[/URL] + searchvar +"
}
</script>
</head>
<body>
<form NAME="frm" METHOD="post">
<input NAME="searchvar" VALUE=""><img src="/images/submit.gif" ONCLICK="javascript:filliframes()">
<div class='style1'>
<style type='text/css'>
iframe { display: none; }
.style1 {
	text-align: center;
}
</style></div>
<table cellpadding='0' bgcolor='gray' cellspacing='0' style='padding:0px;margin:0px;' id='std-table-buttons' width='100%'><tr>
<tr>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>Yahoo</b>
<input type="button" value="Show" onclick="show('a');">
<input type="button" value="Hide" onclick="hide('a');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>Google</b>
<input type="button" value="Show" onclick="show('b');">
<input type="button" value="Hide" onclick="hide('b');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>MSN</b>
<input type="button" value="Show" onclick="show('c');">
<input type="button" value="Hide" onclick="hide('c');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>AltaVista</b>
<input type="button" value="Show" onclick="show('d');">
<input type="button" value="Hide" onclick="hide('d');"></td>
<td style="padding:0px;margin:0px;height:0px" align="left" valign='top' width="99%">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr></tr></table>
<iframe src='[URL unfurl="true"]http://search.yahoo.com/bin/search?p='[/URL] width='100%' height='400' name='a' id='a'></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr></tr></table>
<iframe src='[URL unfurl="true"]http://www.google.com/search?q='[/URL] width='100%' height='400' name='b' id='b'></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr></tr></table>
<iframe src='[URL unfurl="true"]http://search.msn.com/results.aspx?q='[/URL] width='100%' height='400' name='c' id='c'></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr></tr></table>
<iframe src='[URL unfurl="true"]http://www.altavista.com/web/results?q='[/URL] width='100%' height='400' name='d' id='d'></iframe>
<hr />
</body>
</html>

[!]The AutoSavers![/!] [2thumbsup]
 
Upvote 0 Downvote
The lines in the "filliframes" function are all invalid. They all have trailing "+" signs, and the double quotes are not needed. Also, "searchvar" is undefined.

I suggest installing Firefox and the Firebug plugin - it'll show you these errors straight away.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks to all who offered help! I've included the basic, working version and the live version is here:
I haven't linked the other pages in my site to it yet.

Thanks again!

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
function show(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'inline';
}
}
function hide(which) {
var hide = new Array();
hide = document.getElementsByName(which);
for (i=0; i<hide.length; i++) {
hide[i].style.display = 'none';
}
}
</script>
<script type="text/javascript">
<!--
function fill_iframes() {
var e = document.getElementById('searchvar');
var searchTerm = "";
if(e != null) {
  searchTerm = e.value;
}
window.frames['a'].location.href = '[URL unfurl="true"]http://search.yahoo.com/bin/search?p='+searchTerm;[/URL]
window.frames['b'].location.href = '[URL unfurl="true"]http://www.google.com/search?q='+searchTerm;[/URL]
window.frames['c'].location.href = '[URL unfurl="true"]http://search.msn.com/results.aspx?q='+searchTerm;[/URL]
window.frames['d'].location.href = '[URL unfurl="true"]http://www.altavista.com/web/results?q='+searchTerm;[/URL]
}
//-->
</script>
<script type="text/javascript">
function reset_searchvar() 
{
  var e = document.getElementById('searchvar');
  if(e != null) {
    e.value = "";
  }
}
</script>
</head>
<body>
<p>
Search for: <input type="text" name="searchvar" id="searchvar" ><input type="submit" value="Search" onclick="javascript:return fill_iframes()" />
<input type="submit" value="Reset" onclick="javascript:reset_searchvar();" />
</p>
<div class='style1'>
<style type='text/css'>
iframe { display: none; }
.style1 {
	text-align: center;
}
</style></div>
<table cellpadding='0' bgcolor='gray' cellspacing='0' style='padding:0px;margin:0px;' id='std-table-buttons' width='100%'><tr>
<tr>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>Yahoo</b>
<input type="button" value="Show" onclick="show('a');">
<input type="button" value="Hide" onclick="hide('a');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>Google</b>
<input type="button" value="Show" onclick="show('b');">
<input type="button" value="Hide" onclick="hide('b');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>MSN</b>
<input type="button" value="Show" onclick="show('c');">
<input type="button" value="Hide" onclick="hide('c');"></td>
<td style="padding:0px;margin:0px;" align="center" width="200px" valign='top' nowrap="nowrap"><b>AltaVista</b>
<input type="button" value="Show" onclick="show('d');">
<input type="button" value="Hide" onclick="hide('d');"></td>
<td style="padding:0px;margin:0px;height:0px" align="left" valign='top' width="99%">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id="std-table-buttons" width="100%"><tr></tr></table>
<iframe src="[URL unfurl="true"]http://search.yahoo.com/bin/search?p="[/URL] width="100%" height="400" name="a" id="a"></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id="std-table-buttons" width="100%"><tr></tr></table>
<iframe src="[URL unfurl="true"]http://www.google.com/search?q="[/URL] width='100%' height='400' name="b" id="b"></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id="std-table-buttons" width="100%"><tr></tr></table>
<iframe src="[URL unfurl="true"]http://search.msn.com/results.aspx?q="[/URL] width="100%" height="400" name="c" id="c"></iframe><hr />
<table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id="std-table-buttons" width="100%"><tr></tr></table>
<iframe src="[URL unfurl="true"]http://www.altavista.com/web/results?q="[/URL] width="100%" height="400" name="d" id="d"></iframe>
<hr />
</body>
</html>

[!]The AutoSavers![/!] [2thumbsup]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
592
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
245
Daniel K
Daniel K
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
848
xwb
xwb
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
582
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top