469,954 Members | 1,722 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,954 developers. It's quick & easy.

jQuery val() on input field only works when preceded by alert()


I've stumpled upon a very weird issue.

The situation is that I'm styling my own file input field, by replacing it with a text field and a button, lying below the original file input, which in turn has been given an opacity of 0. It looks great. However, when a file is selected I want to update my new "fake" text field with the file name.

This works, but only when the val() command is preceded by an alert!

Expand|Select|Wrap|Line Numbers
  1. jQuery('input[type=file]').wrap('<div class="fileinputholder" style="position:relative;" />');
  2.             jQuery('input[type=file]').attr("style","position:absolute; z-index:2; opacity:0; filter:alpha(opacity: 0);");
  3.             jQuery('div.fileinputholder').each(function(){
  4.                 jQuery(this).append('<input type="text" size="40" style="position:absolute;top:0px;left:0px;" /><img style="position:absolute; top:0px; left:270px;" src="images/browse.png" alt="browse" />');
  5.             });
  6.             jQuery('input[type=file]').each(function(){
  7.                 jQuery(this).change(function(){
  9. //alert('changed');
  10. jQuery(this).next().val(jQuery(this).val());
  11.                 });
  12.             });
Any ideas? :)
Oct 20 '10 #1
0 1203

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Paul Jørstad | last post: by
13 posts views Thread by Eddie | last post: by
3 posts views Thread by leiko | last post: by
13 posts views Thread by Lee | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.