MDBitz Development Resources

Often as a User we don’t want to use our mouse or tab to the submit button to submit a form on a Web page, instead we may just want to press the enter key on our keyboard. This functionality can be easily completed by performing a bit of JavaScript, personally I find that utilizing JQuery makes the task even easier.

Enabling Enter Button to Submit a Form

To enable the enter button for a form we will create a javascript function that check when a key is pressed when an input element of the form is in focus. This function can then either submit the form or call another javascript function to validate the form.

1. First lets we will start by defining our start-up function that will setup the appropriate keydown handlers on the input fields.

   $(document).ready( function() {
       // code from step 2
   }

2. Second we will need to set the keydown handler for all input fields in our form including select and radio fields. JQuery provides a shortcut selector :input to select these elements.

   $('#formID :input').keydown(function(e) {
       // code from step 3
   }

3. Now time to fill out the logic of the function called when the enter key is pressed. First we will want to verify that we have the event to do this we can check if e is null and get the window.event instead. To shorten this we can simply use the || operator.

   var event = e || window.event;

   Next we check if the key pressed was the enter button by use of the keyCode property.

   if( e.keyCode == 13) {
       // action here
   }

4. The last step is simply put in the action logic whether it is calling a validation script:

   return validateForm();

   or submitting the form directly

   document.formName.submit();

Full Sample Script

$(document).ready( function() {
    $('#myForm :input').keydown(function(e) {
        var event = e || window.event;
        if (e.keyCode == 13) {
           return validateForm();
        }
    });
});

Resources

• JQuery – offical website

Want to add Search Capabilities to your website and don’t know where to start? Then Google AJAX Search API might be for you. The AJAX Search API provided by Google enables you to embed a search box into your web pages and display the results in your webpage in your own desired format and style. The perhaps nicest thing about utilizing the API is that it is free and does not require an account unlike Google’s Site Search that costs a minimum of $100 a year. However if you do sign up then if errors are encountered while retrieving your search results Google has the ability to notify you so that the issue can be resolved.

To get started Google provides documentation, examples, and even a code playground that has multiple examples that you can customize in place to view the results.

• Search AJAX API – Main Site
• Search AJAX API – Documentation
• Search AJAX API – Examples
• Search AJAX API – Code Playground

Much to every developers pain we often find that JavaScript that is functional in one browser is not functional in other browsers.  Recently the update to Safari 3 requrired that the window open command to not contain the url. As it would fail to open a window if it did, the simple fix was to create a new window with no url and set the url after creating the window. However as other brothers do not require this we can set up a two step process in that we try to open the window normally and if it fails then we open one with no url defined.

function create_popup( url, win_title, win_options )
{
  var popWin = window.open( url, win_title, win_options );
  if( !popWin ) {
    popWin = window.open('', win_title, win_options);
    popWin.location.href = url;
  }
}

popWin

The standard approach to submit a form is through the use of the submit button. However we may find that we may want to utilize an image, text link or other elements to submit a form. In these cases we can utilize JavaScript to submit the form for us through the use of the JavaScript form object.

When your html page contains a form then a form object is created in your document that can be accessed by its name.  The form object contains both the submit and reset functions. To access the form object we use the notation document.FORM_NAME.

Examples

HTML Form

<form name='mailForm' method="POST">
   // form contents
</form>

JavaScript Form Submit

<a href="javascript: document.mailForm.submit()">Send mail</a>

JavaScript Form Reset

<a href="javascript:  document.mailForm.reset()">Clear</a>

Javascript Method

<SCRIPT language="JavaScript">
  function sendEmail ()
  {
     document.mailForm.submit();
  }
</SCRIPT>
 
<a href="javascript: sendEmail()">Send mail</a>

This short tutorial shows how to access Stock Information from Yahoo Finance through an AJAX call utilizing JSONP. For the tutorial the following information is required.

• JQuery - Javascript library with built in AJAX and JSONP functions
• YahooFinanceAPI - PHP library that utilizes Yahoo Finance to return stock information from an underlying call to download.finance.yahoo.com/d/qutoes.csv – Please note that you can utilize this library to create your own web page that will return various stock information. For the purpose of the example we will be accessing a url on my server to showcase the cross domain capability.

Step 1: Create a sample html page that includes the JQuery library

<!DOCTYPE HTML PUBLIC
   "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"/>
  </head>
  <body>
    <div id="quote">
 
    </div>
  </body>
</html>

Step 2: Create the table that will hold the stock information returned by the AJAX call

<table cellspacing="0" cellpadding="3" border="1">
  <tr>
    <th>Symbol</th>
    <th>Last Trade</th>
    <th>Last Trade Time</th>
    <th>Change</th>
    <th>Open</th>
    <th>Previous Close</th>
    <th>Day's Low</th>
    <th>Day's High</th>
    <th>Volume</th>
  </tr>
  <tr>
    <td id="symbol"></td>
    <td id="lastTrade"></td>
    <td id="lastTradeTime"></td>
    <td id="change"></td>
    <td id="open"></td>
    <td id="previousClose"></td>
    <td id="daysLow"></td>
    <td id="daysHigh"></td>
    <td id="volume"></td>
  </tr>
</table>

Step 3: Define the JQuery JavaScript code that will call make an AJAX call for the specified stock information

1. Create the document ready function so the JavaScript is not called until the page is loaded.

   $(document).ready(function(){
   });

2. perform the AJAX call for JSONP data using the getJSON function of JQuery

   $.getJSON(
     "http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?",
     function( data ) {
     }
   );

3. Output the returned data to the appropriate cells of the Table.

   $("#symbol").text( data.symbol );
   $("#previousClose" ).text( data.previousClose );
   $("#open" ).text( data.open );
   $("#lastTrade").text( data.lastTrade );
   $("#lastTradeTime").text( data.lastTradeTime );
   $("#change").text( data.change );
   $("#daysLow").text( data.daysLow );
   $("#daysHigh").text( data.daysHigh );
   $("#volume").text( data.volume);

Step 4: View your sample page

Full Sample HTML Source

<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(document).ready(function(){
        $.getJSON("http://mdbitz.com/testing/PHPYahooFinance/finance.php?symbol=DELL&callback=?",
          function(data){
            $("#symbol").text( data.symbol );
            $("#previousClose" ).text( data.previousClose );
            $("#open" ).text( data.open );
            $("#lastTrade").text( data.lastTrade );
            $("#lastTradeTime").text( data.lastTradeTime );
            $("#change").text( data.change );
            $("#daysLow").text( data.daysLow );
            $("#daysHigh").text( data.daysHigh );
            $("#volume").text( data.volume);
          }
        );
     });
     </script>
  </head>
  <body>
    <div id="quote">
      <table cellspacing="0" cellpadding="3" border="1">
        <tr>
          <th>Symbol</th>
          <th>Last Trade</th>
          <th>Last Trade Time</th>
          <th>Change</th>
          <th>Open</th>
          <th>Previous Close</th>
          <th>Day's Low</th>
          <th>Day's High</th>
          <th>Volume</th>
        </tr>
        <tr>
          <td id="symbol"></td>
          <td id="lastTrade"></td>
          <td id="lastTradeTime"></td>
          <td id="change"></td>
          <td id="open"></td>
          <td id="previousClose"></td>
          <td id="daysLow"></td>
          <td id="daysHigh"></td>
          <td id="volume"></td>
        </tr>
      </table>
    </div>
  </body>
</html>