Submitting a Form upon Pressing the Enter Key

It is very common on web forms that a page is desired to submit its form when a user presses the Enter key while the focus in a certain or any text box. This is typically done using JavaScript. I want to share how it's done as it can be very useful. In essence all that is done is that every time a user presses a key, a JavaScript code checks if the key pressed is the Enter key. If so it submits the form to the server, otherwise it does nothing. The following is a snippet of the code would look like:

On the JavaScript side

function enter_submit(pevent)
{
   if(window.event) //Internet Explorer
   {
      if(myEvent.keyCode == 13) //check enter was pressed
      {
         document.formname.submit();
         //or __doPostBack("",''); 
  return;
      }
   }
   else if(pevent.which) // Netscape/Firefox/Opera 
   {
      var pressed = pevent.which; 
      if(pressed == 13)
         document.formname.submit();
         //or __doPostBack('','');
   } 
}

On the HTML or ASP .NET side

<asp:Textbox ID="txtPassword" runat="server" onkeypress="javascript:enter_submit(event);/>

<input id="inPassword" type="password" onkeypress="enter_submit(event);"/>

Submitting Files to Multiple Sites

An issue came up recently at my client where the client wanted to keep a backup copy of every file submitted by a user to a third-party site. The backup copy was going to be saved a separate server. The solution I implemented was some simple JavaScript code. Essentially, the code submits the form to one site then changes the "action" and "target" properties of the form and submits it again to the other site. The new target could be an HTML iframe or a new window. In my case it was a small popup window. Here is a sample of the code:


function submitForms() {
window.open("", "smallPopup", "location=1, status=1, scrollbars=1, width=100, height=100");
var theForm = document.myForm;
theForm.action = "http://firstSite.com/backup";
theForm.target = "smallPopup";
theForm.submit();

theForm.action = "http://2ndSite.com/receive";
theForm.target = "_self";
theForm.submit();
}

Now you might wonder why I didn't just create another form and have two forms, one for each server. The problem with that is the user would have to select the file twice, once for each form. This is because for security reasons, it is not possible to programmatically set the file path in an HTML input of type file. So a programmer is prevented from assigning the path of one input tag to be the same as another input tag of type file. A programmer only has read access to the file path. Of course this makes a lot of sense too because if it were possible then any malicious site would be able to upload any file its owner wishes from your computer to his server.

Modifying CSS Styles with JavaScript

I recently came a cross problem at a client where I needed the page content to change upon a button click before the page is posted back. For example, imagine you have a page used to upload files. You want the page to display something like "Your file is being uploaded" right when the user clicks the upload button. Then the page is posted back while the desired message is displayed. The solution I came up with utilized JavaScript to modify the Cascading Style Sheets, CSS, of the page and then post.
The solution was as simple as adding multiple wrapping div's around the content. This could actually be done with only two div's but for my page I need three. The div that had to be shown when the page is first requested had a default CSS Display property value of "block." The div that was to be shown after the user clicks a button had Display value of "hidden." In the code that executed following the button click as shown below, one div is being hidden, one is modified to be shown, and lastly the page is posted. The JavaScript code I had was similar to the following:


function btnClick()
{
document.getElementById("initialDiv").style["display"] = "hidden";
document.getElementById("secondDiv").style["display"] = "block";
document.form1.submit();
}