CODEWITHSUNDEEP
jquery
David19801
David19801

Reputation: 11448

textarea hide submit button until clicked?

I have a small textarea with ID='texta' and this has a submit button as part of the form.

How can I hide the submit button until the user clicks inside the textarea using javascript or jquery?

Upvotes: 1

Views: 2479

Answers (4)

Mohammad Saberi
Mohammad Saberi

Reputation: 13166

Take a look at this example. I hope I could understand you

http://jsfiddle.net/47Fcy/

HTML:

<textarea id="myTxt" name="myTxt"></textarea>
<input type="submit" id="btn" />

jQuery:

$(document).ready(function(){
    $('#btn').css('display','none');
    $('#myTxt').focus(function() {
        $('#btn').fadeIn();
    });
});

Upvotes: 0

vkGunasekaran
vkGunasekaran

Reputation: 6814

Initially set display of submit button to none using css. 

<input type="button" style="display:none;" value="submit" id="submitbtn" />

Then in the textarea onfocus set it visible like,

$('#txtarea').on('focus', function () { $('#submitbtn').show(); });

Note: txtarea and submitbtn are the id of textarea and submit button.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

Set the CSS display to none for the input by default:

input[type="submit"] {
    display : none;
}

Then:

$('#texta').on('focus', function () {
    $('input[type="submit"]').show();

    //if you want to only get the submit button for this form:
    //$(this).parents('form').find('input[type="submit"]').show();
});

Here is a demo: http://jsfiddle.net/8DnRE/

.on() is new in jQuery 1.7, so if you're using an older version place .on() with .bind(): http://api.jquery.com/on

Upvotes: 2

Rafay
Rafay

Reputation: 31043

hide it via css

<input type="submit" value="Submit" style="display:none"/>

$("textarea").click(function(){
$(":submit").show();
});

http://jsfiddle.net/vb8kr/4/

Upvotes: 2

Related Questions