jQuery show submit button on input field click

Question

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.

RoToRa · Accepted Answer · 2010-05-04 15:11:18Z

2

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

answered May 4, 2010 at 15:11

RoToRa

38.5k12 gold badges73 silver badges110 bronze badges

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

Comments

PetersenDidIt · Accepted Answer · 2010-05-04 16:05:11Z

1

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');

edited May 4, 2010 at 16:05

answered May 4, 2010 at 15:12

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

4 Comments

Panama Jack Over a year ago

I don't know why I have bad look..lol, still doesn't work. I also have this on the textarea. onclick="if (this.value=='Write a comment...') this.value='';" Will that still work with that in the textarea tag? Also can that be incoporated in to the function instead? I took off the onclick but it still doesn't work. Thanks for help

Panama Jack Over a year ago

Ok it somewhat works now, problem is, its not quite what I need. I need it to show the button when you click the input field as if you were going to start typing. This code above only shows the submit button if you click away from the field after having clicked on the field first.

PetersenDidIt Over a year ago

@Pjack try it now, updated it to handle the "Write a comment..." text and it should work how you want it to.

Panama Jack Over a year ago

That's it. Perfection. Thank you so much. You sure know your stuff. I actually started experimenting with focusin and focusout a few minutes ago but it wasn't completely working. Thanks again

Collectives™ on Stack Overflow

jQuery show submit button on input field click

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related