Information Technology, Tips and Tricks

Progressive Enhancement

One of consideration used in web development architecture/web design is called “Progressive Enhancement“. It is a simple but very powerful technique. It defines layers of compatibility that allow any user to access the basic content, services, and functionality of a web and providing and enhanced experience for browser with better support of standards.

Progressive Enhancement consists of the following core principles:

  • Basic Content must be available/accessible to all browsers
  • Basic Functionality must be available/accessible to all browsers
  • Semantic Markup contains all content
  • Enhanced layout is provided by externally linked CSS
  • Enhanced behavior is provided by unobtrusive, externally linked JavaScript
  • End user browser preferences are respected

So, the objective is to have one only code that is compatible with all devices :D.

 

Information Technology, Tips and Tricks

Using Multiple “Submit” button in a single HTML Form without Javascript (For Mobile Browser)

When developing a web application, you might encounter a situation that you need to develop a single form with multiple submit button, and you want to know which submit button that user choose when submitting the form. As an example:

….
<input type=”submit” id=”submit” value = “ADD”>
<input type=”submit” id=”submit” value = “EDIT”>
….

How will you solve this problem?

For those who are familiar with JavaScript, it should not be a big deal, because most of the people will use JavaScript to solve this problem. Commonly, they will use onClick event attached to each submit button, so when the button get clicked, it will call a method that will assign certain value to the hidden field. In their backend, they just need to retrieve the value from this hidden field.

Well, using JavaScript will not give you any issue if you are developing a desktop web application. All desktop browser support JavaScript. The problem will only raise if your application will run on mobile browser? As we know, not all mobile browser support JavaScript .. specially old type, and more and more people are using their mobile browser now… so we need something that works across all the browser 🙂

So how do we solve this problem? Here is another trick, that actually is very easy:

….
<input type=”submit” name=”submit” id=”submit” value = “ADD”>
<input type=”submit” name=”submit” id=”submit” value = “EDIT”>
….

and on your backend servlet


String whichButtonClicked = request.getParameter("submit");

The trick here is giving the attribute “name” on your submit button. According to the HTML Form specification, the “name/value” pair will be sent during form submission 😀

Happy trying 😀