droplog: Forms

Wednesday, May 18, 2016

JavaScript URL Buider with Date Picker

The sample builds an URL for BusinessObjects [Business Objects]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>JavaScript URL Builder</title>

    <meta name="Author" content="Rui Granadeiro"/>
    <meta name="description" content="new page" />
    <meta name="keywords" content="Rui Granadeiro Content Management System" />
    <link rel="stylesheet" href="reports/autocomplete.css" media="screen" type="text/css">
    <link rel="stylesheet" href="reports/calendar.css" media="screen" type="text/css">
    <script type="text/javascript" src="reports/autocomplete.js"></script>
    <script type="text/javascript" src="reports/calendar_en.js"></script>

<script type="text/javascript">
function goTo()
{
             var initdate = document.forms[0].initdate.value;
             var enddate = document.forms[0].enddate.value;
             var institution = document.forms[0].institution.value;
            window.open( "http://boprodsvr:8080/BOE/OpenDocument/opendoc/openDocument.jsp?iDocID=159964&lsSInstitution+Requesting+Service%20?="+institution+"&sType=wid&sRefresh=Y&lsSStart+Date:="+initdate+"%2000:00:00&lsSEnd+Date:="+enddate+"%2000:00:00&lsSInstitution+Logo?=JS");
             return false;
}
</script>
</head>

<body>

            <style type="text/css">
                body {
                    font-family:Arial, Helvetica, sans-serif;
                    font-size:smaller;
                }
                span {
                    font-weight:bold;
                }

                a {
                    color:#039;
                    text-decoration:none;
                    font-weight:bold;
                }

                a:hover {
                    color:#03f;
                }
            </style>

            <span style="margin-top:0; padding-top:0">Interactive reports: </span>

            <form name="boreports" action="" method="get" onsubmit="return goTo()">

                        Start date (included): <input name="initdate" type="text" value="" size="10" />
                        <script language="JavaScript">
                        new tcal ({
                            // form name
                            'formname': 'boreports',
                            // input name
                            'controlname': 'initdate'
                        });

                    </script>

                        End date (excluded): <input name="enddate" type="text" value="" size="10" />
                        <script language="JavaScript">
                        new tcal ({
                            // form name
                            'formname': 'boreports',
                            // input name
                            'controlname': 'enddate'
                        });
                     </script>

                            Institution requesting service: 
                        <select name="institution" value="*">
                            <option value="*">All</option>
                            <option value="AAA">AAA</option>
                            <option value="BBBB">BBBB</option>
                            <option value="CCCCC">CCCCC</option>
                        </select>

                   <input style="cursor: hand;" type="submit" value="Get your report"> <input style="cursor: hand;" type="reset" value="Reset" />

             </form>
            <br />

</body>
</html>