How to make text box enable and disable in jquery

Question

I have written a sample code of html and script as follows: When i execute this code first i will get that alert hello but other alert when i change at cca by pressing tab button then it is not showing alert. How to use that text box and enable and disable other text fields of it.

HTML:

<div id="cca" class="leaf">
     <label class="control input text" title="">
        <span class="wrap">cca</span>
        <input class="" type="text" value="[Null]">
        <span class="warning"></span>
     </label>
</div>

JS:

jQuery(document).ready(function () {        
    alert("hello");        
    jQuery("#cca label.control input").on('change', function (event) {
        alert('I am pretty sure the text box changed');
        event.preventDefault();
    });
});

First of all your html is broken. You can use that many elements inside label, isn't nice. And your label isn't doing it's purpose, you're not useing `for` attribute. — DontVoteMeDown, Dec 18 '13 at 12:31

score 2 · Accepted Answer · edited Dec 18 '13 at 13:38

2

I'm not really sure what you are trying to do but I can help get the alert working. You are basically not using jQuery "on" function correctly.

$('#thisNeedsToBeContainer').on('focusout', '#elemToBindEventTo', function (event)....

One of the following will do what you need:

This will fire when text box is left

$(document).ready(function () {      

    alert("hello");        
    $("#cca").on('focusout', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        event.preventDefault();
    });
});

This, will fire on change

$(document).ready(function () {       
    alert("hello");        
    $("#cca").on('change', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        event.preventDefault();
    });
});

This, will fire on keyup as typing

$(document).ready(function () {  
    alert("hello");        
    $("#cca").on('onkeyup', 'label.control input', function (event) {
        alert('I am pretty sure the text box changed');
        event.preventDefault();
    });
});

See Demo on JsFiddle

You should also close your input:

<input class="" type="text" value="[Null]"/>

edited Dec 18 '13 at 13:38

aledpardo

705
10
19

answered Dec 18 '13 at 12:43

Purple Hexagon

3,418
2
22
45

can i use as such key press and change also as like how u have used focusout – jasim Dec 18 '13 at 12:52
thank u Jon for the code you shared with me but the thing is in my browser where am executing it is not taking any event with "on" so i cannot go with that code..... it throws error like "Uncaught TypeError: Cannot call method 'on' of null flow.html?_flowId=viewReportFlow&standAlone=true&_flowId=viewReportFlow&ParentFolderUri=%2Freports%…:1035 (anonymous function) flow.html?_flowId=viewReportFlow&standAlone=true&_flowId=viewReportFlow&ParentFolderUri=%2Freports%…:1035 n jquery-1.7.1.min.js:2 o.fireWith jquery-1.7.1.min.js:2 e.extend.ready jquery-1.7.1.min.js:2 c.addEventListener.B" – jasim Dec 18 '13 at 12:56
The only thing I changed was jQuery to $. Not sure how you have no conflict setup. Should work in 1.7.1 though. maybe try... jQuery(document).ready(function () { alert("hello"); jQuery("#cca").on('focusout', 'label.control input', function (event) { alert('I am pretty sure the text box changed'); event.preventDefault(); }); }); – Purple Hexagon Dec 18 '13 at 12:57

score 1 · Answer 2 · answered Dec 18 '13 at 12:46

You're listening for the change event, which will not fire until the input loses focus. Given that the code you've provided does trigger an alert once the focus leaves the input (by tab or click), I'm guessing you were expecting a response after typing but before changing focus. To accomplish that, listen for the input event instead.

How to make text box enable and disable in jquery

2 Answers2

Linked

Related