We Keep Coding

Form Input Mask for prettier data

I've this big form that is just native web stuff with jQuery. Its got a lot of fields, like 200, and periodically we add and remove fields. I have a request to make all the numbers show up with commas as a thousands separator, and also for dates to always show up in localized format.
As it is right now, now will just show up in the raw format: 10000000. The goal is to show 10,000,000 in the input.
I would love to not touch the server-side code for database updating, so keep all the logic on the client in JavaScript. Too have the user enter information normally, but once they are finished, it could show any numbers with the commas. toLocalizedString usually works for this. Then the issue arrises: when the form is submitted, I would need to remove all the commas from the numbers.
I started catching the input events, checking if there is a number in there, and adding the commas. Then on submit I'd need a routine to remove the commas, but only if they were put in by my program.
I feel like I've seen functionality like this before, but I haven't found a perfect solution. There needs to be some bifurcation between the source format of the data and the format displayed to the users. I'd love to be able to just show the user a representation of their data without actually changing the data in the cell. Not sure if its possible.
I was thinking there might be some elegant solution to this issue.

The generic way to do this is to have a model with the actual (typed) values, for example number, and a view model with formatted display strings.
Eg. (pseudocode):
class Model {
value: number
}
class ViewModel {
value: string
}
class ViewModelMapper {
toModelView(model: Model): ModelView {
}
toModel(modelView: ModelView): Model {
}
}
You will need to do transformations from model to view model when loading the data from the server and back before saving to server. You will use the view model to display the data in UI and the model to communicate with the backend.
You can use existing input mask libraries that are doing something along these lines already. See for example something like jQuery-Mask-Plugin.
The question is a little generic, maybe you would like to add some specific details.

how to use JavaScript to calculate the currency

hi I actually trying to do calculate the two numbers,, it was working, but now I don't know how to turn the number into currency. so before the number it need to show £ sign.
I was researched in Google ,and i tried some things but its not actually working.
var name,child,result;
function setvalues()
{
name=Number(document.getElementById("name").value);
child=Number(document.getElementById("child").value);
}
on that name field user has to enter some number to calculate,, its was calculating but just a number not with an currency sign... I seen some of the JavaScript function to change the currency format but its not very clear... and how to add three vaules together and show in one textbox with £ sign

I am unsure of what you are trying to accomplish but I will try to answer as best I can. I would recommend that if you are working with currency(which can be a especially be a pain in JavaScript). I would recommend using a library to handle this for you. I have used accounting.js in the past and it works very well for these sorts of things:
http://josscrowcroft.github.io/accounting.js/
If you update your question with more information I will update my answer.
UPDATE
Try this: http://codepen.io/anon/pen/BjIHn/. It should produces the output you are wanting.

Style strings separated by spaces

I have a form where I can edit event information for a calendar. These specific events run every single week, but one of the form fields is for "days off" where you can enter days where the event doesn't run. using mysql and php, any current days off will be displayed in a textarea field, separated by spaces. You will also be able to put in more days off by typing in a date and making spaces. I would like to be able to style each date just like right here on stack overflow when you ask a new question and put in the tags. After you type in a tag, it gets surrounded by a box, turns blue, and gets an x for deleting it. This is what I want.
Here's a link to a screenshot of what I want it to look like.
http://www.uvm.edu/~sass/screenshot.jpg

I'm not sure how it works with dates and formatting them, but as for displaying in such style I've been using Select2 component. If you can add parsing or create valid list of dates it should give you the correct result.

Okay, I have found a solution by digging around the internet.
Stack Overflow style tagging system in jquery (view the second answer)
Someone created exactly what I want. The results are stored in a hidden field as a comma separated list so I can easily explode it into an array for use with my database, and it formats the inputs nicely with css. I modified the look with css and changed the accepted formats to work with dates and here is the result.
http://www.uvm.edu/~sass/screenshot.png

How do you scrape fields for auto-tagging?

We have a form with a large textarea and a couple text fields. We also have a list of 1500 tags (some have spaces) categorized in 5 types. What is the best way to scrape the text entered by users to extract tags that they may have entered.
We do not want to give them a tag field - it needs to happen automatically.
Any ideas?

Front-end wise:
I would suggest you using one of the available autocompletion jquery plugins (there are many, just google around) that does an AJAX request per tag, returning a JSON object with the similar tags. To do this you'll need to make a route where you can query; example: http://mysite.com/tags?s=%s which returns JSON.
The other way to do it, the lazy way, which is doable considering the amount of tags you have (and of course depending if this is something users can view) is outputing the whole tag array as a JSON object embeded on the document. I don't recommend this unless you're in a really urge to solve the problem and you don't mind loading extra amount of stuff.
The tags should be separated by commas.
Back-end wise:
Once you submit the form you'll need to add an extra procedure to parse the given tags. Just do a tags.split(',') and you'll get a tag array which you can later iterate over to insert the data into the database.

If I understand your problem correctly, one solution could be this:
On application load, build a Set with all the tags.
When a user posts a text, iterate through all the words and check them against the Set.
This would be pretty fast for your purpose, considering looking up in a Set takes constant time.
If a word is included in your tag-set, add the word to a new Set. When done iterating through all the words, do the database queries to associate the new tags with the uploaded text.

Well if I understand this right.
You could use regex, but I am not sure about its efficiency when working with 1500 match-able results (if you can define multiple tags in a single regex statement that would be good).
for(var index = 0; index < textAreas.length; index++)
{
textAreas[index].innerHTML.match(new Regex("/" + tags + "/", g)); //will return an array of the found tags.
}
//Where Tags is in the format tag1|tag2|tag3
//Where tagN can be a regex that matches multiple tags in your list.

I won't edit my previous answer since this one is a completely different approach to the one proposed; and editing it would mean remaking it, which is a bad idea considering the answer may be useful to someone.
One way to make "auto tagging", in the sense that you never tell your people to write a single keyword, is to parse the content being aware of the context (for instance, if your people will write about Bikes, you need to avoid ignoring those words).
To begin with the content:
Remove Pronouns
Remove Common Names (non-related)
Remove Conjunctions
Remove Prepositions
Remove addresses (but take the word that is linked)
Split all the words remaining words, and weight them based on appearance.
Give more weight to words that are linked or that appear on the title tag.
This should be done on the back-end; since the odds are you're going to be doing a lot of preparing. Removing HTML at especial points, iterate through arrays, weight the words and sanitize them.

INPUT field - Financials calculations and display of comma for thousand (1,000) and decimal (.00)

For a website with financial calculations I try to convert every number included into an HTML input field to the format xxx,xxx,xxx.xx with comma for the thousand separator and point for decimal.
Similar as we know it from Excel.
Now the challenge: the input fields are used for the calculations in the form input fields.
So in paralytically the system would need to convert and revert every input field every time a user
makes a changes in a field. This might cause some performance issues with 50+ fields on a website.
Is there solution to display the comma and point as a string, but keep it internally as a decimal digit without crazy hidden input fields etc?
Data are stored into MySQL database tables.
Technologies used: JS, jQuery, CSS, AJAX, MySQL

http://digitalbush.com/projects/masked-input-plugin/

you could use jQuery.data() to store the numeric value on each of the elements, ref http://api.jquery.com/jQuery.data/