CODEWITHSUNDEEP
javascript
123
123

Reputation: 119

How to change the content of a div dynamically when the input changes?

<input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty" />
<div id="qtyvalue"><div>

There is an input text box on the page. I'm using Javascript to output the qtyvalue to the following div.

var qty =document.getElementById('qty').value;
document.getElementById('qtyvalue').innerHTML = qty;

Now, if the user enters a number in the text box, the value of qtyvalue will be changed accordingly, and I don't need to refresh the page. How should I change the code?

Upvotes: 0

Views: 3697

Answers (3)

NikolaP
NikolaP

Reputation: 1

Change button status on input field content change

<script type="text/javascript">
        $('#submit').attr('disabled',true);//
        $('#captchaStatusTrue').attr('hidden',true);//
        $('#captchaStatusFalse').removeAttr('hidden');//

      document.getElementById("status").onchange = function(){ 
        var status = document.getElementById("status").value;
        var falses = "false";

       if(status == falses){//
                $('#submit').attr('disabled',true);//
                $('#captchaStatusTrue').attr('hidden',true);//
                $('#captchaStatusFalse').removeAttr('hidden');//
            }
            else{//
                   $('#submit').removeAttr('disabled');//
                   $('#captchaStatusFalse').attr('hidden',true);//
                   $('#captchaStatusTrue').removeAttr('hidden');//

            }//
      };//
    </script>

Upvotes: 0

Hussain Akhtar Wahid &#39;Ghouri&#39;
Hussain Akhtar Wahid &#39;Ghouri&#39;

Reputation: 6617

<input type="text" onchange="javascript:callMeOnChange()" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty" />
<div id="qtyvalue"><div>
<script>
function callMeOnChange()
{
$('#qtyvalue').value=$('#qty').val();
}
</script>

Upvotes: 0

Inferpse
Inferpse

Reputation: 4145

Wrap it inside keyup event:

var input = document.getElementById('qty'); 
input.onkeyup = function() {
    document.getElementById('qtyvalue').innerHTML = input.value;    
}

But you should consider adding the same action on other events also: change, paste, input.

Working example here

Upvotes: 3

Related Questions