Three JavaScript snippets for your web design toolkit

Ryan Boudreaux offers three handy scripts that you can use for common functionality requests like pop-up windows for additional information and dynamic menus.

This post includes a short list of three useful JavaScript programming snippets that I have utilized to solve common issues that crop up when special functionality is requested for websites. For instance, we all know as web developers that opening a link in a new window is probably one of the least enjoyable online experiences, but there are some folks who do like and appreciate that option, and on occasion, I have customers who request it. This is just one of the scripts that I include in this post, which you can add to your script library and toolkit.

Open link URL in a new, resized window

This JavaScript onclick functionality has it place in specific cases, such as when additional information is needed but does not require a full web page. It's a kind of pop-up, so it also helps if you include a "Close" button on the resulting window, so users can easily dismiss it. This in-line script allows you to modify several options including height, width, resizing, add-in scrollbars, toolbars, or menu bars, and also allows you to omit any of them from your script. The Onclick JavaScript defines a window1 equals with the options to open the html file ‘newWindow.html', along with an ‘advisorywindow', a width of 475 pixels x 286 pixels, resizable, scroll bars, toolbar, and menu bar.

The in-line script sample displayed below can be added to any URL you wish to have opened in a modified window:

<a href="newWindow.html" Onclick="'newWindow.html','advisorywindow', 'width=475, height=285,resizable,scrollbars,toolbar,menubar');window1.focus();return false">Sample New Window</a>
The result is displayed in Figure A (Chrome v 21.0.1):

Figure A

Close and Print buttons

As I mentioned above, the added functionality of the Close and Print button option helps users with two practical functions, and these are especially beneficial for users who want the option of printing an online statement, receipt, or other items such as a ticket or coupon, and then easily closing the window when the action is completed. The following form uses the post method named "CloseOrPrint" with a submit input type,a value of "Close", an onClick action of "self.close()". The script also contains a JavaScript document.write function with the submit input type, a value of Print, and an Onclick option to ‘print':

<form method="post" name="CloseOrPrint" id="CloseOrPrint">
    <input type="submit" value="Close" onClick="self.close()">
    <script language="javascript">
    <!—  Hide script
        document.write("<input type='submit' value='Print' Onclick='print();return false'>")
    //end script hiding —>

Dynamic menus

Users like the ability to have a choice of inputs and the ability to change contents on the fly; in this example, we will use the months of the year, and when the month is selected the associated number of days in that month is populated. This similar functionality is also found on many websites that offer a menu of countries and their associated states or provinces, or in the case of the US, a listing of states with their associated parish or county listed. The dynamic menu functionality described here is inspired from the visual quick start guide book JavaScript, Eight Edition.

First, we will set up the days of the month as an array with the variable named monthDays as shown in the code snippet below. The array contains the 12 values (total days in each month) for the 12 months, which are the correct number of days in each given month in order from January through December: (Note: in a leap year the value for February will need to be updated in the monthDays variable as it is displayed below):

var monthDays = new Array(31,29,31,30,31,30,31,31,30,31,30,31);

Then we set up the variable for the month using this which is the month the user selects from the list, and then it gets stored as monthStr, as shown in the code snippet below:

 var monthStr = this.options[this.selectedIndex].value;

Next, we create an if statement for the value of monthStr is equal to "", and then the user can choose the month from the drop-down menu and not the name "Month"; this line checks to be sure that the value of monthStr is not a null value. If the condition is true, the monthStr is turned into a number with the parseInt(monthStr) method, and then the variable theMonth is set to the result.

if (monthStr != "") {
var theMonth = parseInt(monthStr);

Finally, to change the Day menu, we set the options length to zero, which clears out anything that happened to be there previously, so that the menu starts fresh with each instance. The loop below processes the number of days as selected by the month and adds a new option for each day. The option is passed by the new Option(i+1) so that it displays 1 to 31:

document.getElementById("days").options.length = 0;
       for(var i=0; i<monthDays[theMonth]; i++) {
             document.getElementById("days").options[i] = new Option(i+1);

The HTML sets up the form action as displayed below:

<form action="#">
       <select id="months">
             <option value="">Month</option>
             <option value="0">January</option>
             <option value="1">February</option>
             <option value="2">March</option>
             <option value="3">April</option>
             <option value="4">May</option>
             <option value="5">June</option>
             <option value="6">July</option>
             <option value="7">August</option>
             <option value="8">September</option>
              <option value="9">October</option>
             <option value="10">November</option>
             <option value="11">December</option>
       <select id="days">

The full JavaScript code snippet is displayed below:

window.onload = initForm;
function initForm() {
       document.getElementById("months").selectedIndex = 0;
       document.getElementById("months").onchange = populateDays;
function populateDays() {
       var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
       var monthStr = this.options[this.selectedIndex].value;
       if (monthStr != "") {
             var theMonth = parseInt(monthStr);
             document.getElementById("days").options.length = 0;
             for(var i=0; i<monthDays[theMonth]; i++) {
                    document.getElementById("days").options[i] = new Option(i+1);
The output is shown in Figure B:

Figure B

JavaScript delivers a dynamic influence to websites and gives your users more interaction options when they visit. These three snippets simplify the process of including them for your users.


Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks