I’m trying to create a textbox for a user to type in a filename. Using jquery, the filename will be previewed in a DIV below the textbox. When typing, the filename should also format in the preview DIV so that spaces are replaced with dashes, converted to lowercase and ‘.php’ is appended to the end. When the typing is done, the textbox value should change too so when the form is submitted the proper formatting is what’s posted to my processing script.
For example, if user types “New Filename Here”, the preview div should show “new-filename-here.php” as the user is typing and when the textbox is blurred or .focusout it should too display “new-filename-here.php”.
I have a JsFiddle example below that will preview what is being typed into a textbox, but I cannot seem to do the second part of formatting the filename and replacing the textbox value on .focusout.
Example JsFiddle: http://jsfiddle.net/Wz4aa/
The whole point of this is so the user can preview what a newly created filename will be and change it to their liking before submitting a form.
Any help would be appreciated, thanks!
Is this what you’re after? http://jsfiddle.net/Nzv2Y/