DotNetNuke Tutorials and Articles

(Reposted From DNNDev_Blog: http://dnndev.com/Blog/tabid/347/EntryId/110/Submitting-A-Form-With-the-Enter-Key.aspx)
 
One problem I'm always running into when developing for XMod and XMod Pro is how to overcome the inherent limitation that ASP.NET imposes on the code it runs – namely, that each ASP.NET page can have only the one FORM tag that it renders to the page.
 
Since DotNetNuke (DNN) is built on ASP.NET, it shares it's one-form-per-page limitation. In fact, it exacerbates the problem perceptually because in DNN, you may have multiple modules on the page, each doing different things. So, you may have what look like 3 or 4 different forms – each with their own buttons. In reality, there is only 1 form in the page.
 
Most customers and non-ASP.NET developers don't understand what a stringent constraint this can be. They find all sorts of cool scripts on the internet. Invariably, these code snippets make the assumption that you're putting them into a static HTML page that can contain multiple FORM tags. They stick these snippets into XMod, XMod Pro, or the DNN Text/Html module and wonder why they don't work.
 
Since XMod Pro enables you to build your own custom forms, one scenario many XMod Pro users run into is how to let their form's users submit that form by pressing the ENTER key. In plain HTML that is simple. Each form can have a default button that will fire when the ENTER key is pressed.
 
Fortunately, with XMod Pro, it's not very difficult to implement either. 
Give Your Button An ID
 
Whichever button you want to be clicked when the ENTER key is pressed needs to have an ID defined for it. For this example, we'll be using an XMod Pro <AddForm> tag, so we'll define our <AddButton> as the button to click:
 
<AddForm>
...Your Form Code Here...
<AddButton id="btnAdd" text="Add Record" />
</AddForm>
 
 Wrap Your Form In Panel Tags
 
This is necessary to distinguish your area of the page from the rest of the page for ASP.NET's benefit.
 
<AddForm>
<Panel>
...Your Form Code Here...
<AddButton id="btnAdd" text="New Record" />
</Panel>
</AddForm>;
   
Define Your Default Button
 
 Now all we have to do is tell XMod Pro (and ASP.NET, behind the scenese) which button should be 'clicked' when the user presses the ENTER key
 
<AddForm>
<Panel DefaultButton="btnAdd">
...Your Form Code Here...
<AddButton id="btnAdd" text="New Record" />
</Panel>
</AddForm>
  
 Now, when the user starts typing in the form and presses the ENTER key, the form will be submitted.
 
 Limitations
 
 As with most things on the web, this is not a cross-browser panacea. As long as you stick with "button" tags, you're alright. However, you cannot use this method with "link" button tags like &lt;AddLink&gt;. If you do, it will work correctly in IE, but not in Firefox. The reason has to do with the Javascript generated by ASP.NET and used to trigger the postback for link buttons. I'm currently researching whether or not a workaround can be implemented in XMod Pro.