#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0

    Make drop down box at top of form, appear at bottom?


    Hi, I have inherited a website and I need a quick fix to a problem here, I am learning javascript but am only at the very beginning. In the code below, I need the top drop down box and the accompanying "View" button to appear to the user at the bottom of the form rather than the top but don't know how to do this. When I past the code for the top drop down and "view" button to the bottom of the form, just before the </form> tag, then I get an error, so Im guessing that the code needs to be in a certain order, how can I get around this? any help greatly appraciate! thank you so much!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ LANGUAGE="JScript" %>
    
    <!--METADATA TYPE="typelib" uuid="00000206-0000-0010-8000-00AA006D2EA4" -->
    
    
    <HTML>
    
    
        <head>
        <title>matrixformfilter</title>
        <style type="text/css">
        a{border:1px solid white;}
        a:hover{border:1px solid purple;}
        img{border:none;}</style>
            
    
    <script type="text/javascript">
    var theoptions = new Array();
    
    function populatefiltered()
    {
    var froms=document.getElementById("fulllist");
    
    
    var thedomainobj=document.getElementById("filterdomain")
    var thedomain=thedomainobj.options[thedomainobj.selectedIndex].text
    
    var thetrigramobj=document.getElementById("filtertrigram");
    var thetrigram=thetrigramobj.options[thetrigramobj.selectedIndex].text
    var thedatabaseobj=document.getElementById("filterdatabase");
    var thedatabase=thedatabaseobj.options[thedatabaseobj.selectedIndex].text;
    var thedaterangeobj=document.getElementById("filterdaterange");
    var thedaterange=thedaterangeobj.options[thedaterangeobj.selectedIndex].text.replace(/^\s*/,"").replace(/\s*$/,"");
    
    
    // set up theoptions on the first call
    if (theoptions.length == 0) 
    {
    for (var i=0;i< froms.length ;i++)
    {
    theoptions[i] = froms.options[i].text
    }
    }
    
    
    // remove options
    var toslength=froms.length
    for (var i=0;i < toslength;i++)
    {
    froms.remove(0);
    }
    
    var iii = 10
    
    for (var i=0;i< theoptions.length ;i++)
    {
    var thetext = theoptions[i];
    var ss = thetext.split(" - ");
    var compdb=ss[1].replace(/^\s*/,"").substring(3,10).replace(/\s*$/,"");
    var compdr=ss[2].replace(/^\s*/,"").replace(/\s*$/,"");
    
    
    
    if ( (thetext.substring(0,1) == thedomain || thedomain=="All") && 
         (thetext.substring(4,7) == thetrigram || thetrigram=="All") && 
         (compdb == thedatabase || thedatabase=="All") &&
         (compdr == thedaterange || thedaterange=="All")
     )
    {
    var opt=document.createElement('option');
    opt.text=thetext;
    froms.add(opt);
    }
    }
    }
    function populateall()
    {
    var thedomainobj=document.getElementById("filterdomain")
    thedomainobj.selectedIndex=0
    
    var thetrigramobj=document.getElementById("filtertrigram");
    thetrigramobj.selectedIndex=0;
    var thedatabaseobj=document.getElementById("filterdatabase");
    thedatabaseobj.selectedIndex=0;
    var thedaterangeobj=document.getElementById("filterdaterange");
    thedaterangeobj.selectedIndex=0;
    
    populatefiltered();
    }
    </script>
    
    
    
    
        </HEAD>
    
    
    
    
    <br />
    
        <body style="background-image:url(images/bg.gif); background-repeat:repeat-x, repeat-y;">
        <div style="background-color:White; width:90%; margin-right:auto; margin-left:auto; text-align:left; margin-top:3%; border:2px solid black;">
        <div style="margin-right:auto; margin-left:300px; text-align:left; border: 10px;">
    <br />
    
            
            
           
        
    <%
    var pageroles;
    pageroles="CTOMatrix";
    %>
    
    <!--#include file="openconnection.asp"-->
       
    <%
    			var oRssource;
    		        var oRsdomain;
    			
    			oCmd.CommandText = "select distinct nm.domain,cast(nm.source as char(10)),nm.daterangeindicator, " +
    						 "convert(varchar(30),dri.startdatetime,121)," + 
    						 "convert(varchar(30),dri.enddatetime,121)" +
    						 " from newmatrix nm ,newmatrixdaterange dri" +
    						 " where nm.daterangeindicator = dri.daterangeindicator" +
    						 " and nm.domain=dri.domain" +
    						 " order by 1,2,3";
    			oRssource = oCmd.Execute();
    			%>
    
    
         		
    Please select required domain, source and date range   <!--<A HREF="frontpage.asp"><font color="000033", size="4"><b>home</b></font></A>-->
    <BR><br />
    You can filter the list using the filter selection lists and then click <b>"Show Filtered List"</b> followed by <b>"View"</b><br><br>
    
    (The Source drop down box displays the filtered selections from the further four drop down boxes below it.)
    <br />
    <BR>
    <table border="0">
    <FORM ID="matrixformfilter" ACTION ="matrix.asp" >
    <tr>
    <td>
    <b><font size="4">Source</font></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <SELECT ID="fulllist" NAME="source" SIZE="1" style="display:none">
    <%while (!oRssource.eof) { %>
    <OPTION  ><% = oRssource(0) + " - " + oRssource(1) + " - " + oRssource(3) + " to " + oRssource(4) +";" + oRssource(2)%>
    <% oRssource.MoveNext();
    			} 
    %>
    </SELECT>
    </td>
    <td>
    
    <INPUT TYPE="submit" VALUE="View">&nbsp; <!--(xxxTOTALS give values for the whole estate)-->
    </td>
    </tr>
    </table>
    <BR><BR>
    <b><font size="4">Filters:</font></b>  
    <BR><BR>
    
    <b>Domain</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT ID="filterdomain" NAME="Domain" SIZE="1">
    <OPTION> All
    <% oRssource.close();
    oCmd.CommandText = "select distinct domain from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    <BR><BR>
    <b>Trigram</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT ID="filtertrigram" NAME="trigram" SIZE="1">
    <OPTION> All
    <% oRssource.close();
    oCmd.CommandText = "select distinct substring(source,1,3) from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    <BR><BR>
    <b>Database</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <SELECT ID="filterdatabase" NAME="database" SIZE="1">
    <OPTION>All
    <% oRssource.close();
    oCmd.CommandText = "select distinct rtrim(substring(source,4,7)) from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    &nbsp;&nbsp;&nbsp;&nbsp;(Selecting "TOTALS" displays stats for the whole estate, ignoring the trigram)
    
    <BR><BR>
    <b>Date Range</b>&nbsp;&nbsp;    <SELECT ID="filterdaterange" NAME="daterange" SIZE="1">
    <OPTION>All
    <% oRssource.close();
    oCmd.CommandText = 	"select distinct nm.daterangeindicator," +
    			"convert(varchar(30),dri.startdatetime,121)," + 
    			"convert(varchar(30),dri.enddatetime,121)" +
    			" from newmatrix nm ,newmatrixdaterange dri" +
    			" where nm.daterangeindicator = dri.daterangeindicator" +
    			" order by 1 DESC,2 DESC";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(1) + " to " + oRssource(2) +";" + oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    
    
    <BR><BR>
    <INPUT TYPE="button" VALUE="Show Filtered List" onclick="populatefiltered();">
    <!--<INPUT TYPE="button" VALUE="Show All" onclick="populateall();">-->
    
    </FORM>
    
    
    
    		  <%
    			oRssource.close();
    		 %>
    <!--#include file="closeconnection.asp"-->
    
        </BODY>
    </HTML>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Please, can anybody help with this? I really need to get it done, or at least an explanation as to why I can't move the top drop down box to the bottom of the form... I know it looks like theres a lot of code there because I posted the full web page source, but its just the FORM code that matters obviously...

    Many Thanks for any help at all!!
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    ANYONE?? please help!! It is the code below that is responsible for the drop down list (as you can see "FULLLIST") and button, that I want to appear at the bottom of the form rather than the top. However, i have tried this by copying the code below from the top of the <FORM> code, to the bottom of it, and that doesn't work, and I am guessing that this is something to do with the order of the code, in that the code below NEEDS to go at the top of the form.

    BUT, how can I get around this, how can I make this list appear below the other boxes, at the bottom of the form??

    Thanks again.

    Code:
    <SELECT ID="fulllist" NAME="source" SIZE="1" style="display:none">
    <%while (!oRssource.eof) { %>
    <OPTION  ><% = oRssource(0) + " - " + oRssource(1) + " - " + oRssource(3) + " to " + oRssource(4) +";" + oRssource(2)%>
    <% oRssource.MoveNext();
    			} 
    %>
    </SELECT>
    </td>
    <td>
    
    <INPUT TYPE="submit" VALUE="View">
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    103
    Rep Power
    9
    something like that

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ LANGUAGE="JScript" %>
    
    <!--METADATA TYPE="typelib" uuid="00000206-0000-0010-8000-00AA006D2EA4" -->
    
    
    <HTML>
    
    
        <head>
        <title>matrixformfilter</title>
        <style type="text/css">
        a{border:1px solid white;}
        a:hover{border:1px solid purple;}
        img{border:none;}</style>
            
    
    <script type="text/javascript">
        var theoptions = new Array();
    
        function populatefiltered() {
            var froms = document.getElementById("fulllist");
    
    
            var thedomainobj = document.getElementById("filterdomain")
            var thedomain = thedomainobj.options[thedomainobj.selectedIndex].text
    
            var thetrigramobj = document.getElementById("filtertrigram");
            var thetrigram = thetrigramobj.options[thetrigramobj.selectedIndex].text
            var thedatabaseobj = document.getElementById("filterdatabase");
            var thedatabase = thedatabaseobj.options[thedatabaseobj.selectedIndex].text;
            var thedaterangeobj = document.getElementById("filterdaterange");
            var thedaterange = thedaterangeobj.options[thedaterangeobj.selectedIndex].text.replace(/^\s*/, "").replace(/\s*$/, "");
    
    
            // set up theoptions on the first call
            if (theoptions.length == 0) {
                for (var i = 0; i < froms.length; i++) {
                    theoptions[i] = froms.options[i].text
                }
            }
    
    
            // remove options
            var toslength = froms.length
            for (var i = 0; i < toslength; i++) {
                froms.remove(0);
            }
    
            var iii = 10
    
            for (var i = 0; i < theoptions.length; i++) {
                var thetext = theoptions[i];
                var ss = thetext.split(" - ");
                var compdb = ss[1].replace(/^\s*/, "").substring(3, 10).replace(/\s*$/, "");
                var compdr = ss[2].replace(/^\s*/, "").replace(/\s*$/, "");
    
    
    
                if ((thetext.substring(0, 1) == thedomain || thedomain == "All") &&
         (thetext.substring(4, 7) == thetrigram || thetrigram == "All") &&
         (compdb == thedatabase || thedatabase == "All") &&
         (compdr == thedaterange || thedaterange == "All")
     ) {
                    var opt = document.createElement('option');
                    opt.text = thetext;
                    froms.add(opt);
                }
            }
        }
        function populateall() {
            var thedomainobj = document.getElementById("filterdomain")
            thedomainobj.selectedIndex = 0
    
            var thetrigramobj = document.getElementById("filtertrigram");
            thetrigramobj.selectedIndex = 0;
            var thedatabaseobj = document.getElementById("filterdatabase");
            thedatabaseobj.selectedIndex = 0;
            var thedaterangeobj = document.getElementById("filterdaterange");
            thedaterangeobj.selectedIndex = 0;
    
            populatefiltered();
        }
    </script>
    
    
    
    
        </HEAD>
    
    
    
    
    <br />
    
        <body style="background-image:url(images/bg.gif); background-repeat:repeat-x, repeat-y;">
        <div style="background-color:White; width:90%; margin-right:auto; margin-left:auto; text-align:left; margin-top:3%; border:2px solid black;">
        <div style="margin-right:auto; margin-left:300px; text-align:left; border: 10px;">
    <br />
    
            
            
           
        
    <%
    var pageroles;
    pageroles="CTOMatrix";
    %>
    
    <!--#include file="openconnection.asp"-->
       
    <%
    			var oRssource;
    		        var oRsdomain;
    			
    			oCmd.CommandText = "select distinct nm.domain,cast(nm.source as char(10)),nm.daterangeindicator, " +
    						 "convert(varchar(30),dri.startdatetime,121)," + 
    						 "convert(varchar(30),dri.enddatetime,121)" +
    						 " from newmatrix nm ,newmatrixdaterange dri" +
    						 " where nm.daterangeindicator = dri.daterangeindicator" +
    						 " and nm.domain=dri.domain" +
    						 " order by 1,2,3";
    			oRssource = oCmd.Execute();
    			%>
    
    
         		
    Please select required domain, source and date range   <!--<A HREF="frontpage.asp"><font color="000033", size="4"><b>home</b></font></A>-->
    <BR><br />
    You can filter the list using the filter selection lists and then click <b>"Show Filtered List"</b> followed by <b>"View"</b><br><br>
    
    (The Source drop down box displays the filtered selections from the further four drop down boxes below it.)
    <br />
    <BR>
    <FORM ID="matrixformfilter" ACTION ="matrix.asp" >
    <BR><BR>
    <b><font size="4">Filters:</font></b>  
    <BR><BR>
    
    <b>Domain</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT ID="filterdomain" NAME="Domain" SIZE="1">
    <OPTION> All
    <% 
    oCmd.CommandText = "select distinct domain from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    <BR><BR>
    <b>Trigram</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SELECT ID="filtertrigram" NAME="trigram" SIZE="1">
    <OPTION> All
    <% oRssource.close();
    oCmd.CommandText = "select distinct substring(source,1,3) from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    <BR><BR>
    <b>Database</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <SELECT ID="filterdatabase" NAME="database" SIZE="1">
    <OPTION>All
    <% oRssource.close();
    oCmd.CommandText = "select distinct rtrim(substring(source,4,7)) from newmatrix order by 1";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    &nbsp;&nbsp;&nbsp;&nbsp;(Selecting "TOTALS" displays stats for the whole estate, ignoring the trigram)
    
    <BR><BR>
    <b>Date Range</b>&nbsp;&nbsp;    <SELECT ID="filterdaterange" NAME="daterange" SIZE="1">
    <OPTION>All
    <% oRssource.close();
    oCmd.CommandText = 	"select distinct nm.daterangeindicator," +
    			"convert(varchar(30),dri.startdatetime,121)," + 
    			"convert(varchar(30),dri.enddatetime,121)" +
    			" from newmatrix nm ,newmatrixdaterange dri" +
    			" where nm.daterangeindicator = dri.daterangeindicator" +
    			" order by 1 DESC,2 DESC";
    oRssource  =oCmd.Execute();
    while (!oRssource.eof) {
    %>
    <OPTION> <% = oRssource(1) + " to " + oRssource(2) +";" + oRssource(0) %>
    <% oRssource.MoveNext(); }
    %>
    </SELECT>
    
    
    
    <BR><BR>
    <INPUT TYPE="button" VALUE="Show Filtered List" onclick="populatefiltered();">
    <!--<INPUT TYPE="button" VALUE="Show All" onclick="populateall();">-->
    
    </FORM>
    
    
    
    		  <%
    			oRssource.close();
    		 %>
    <table border="0">
    <tr>
    <td>
    <b><font size="4">Source</font></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <SELECT ID="fulllist" NAME="source" SIZE="1" style="display:none">
    <%while (!oRssource.eof) { %>
    <OPTION  ><% = oRssource(0) + " - " + oRssource(1) + " - " + oRssource(3) + " to " + oRssource(4) +";" + oRssource(2)%>
    <% oRssource.MoveNext();
    			}
    oRssource.close();             
    %>
    </SELECT>
    </td>
    <td>
    
    <INPUT TYPE="submit" VALUE="View">&nbsp; <!--(xxxTOTALS give values for the whole estate)-->
    </td>
    </tr>
    </table>
    <!--#include file="closeconnection.asp"-->
    
        </BODY>
    </HTML>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    thanks for the reply buddy, appreciate it.

    But the code you have moved is now out of the <FORM> tags, would this still work?

    Can't test it just at the minute, think I may have tried this, or something very similar though.

    Thanks again

IMN logo majestic logo threadwatch logo seochat tools logo