Posts Tagged ‘Javascript’

Auto Complete Text Field in PHP

September 19th, 2008 9 Comments

On a web page form, one method to accept user input is with a single line text field. This allows for a visitor the freedom to input anything. But what if you want to give the visitor a set of options to choose from in addition to the freedom of inputting anything? That is what is commonly known as a auto complete text field. As a visitor types into the auto complete text field, a list of selectable options (similar to a drop down list) will appear. This method is similar, but not the same as a Combo Box.

The best way to create an auto complete text field is with JavaScript. There are many various websites out on the internet that offer an solution. My personal favorite script to use is one created by zichun called Auto Complete Control. Of the many controls I tries, I like this for the following reasons:

  • It is free and use and download licensed under the Creative Common License
  • It is easy to implement only requiring adding two JavaScript scrips
  • Allows for many auto complete text field instances per page, each with many editable tweaks
  • The auto complete options quickly appear as the visitor types

The JavaScript files can be downloaded as a single zip file from their official website at http://www.codeproject.com/KB/scripting/jsactb.aspx. As of the writing of this tutorial, the two required files are common.js and actb.js. (more…)

Posted in Javascript, PHP Tags: , , , , ,

Random Integer Generator in Javascript

May 27th, 2008 No Comments

To generate a random number between 0 and X, use the below javascript:

var myRandomNumber = Math.floor(Math.random()*(X+1))

Therefore, if you want from 0 and 100, you simply need:

var myRandomNumber = Math.floor(Math.random()*101)

Now, a bit more complicated! If we want a number between the range of X and Y, follow the below formula:

var myRandomNumber = Math.floor(Math.random()*(Y-X))+X

And another real world example. Assume we want a random number from 79 and 473:

var myRandomNumber = Math.floor(Math.random()*394)+79
Posted in Javascript Tags: , , , ,

Submit Form On Enter Key Solution

April 16th, 2008 6 Comments

It is natural for web users to hit the enter key to submit a form or otherwise activate an action. There have been several cases where the form does not submit on the enter key. The below example works.

<body>
   <form id="form1" runat="server">
      <div>
         <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
         <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
         <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label>
      </div>
   </form>
</body>

The Button1_Click action simply copies the input text from txtFirstName into the label lblOutput. Because this simple example works, one would expect this to work in every case. That is not the case. If hitting the enter key does not submit the form, try one of the following below:

  1. Try putting an invisible HTML Input (Submit) button. Though this has worked for others, it did not work for my situation. 
    <input type="text" style="display:none"/>
  2. A second option to try is to use a onKeyDown event. This second option will append a moderately long javascript script to check for the enter key on each button press. If the button is pressed, it activates the form submit. To use this, place this script in the head. Finally, on the last input textbox, use the following: 
    onKeyPress="return submitFormWithEnter(this,event)"

    The script is below goes in the within html head tags:

    <script type="text/javascript">

function submitFormWithEnter(myfield,e)
{
   var keycode;
   if (window.event)
   {
      keycode = window.event.keyCode;
   }
   else if (e)
   {
      keycode = e.which;
   }
   else
   {
      return true;
   }

   if (keycode == 13)
   {
      myfield.form.submit();
      return false;
   }
   else
   {
      return true;
   }
}
</script>
  3. This last situation, which worked best for me also checks for the enter key using javascript, but instead of simply activating the form’s action, the function to be run is directly specified. Below, EmailTextBox is the last input TextBox element. Next, replace LoginButton with the ASP Submit Buttton. This script needs to go in the Page_Load section of the codebehind. 
    EmailTextBox.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + LoginButton.UniqueID + "','')");

- EDIT JULY 16, 2008 -

See Form Submit On Enter in Visual Studio post for both the GUI and programmatic way to submit form using the enter key!

Posted in C#, Javascript Tags: , , , , , , , ,
« Older Entries
Newer Entries »