HTML input field dynamic "placeholder" - html

I have a rather stupid question, but I would like some input on the issue.
On some websites you have a date input field, which has a placeholder in the form of mm/dd/yyyy.
However, when you start typing, the characters are getting replaced one by one, like 02/3d/yyyy.
So its not a placeholder but some sort of dynamic input already. My question is, how is this generated? Is this a javascript library (jquery, angularjs etc.) or any other feature im not aware of?
Thanks for your help, I tried finding appropriate code online but nothing did the function described above.
I mean of course you could program in JS an event listener on keypress, and depending on the input you adjust the field accordingly, but I wonder if there is an easier way to do so!

You can create the mask by following this guide: https://github.com/RobinHerbots/Inputmask

Related

How input boxes save previous entries

Quick question here. I am creating a web app using MVC. I've noticed when I add input boxes to pages, they save previous entries in a dropdown fashion, like so:
While this IS handy, I'd like to know a couple things:
How/Where are these previous entries being saved? Is this my browser or an MVC thing?
If need be, how can I override this default behavior?
Thanks!
I'm not sure what's in your specific project, but it could be one of three things:
Some browsers, if you submit a form, remember the submitted values and automatically make inputs autocomplete. The autocomplete HTML attribute on forms and inputs can help to control that.
HTML 5 has a datalist element which lets you associate a list of options with an input, so autocomplete can be implemented manually.
There may be some JavaScript, potentially paired with AJAX doing this autocomplete.

Is it possible to make a HTML chart modifiable?

im totally new when it comes to trying to make HTML code. I was wondering if its possible to make certain rows/columns in a HTML chart modifiable by random users that view the page.
And if so is it possible to make it so that once modified they click a button and it changes some other rows like a calculator does, based on what i have preset (numbers)
hopefully that makes sense...
thks
btw im using a Google site i made
You can use <input> elements for allowing people to input text, and javascript for any computation involving their contents, or for changing what's on the page.
See https://developer.mozilla.org/en/HTML/Element/Input and https://developer.mozilla.org/en/JavaScript for more info on each of these.
HTML tables are columns and rows of static data, not modifiable. One solution would be using javascript and do an .onClick method on each <td>. That method would convert text in to something like <input type="text" name="cell_x_y" value="original_value" /> and then another method which would handle ENTER key or leaving that text field and would submit value to server.

htmlentities on hidden form elements

This might seem like a daft question but the sanitizing of user input continually confuses me, and i would like once and for all to get a definitive answer.
So heres the scenario
Customer fills in web form.
PHP checks that the mandatory fields have been filled in appropriately, if not it doesn't let the customer continue until they are.
If so then the user input is displayed on screen for confirmation, while the input data is also stored as hidden form elements.
Customer then confirms input, the hidden elements are then sent on for further processing.
Working with the principle that data shouldn't be escaped until the last minute, how would this apply to the data stored in the hidden elements at point 3. (Obviously the data printed on screen at this point i have applied htmlentities() too)
Should i use htmlentities on the hidden elements, however this is technically not the last stage as after part 4 i would then be using the variables again before sticking them into a DB or email.
I am fully aware that i might be doing this completely wrong, so any thoughts are very welcome. ^_^
If you're writing out the user's input to the page, it should ALWAYS be escaped. Otherwise there's nothing to stop people adding javascript etc to their input, or to try and escape out of your hidden fields and inject code onto the page. So yup, use htmlentities on the hidden fields too. Just because the user can't see them doesn't stop people from injecting code into them.

Retrieving form value with jQuery

Sadly, this isn't as cut and dry as I had hoped. Over the past few weeks I had been researching the use of jQuery with CRM. While it's nice and dandy for style alterations, I couldn't find any examples that are closer to business logic.
For example, today I needed to alert the browser if one of 4 fields were empty. Two were date fields, one a picklist and one a checkbox (bit). I thought that calling $("#formElement").val() would have gotten the value, and in some cases it did, such as the picklist after I parsed it as an int. However, the date fields always returned an empty string.
Looking through the CRM form HTML, I see that "#formElement" isn't always the ID of an input for a CRM form element. Case in point, the date fields had ID="DateTime" (or something similar). At this point, I had thought that I will need to create a filter that will take the table that contains #formElement as it's ID and look for the value of the first input in that table, but at that point using crmForm.all.formElement.DataValue just seemed easier.
I'm sure someone here has a solution for this (and maybe some explaination of how CRM Forms are written to help with a filter), and it really stinks not being able to install add-ons for Internet Explorer here at work. Thanks for any and all help.
Use jQuery to select the form itself (either by its ID or just by $(form)) and then iterate over its children that are input text fields. I haven't done this for a form before but it might work for you.
For anyone else who is looking for an answer, I have figured it out to a managable degree. Unfortuantely, I haven't been able to use CSS selectors to shorten attribute names, but I have been able to utilize jQuery to cut down on time. If you'd like to use a CRM 4 attribute with jQuery, it looks like this:
$(crmForm.all.new_attribute).bind("click", function() { ClickFunction(); });
What I was really gunning for was chaining, because there are plenty of times when I need to null a field, disable it, and then force it to submit. A little bit of magic and this:
crmForm.all.new_attribute.DataValue = null;
crmForm.all.new_attribute.Disable = true;
crmForm.all.new_attribute.ForceSubmit = true;
Becomes:
crmForm.all.new_attribute.dataValue().disable().forceSubmit();
I hope this helps some of you guys out!

Web page field validation

I need to validate a date/time field on a webpage but want it to do it without reloading the page and would like 'instant' feedback for the users.
What's the best/easiest solution.
BTW: easiest scores 65% of total points
Edit:
What if best was 65% of total points?
If you would like to use JavaScript then it has built in date validation functions. However, if you do not want to go the JavaScript route, you could change the UI to dropdown controls which would limit the users ability to enter invalid data. You would still need to check server side to ensure nobody submits Feb 30th.
Check out this javascript date validation function.
It uses javascript, regular expressions and the 'onblur' event of a text input.
#David H. Aust
Using onblur for validation is problematic, because some folks use the enter key, not the mouse, to submit a form. Using onblur and the form's onsubmit event in conjunction could be a better solution. Back when I did JS validation for forms a lot more, I would run against keyup events. This gave the user instant feedback on whether or not their entry was correct. You can (and I did) also put checks in place so that the user doesn't receive an "incorrect" message until they've left the field (since you shouldn't tell them they're incorrect if they aren't done yet).
I would recommend using drop-downs for dates, as indicated above. I can't really think of any reason not to--you want the user to choose from pre-defined data, not give you something unique that you can't anticipate.
You can avoid February 30 with a little bit of Javascript (make the days field populate dynamically based on the month).
#Brian Warshaw
That is a really good point you make about not forgetting the users who navigate via the keyboard (uh, me).
Thanks for bringing our attention to that.
A simple javascript method that reads what's in the input field on submit and validates it. If it's not valid, return false so that the form is not submitted to the server.
... onSubmit="return validateForm();" ...
Make sure you validate on the server side too, it's easy to bypass javascript validation.
If you're using ASP.NET, it has validator controls that you can point to textboxes which you can then use to validate proper date/time formats.
There are a couple of date widgets available out in the aether. Then you can allow only valid input.
I've used this small bit of js code in a few projects, it'll do date quickly and easily along with a few others.
Link
Looks like there's a great video about the ASP.NET AJAX Control Toolkit provides the MaskedEdit control and the MaskedEditValidator control that works great. Not easy for beginners but VERY good and instant feedback.
Thanks for all the answers though!
asp.net
Unfortunately I can't accept this answer.