Question

From this topic: how do i make an invisible text input box visible on hover?

I read this problem and it helps me a lot and I came with this code:

HTML:

<div id="box1">
    <form action="">
    <input type="string" name="amount" />
    </form>
</div> 

CSS:

#box1 {
    width:100px;
    height:30px;
}

#box1:hover input {
    display:block;
    padding:3px;
}

#input {
    display:none;
}

My problem is that once I input the amount, I want the confirm button to show up. Is this possible?

Thanks in advance.

Answer 1

This should accomplish what you are after:

<!-- In the head of your document: -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').hide();
        $('#amount').keyup(function() {
            if ($(this).val() == '') {
                $('#submit').hide();
            }
            else {
                $('#submit').show();
            }
        });
    });
</script>

<!-- For your form in the body: -->
<div id="box1">
    <form action="">
        <input type="string" name="amount" id="amount" />
        <input type="submit" name="submit" id="submit" />
    </form>
</div>