Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •