Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-16-2012, 09:21 PM   PM User | #1
mulder
New Coder

 
Join Date: Jan 2012
Posts: 30
Thanks: 10
Thanked 0 Times in 0 Posts
mulder is an unknown quantity at this point
passing data between forms not working with added Javascript

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)

Code:
<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)

Code:
<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)

Code:
<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!
mulder is offline   Reply With Quote
Old 01-16-2012, 11:05 PM   PM User | #2
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
this requires a little reorganisation... if you are familiar with query strings you can stop reading now

if not, delete this bit:
Code:
<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:

Code:
<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:

Code:
<!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?

Last edited by xelawho; 01-16-2012 at 11:11 PM..
xelawho is offline   Reply With Quote
Old 01-17-2012, 07:19 AM   PM User | #3
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 453 Times in 451 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
no... I looked again and it is a more roundabout way of doing the same thing

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

Code:
<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:

Code:
<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.
xelawho is offline   Reply With Quote
Old 01-17-2012, 05:05 PM   PM User | #4
mulder
New Coder

 
Join Date: Jan 2012
Posts: 30
Thanks: 10
Thanked 0 Times in 0 Posts
mulder is an unknown quantity at this point
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!!!
mulder is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 02:05 AM.


Advertisement
Log in to turn off these ads.