jQuery: Preview & Format Textbox Input

Question

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!

"when the form is submitted the proper formatting is what's posted to my processing script" -- I think it would be better to create the filename on the processing side to match what your JavaScript is displaying to ensure that it will always be valid. — NightHawk
– NightHawk, Commented Dec 17, 2011 at 6:51
Oh, the processing script does that and more, I just needed a way for the user to visually see the page name. thanks! — BD_Design
– BD_Design, Commented Dec 17, 2011 at 6:53

Aaron · Accepted Answer · 2011-12-17 07:10:55Z

1

Is this what you're after? http://jsfiddle.net/Nzv2Y/

edited Dec 17, 2011 at 7:10

answered Dec 17, 2011 at 6:52

Aaron

5,2471 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BD_Design Over a year ago

Aaron, it's almost there, just need to replace spaces with dashes and convert to lowercase. That was something I was really struggling with.

Aaron Over a year ago

@BD_Design I've edited it again to add support for the oninput event (which also fires when the user hits backspace) if available.

BD_Design Over a year ago

Aaron - That's exactly what I was looking for, cannot thank you enough! Also, great thinking on the backspacing, I didn't even consider it but it's a biggie! Thanks again!

BD_Design Over a year ago

For anyone following this post, I made a small correction to the script so it wouldn't add the file extension each time a correction was made in the textbox, resulting in 'filename.php.php.php'. Correction here: jsfiddle.net/gkmqx

Collectives™ on Stack Overflow

jQuery: Preview & Format Textbox Input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related