Skip to main content

Special characters and text fields

Yesterday I was fixing a bug in one of our customization projects. There was a web form with some input fields. The bug was, when you enter some text in a text field with double quotes (“) data is not saving properly. Actually, the problem was in updating the records. All the characters that is there after the first double quote is truncated. Actually, the fix was very simple. This is something that you may find in any HTML based user interface, and you can fix this within few seconds if you know the exact reason for the bug. The reason for the bug is explained bellow.

In a text field for example, say, we enter a value like – abc”de. Then, you save the form and send this to the data base. Now the value – abc”de – is in a row of a database table, that's okay. After that, if you go to edit the same record, you can see that value in the text field as – abc. The part after the double quote is missing. Usually, in a text box, value is kept in the “value” attribute within double quotes. After we keep some value that contains double quotes, within the value attribute of a input tag, it should looks like given below.

This thing happens only when you get the value from a database table. If you type it manually in the text box, there will be the relevant HTML entities for the double quotes. That should looks like given below.


To fix the bug, what we should do is to replace the special characters such as double quotes from the values taken from database. In languages like PHP, this is really simple. You can just use a function such as “htmlentities()”. See the code given below.


Popular posts from this blog

Common Characteristics of Enterprise Applications

Last week, I was conducting a tech talk about “Architectural Patterns of Enterprise Applications” with our team. The discussion was mainly based on Marin Fowler's famous book “Patterns of Enterprise Application Architecture”. So, I thought, it's good to write something about that in my Blog. Given below are few common characteristics of Enterprise Applications. If any software product has the following characteristics, we can identify it as an Enterprise Application. These ware originally documented by “Martin Fowler”, in his book “Patterns of Enterprise Application Architecture”. Persistent Data - Enterprise applications usually involve persistent data. The data is persistent because it needs to be around between multiple runs of the program—indeed, it usually needs to persist for several years. Also during this time there will be many changes in the programs that use it. Lot of Data - There's usually a lot of data, a moderate system will have over 1 GB of data organ

How to avoid those little issues one can get when creating new projects with Zend Framwork...

CSS styles my not apply to the templates : Some times this happens when you haven't created a virtual host for the application. After the virtual host is created styles will apply properly, or just use some url helper like "baseUrl" when linking the style sheets to the templates. Error messages when using the commands like "zf enable layout", "zf create db-table ....", "zf create model ...", "zf configure db-adapter", and "zf create action ...." etc... You may get error like "Action 'enable' is not a valid action", "Action 'configure' is not a valid action"......... etc... Reason for this may be, the Zend library is not in the include path. If so add the library path to the include path. Or check whether there are old libraries in any directories of include paths that conflicts with the new one. Check whether there is a one as a PEAR package. And check whether the "zf" c

How to create a waveform animation with HTML and JavaScript

Recently, for a pet project, I wanted to create an animation of a waveform based on the varying decibel level of the microphone input. I was thinking about a really simple way to accomplish this with SVG and JavaScript. Given below is the first sample code I did on the Codepen. You can change this code to use with any framework of your choice. For this sample code, I am using a random number as the microphone input. You can replace it with any other time based input. Code Pen : For this example, you need an HTML code snippet like the one given below. It’s just an SVG with a Polyline element inside.  <div style="text-align:center">   <svg height="150" width="400" id='svg'>     <polyline id="polyline-id" fill="none" stroke="#005c66" stroke-width="1" />   </svg> </div> And then the plain Javascript code to animate the polyline. You can