Ran into an issue earlier today that I could not figure out and ended up asking my second question on StackOverflow in seven years.
I was trying to use <input type="number" pattern="[0-9]{8}"> to enforce 8-digit numbers while allowing leading zeros. This was being done on an optional field (no required attribute) and I could not understand why it was bypassing my pattern on the populated field (eg: value “1234” was accepted, pattern ignored).
I just saw the announcement for Google’s revised reCAPTHCA API, so I decided threw together a quick example. It worked well without even looking at the documentation. So simple to integrate it’s ridiculous. Here is the PHP (no security for simplicity)… Continue reading
I’m sure there is a more efficient way to do this, but it suited my needs.
<script>
$(function() {
$('textarea').keyup(function(){
$(this).each(function(index, element) {
$(element).height(element.scrollHeight);
});
}).keyup(); //trigger event to initialize pre-filled textareas
});
</script>
Enjoy 🙂
If you’re like me, you have many bookmarks to administration areas that require authentication. For you, this script is a priceless time-saver.
Let’s say your login page has a form similar to the following…
<form action="/login.php" method="post"> <label>Username: <input type="text" name="user"></label> <label>Password: <input type="password" name="pass"></label> <input type="submit" value="Log In"> </form>
Some logins simply cannot be stored in the browser’s password system. So, to save you the extra effort of manually logging in on each visit to such pages, create a bookmark that automatically logs you into the system.
Here’s the code to submit that form using a bookmarklet… Continue reading
It has been bugging me for some time that the datepicker widget uses a normal button unless you tell it to use an image. Seeing that we are using the jQuery-UI framework, it makes sense to me that the button should be styled as such. After playing with the selectors and trying it a few different ways, here is how I made that boring datepicker button become a jQuery-UI button (with calendar icon). Continue reading
I have seen this question all over the web and am surprised that nobody has actually offered such a simple solution.
Anyway, here is a quick, simple and painless way to set CodeIgniter’s error delimiters (used by the Form_validation library) one time for your entire application. Create “application/libraries/MY_Form_validation.php” with the following contents… Continue reading
Have you ever wanted to reset only fields in a particular section of the form without resetting all of the fields?
Here is how you can achieve this with jQuery 🙂
$('#reset_address').click(function (event) {
event.preventDefault();
$('#address_details :input').each(function() {
if ($(this).is('select')) {
$(this).val($(this).find('option[selected]').val());
} else {
$(this).val(this.defaultValue);
}
});
});
#address_details represents a <fieldset> within my <form>. When the user clicks the #reset_address link I revert the fields within the <fieldset> (not the entire form) back to their original values.
Note: defaultValue is a core JavaScript property. A conditional check for <select> was necessary since defaultValue only applies to <input> and <textarea> fields.
As you may have already noticed, most browsers do not support adding icons to <input type=”submit”> and <input type=”reset”> using jQuery UI. The code below will correct this issue by replacing matched <input> tags with appropriate <button> tags…
$(document).ready(function(){
$('input:submit, input:reset').each(function(){
$(this).replaceWith('<button type="' + $(this).attr('type') + '">' + $(this).val() + '</button>');
});
});
We loop through each submit and reset button and replace it with a button tag using the original input’s value as the new button’s text. Since we are using the original input’s value attribute, it should not be considered optional. Otherwise, you’ll end up with a button that has no text unless you set it explicitly with the .button({label: ‘my button label’}) option unless you intend to show only the icon by calling .button({text: false}) option.
Now we can assign icons to the buttons without updating the html using the following code… Continue reading
I recently noticed a bunch of garbage registrations for an existing client’s newsletter function written quite some time ago. After making a copy of the subscribers table and “cleaning” the data (proper-cased names, lowercased emails, etc), I started looking at ways to limit these automated registrations.
The client would not be happy with registration confirmation emails, so I decided to make a callback function for use with CodeIgniter’s Form Validation library. Since it was only needed in one location, this method made more sense to me than extending the main library.
Here is the function…
I looked around on the web for a while trying to find an example of what I was trying to do. Some were close, but none performed the JOIN portion of the query and on the same table from the SELECT portion (self referencing). So, here is the code I used to created a sub-category only dropdown using the parent categories as the optgroup labels.
Well, if you’re here you most likey are not getting any data from your FormMail script in the email you received. The problem is that dthetre’s script expects register_globals to be turned on. Since PHP4, most installations have register_globals turned off. This means your script will not work unless the feature is enabled. Most hosts are not likely to enable this feature (we’re one of them).
So here’s a quick workaround for the script. Add this code right after the header section of the script (before “// for ultimate security, use this instead of using the form”).
CODE UPDATED – SEE BELOW
When developing an html form, there are many occassions where you might want to disable Mozilla’s or Internet Explorer’s auto-complete feature. This may be for credit card payment or login forms. Whatever your case may be, the following code will disable autocomplete in a form element.