Display Value Differently in Input Field Without Changing the Value? - javascript

I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?

Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.

If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.

Related

React Modify value being displayed without changing the value of input form

I've got an input field that wants to display currency. I want to display things based on the current local (which I'm using React-intl to accomplish). The issue with this is that their FormatNumber method returns a string and I need my value, on submit, to be an integer. I don't have access to or control over submit functionality so I would like to be able to have my input field maintain some sort of internal state that is constantly a float while at the same time displaying that float as a string from React-intl's formatNumber. Is there a way to achieve this?
I know this comes late, but it may help others.
I'm using the onFocus and onBlur events to set this.state.isFocus, and use that in the render() to display either the amount or the formatNumber(), which displays it in currency format.
Hope this helps.

How to suppress a text field in JavaScript?

I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.
I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.

Crm field control order Javascript

I would like to change the order in which the fields in a form get checked.
The field Email should be checked before the field City. They are both obligatory.
I would also like that when the email address is invalid only one Popup is shown (by default I get two- one saying the email is invalid and one saying that the field cannot be null)
Is it possible to change the order of the checks and do the custom checks before the system ones?
Marco
The only supported method of changing the order in which the fields get checked, is changing the order on the form. I'm assuming that CRM just loops through it's collection of controls to perform the field validations. You could attempt to dive into the CRM javascript and figure out a method to hijack it.
A supported way of handling it would be to make the fields not required (either via javascript on the OnLoad, or updating the entity definition itself), and then on the OnSave, writing your own field validation. It's a lot of extra work, and you lose the little red asterisk showing the field is required, but you'd be able to evaluate them in the order you'd like (or display a single message with everything that's missing (why that isn't done by default in CRM I'll never know)), and be able to fix your email invalid / not null message.
CRM does not loop through its collection of controls as specified in the answer above.
The validation of the fields(business required) on a CRM form happen in the order in which they were added to the form, irrespective of where they are placed in the form. So, as of now, the only way to change the order in which they are validated is to add them in the same order as you want them validated.
So far.. I believe the only option to work around this is stated in this link.
http://social.microsoft.com/Forums/en-US/8f402463-23aa-4bc1-862b-4f4093a0cce8/required-fields-order-of-validation?forum=crmdevelopment
Basically you would need to use javascript. Have only one field as mandatory. On change of this field set the next field (in the correct order) to mandatory and so on.. hectic but only way.

Hide form field, but don't submit in JavaScript

I want to hide some form fields by default, and only reveal in groups them depending on a checkbox.
If a user shows some fields, fills them in, but then rehides them using the checkbox, will the data submit anyway if the fields have something in them or should I empty them using JavaScript?
The fields will send anyway, but your service which is receiving the post should just look for the value of that checkbox and ignore the values at that point. Either that or you will need to clear the fields.
According to the html spec a field is submitted if it meets the following criteria:
It is contained in the form being submitted
It is of type input, select, button
It contains a non-blank name attribute
If it is of <input type="checkbox" or type="radio"/> it must be checked.
Visibility is unimportant. In fact there are many reasons why something may be invisible incluiding being off-screen. Some techniques such as honeypot fields require this.
So to fully answer your question, if some form interaction demands that you only submit what is visible, you can do one of the following:
Move "visible" elements to be children of the form (prefered way) move them to another parent when not visible (after animation hides them). This should be easiest way I think especially if using jquery. Remember for animations, move hidden elements around to appropriate parents, then animate. Furthermore hidden elements can be easily manipulated with minimal performance since the browser does not attempt to re-render them until they are made visible anyways.
Clear out data (lose user input)
Clear out names of input fields, and re-create the names when they are unhidden.
The third technique is a bit much. I'd do either first or 2nd depending on your specific needs with a preference given to the first.
To keep it short and sweet, use javascript to remove the field. This is easy and quick, and you won't have to extend your server side script to determine what went through. If you want too, store the removed html into a global var, so when they toggle the option the script's back. Hope this helps!
If the form is just getting visibly hidden, yes, the data will still submit despite having hidden them. You need to empty them via JS.

Is it dangerous to store user-enterable text into a hidden form via javascript?

In my asp.net MVC application I am using in place editors to allow users to edit fields without having a standard form view. Unfortunately, since I am using Linq to Sql combined with my data mapping layer I cannot just update one field at a time and instead need to send all fields over at once.
So the solution I came up with was to store all my model fields into hidden fields, and provide span tags that contain the visible data (these span tags become editable due to my jquery plugin). When a user triggers a save of their edits of a field, jquery then takes their value and places it in the hidden form, and sends the whole form to the server to commit via ajax.
When the data goes into the hidden field originally (page load) and into the span tags the data is properly encoded, but upon the user changing the data in the contenteditable span field, I just run
$("#hiddenfield").val($("#spanfield").html();
Am I opening any holes this method? Obviously the server also properly encodes stuff prior to database entry.
Assuming your server is properly detecting and dealing with XSS attempts, there's no way a malicious user could submit an attack for another user. Unless someone wants to hack themselves(?), it seems secure to me.
I find this approach pretty unsavory. I guess the overall soundness of this scheme depends on what fields you're actually populating this way --
For example, if you store fields that are supposed to be set only once (at the time of record creation) and never changed, this will allow a (malicious) user to change the field values mid-stream by editing a hidden field before posting (very easy to do, for example, with Firebug).
There's no difference here than if you were providing visible input fields and having that form submitted. Simply shuffling the data into hidden fields vs. visible ones would not make a difference.

Categories