CODEWITHSUNDEEP
javascripthtmlcss
Jac Kellie
Jac Kellie

Reputation: 29

Making a button appear when a number is entered into the form

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.

Upvotes: 2

Views: 770

Answers (3)

StuckOverflow
StuckOverflow

Reputation: 1011

Based on your question I am guessing you are looking to make the confirm button appear as soon as a key is pressed in the text box. JQuery is a very helpful library for handling browser events, you should look into using that.

html:

<div id="box1">
   <input type="text"  id="txtAmount" />
   <input type="button" id="btnConfirm"  value="Confirm"/>
</div>

​

javascript/jquery:

//self invoking javascript function
$(function() {

    //hide the button on page load
    $('#btnConfirm').hide();


    //listen for a keypress event
    $('#txtAmount').on('keypress', function() {
        $('#btnConfirm').show();
    });
});​

here is the jsfiddle if you would like to try it http://jsfiddle.net/49Dhc/5/

Upvotes: 1

zachjs
zachjs

Reputation: 1748

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>

Upvotes: 5

JJJ
JJJ

Reputation: 490

Actually make the "confirm" button.

<div id="box1">
     <form action="">
         <input type="string" name="amount" />
         <input type="submit" value="confirm" id="submit" style="display:none"/>
     </form>
</div>

Anytime the element with name "amount" is changed or a key is pressed (onchange for backspaces) if the value is not "" or nothing then it'll display the submit button using inline css.

<script>
amount.onchange=amount.onkeyup=function(){
   document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>

Upvotes: 0

Related Questions