jQuery show submit button on input field click

Question

Hi,

I'm trying to have a comment input field that will show the submit button on a dynamically created form when you click on the input field. Similar to how facebook comments work. When you click on the input field the submit button appears and when you click off it disappears. All the comment input id's are comment_1 etc and the submit button id's are submit_1 etc.

I've tried this,

jQuery("#[id^='comment_']").live('click',function(event){ 
    if(jQuery("#[id^='comment_']").val() == ""){ 
        jQuery("#[id^='submit_']").hide(); 
    } 
    else { 
        jQuery("#[id^='submit_']").show(); 
    } 
}); 

And that won't work for some reason. Any suggestion or how it can be accomplished would be great.

Answer 1

You need to remove the # from the selectors. Also I think you don't want the click event, but focus and blur.

Answer 2

jQuery("[id^='comment_']").live('focusin focusout',function(e){
    var commentText = "Write a comment...",
        id = this.id.replace('comment_',''),
        val = jQuery(this).val();   
    if (e.type == 'focusin'){
        val = (val == commentText) ? '' : val; 
        jQuery("#submit_"+id).show();
    } else if (e.type == 'focusout') {
        val = (val == '') ? commentText : val; 
        if( val == commentText){ 
            jQuery("#submit_"+id).hide(); 
        }
    }
    jQuery(this).val(val);
}).trigger('focusout');