...

View Full Version : passing data between forms not working with added Javascript



mulder
01-16-2012, 09:21 PM
I'm stuck! - I have a search form, that when data is entered and submitted, the data is sent to another page! - this works well see eg below.

http://www.nctfleetlist.co.uk/normal.php

My problem is, I have a piece of javascript called "greybox", it basically loads an external page, dimming the first page and focusing on the external - see eg below.

http://www.nctfleetlist.co.uk/div4.php

The new window can be called via either a href "rel" link or an "onclick" command.

I have tried implementing the the two together but when I use the javascript to call the new window the data from the original form is not passed over! - this is what I have so far...

example 1 - using onclick command (http://www.nctfleetlist.co.uk/eg1.php)


<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit" onclick="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
</form>



example 2 - using onsubmit within the form tag (http://www.nctfleetlist.co.uk/eg2.php)


<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post" onSubmit="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit">
</form>

example 3 - using a javascript link to submit the form, adding a "rel" tag (http://www.nctfleetlist.co.uk/eg3.php)


<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<a href="#" onclick="document.forms[0].submit()" rel="gb_page_center[720, 300]">Search</a>
</form>


Any help is appreciated! :)

xelawho
01-16-2012, 11:05 PM
this requires a little reorganisation... if you are familiar with query strings you can stop reading now :D

if not, delete this bit:

<a href="div3.php" title="Search" rel="gb_page_center[720, 300]" class="font">Click here to search for a specific fleet number.</a>
from your div4 file, and add this:



<script>
function subMit(){
val=document.getElementById("num").value
location.href="div3.php?"+val; title="Search"; rel="gb_page_center[720, 300]";
}
</script>

<input type="text" id="num"/>
<input type="button" value="Search" onclick="subMit()"/>


then you have to reorder div3, basically like this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="http://www.nctfleetlist.co.uk/php/font.css"></style>

</head>
<body onload="show()">
<BR>
<center>

<div id="none" style="display:block">
</div>

<div id="100" style="display:none" class="fleetdiv"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">100</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">MX11 EGY</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">Integral</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">Wrightbus</font>
</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B37F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/demo.php"><font color="#336699">Demonstrators</a></a></font>
</TD> </tr>
</table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>&nbsp;
</td></tr>
</table>
</div>

<div id="120" style="display:none" class="fleetdiv"> <br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W599 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>&nbsp;
</td></tr>
</table>
</div>


<div id="121" style="display:none" class="fleetdiv"><br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W601 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>

<div id="122" style="display:none" class="fleetdiv"> <br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
<TR>
<TD>
<TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
<TR>
<TH class="titlebg" bgcolor="#336699" width="16%">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

</TH>
<TH class="titlebg" bgcolor="#336699" width="17%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

<FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
</TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
<FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

</TH>
</TR>
<TR>
<TD align="left" width="14%" bgcolor="#FFFFFF">
<FONT class="font">122</FONT></TD>
<TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF">
<FONT class="font">W602 PTO</FONT>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">M920</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<FONT class="font">OPTARE</font>

</TD>
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF">
<FONT class="font">B33F</font>
</TD>
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF">
<font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font>
</TD>
</tr></table>
</td>
</tr>
</table></div>
</center>


<script type="text/javascript">
var val=Number(self.location.search.slice(1));

var showndiv=false;
function show() {
document.getElementById('none').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
switch (val){
case 100:
showndiv='100'
break;
case 120:
showndiv='120'
break;
case 121:
showndiv='121'
break;
case 122:
showndiv='122'
break;
default:
document.getElementById('none').innerHTML="<font class=\"font\">Sorry, nothing found! Did you enter a 3 digit fleet number? e.g. \"754\"</font>"
return;
}
document.getElementById(showndiv).style.display = 'block';
}
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "100 120 121 122";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "";
}
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) {
document.getElementById(IDlist[i]).style.display = "none";
}
}
</script>
</body>
</html>


and then I think you're good to go... or did I just find a roundabout way of doing what you were already doing? :confused:

xelawho
01-17-2012, 07:19 AM
no... I looked again and it is a more roundabout way of doing the same thing :mad:

the closest I got was putting this in the div4 file (with div3 the way it is in my previous post):



<form name="form1" action="div3.php" method="post" onSubmit="return GB_show('Search', 'div3.php?121', this.href)">
<input type="text" id = "num" name="var1" value="">

<input type="submit" name="submit" value="submit">
</form>


which works (doesn't look great, but it works) but the 121 is hardcoded. Now, you can dynamically construct a form with javascript and usually enter variable values in there, like this:



<script>
function post_to_url() {
val=document.getElementById("num").value
var form = document.createElement("form");
form.name="form1"
form.setAttribute("method", "post");
form.setAttribute("action", "div3.php");
document.form1.appendChild(form);
form.onsubmit="return GB_show('Search', 'div3.php?'+val, this.href)"
form.submit();
}
</script>
<input type="text" id = "num" name="var1" value="">
<input type="button" onclick="post_to_url()" name="submit" value="submit">


but for some reason the onsubmit doesn't work, and so you just get the normal box, not the lightbox.

But I don't know too much about that stuff - maybe someone else can help you out.

mulder
01-17-2012, 05:05 PM
It is a more roundabout way of doing the same thing, however this is good as it is what I wanted in the first place (a results page that loaded the divs once a user searched from anywhere in the site) So I will drop the lightbox and use your first suggestion above.

Thank you so much for your help!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum