dynamically disabling/enabling a textbox

Question

I'm having a problem trying to make this code work. The purpose is simply to enable a textbox when the option "Bus" is selected from a DropList.

At the moment I have a for loop running through and disabling all the necessary boxes (there are 15 identical rows). At the same time it is enabling a different function which is based on changing the selection in the same box, which works. Whereas the function in question doesn't work.

Here is the function:

$(function () {

    for(var i=0;i<15;i++){ //loop through each of the rows
        $("#Select" + i + "Box_C").change(callbackFactory(i)); //This is a working  function
        $("#Select" + i + "Box_C").change(toBus(i)); //This one isn't working
        $("#Text" + i + "Box_Q1").prop('disabled', true); //this one is working
    };
    function busEnabler(num){
        $("#Text" + num + "Box_Q1").prop('disabled', false);
        };

    function toBus(numm){
        var jk = numm //Closures confuse me
        if ($("#Select" + numm + "Box").val() === "Bus"){
            $("#Text" + numm + "Box_Q1").prop('disabled', false);
            console.log(jk);
            busEnabler(jk);
            }
        else {
            $("#Text" + numm + "Box_Q1").prop('disabled', true);
            console.log($("#Select" + numm + "Box_C") + "=" + $("#Select" + numm + "Box_C").val());
        }
        };
});

The ID's are made up (the real ones are horribly named - not my choosing) so if there is a typo in the ID's it's irrelevant.

Also as a side note I can't seem to log anything to the console after the page has loaded (using FireBug).

callbackFactory:

function callbackFactory(i){
        console.log('changing');
        return function(){
            transportChange($("#_Q0_Q"+ i +"_Q3_C").val(), i);
        };

When you use as handler a referenced function, don't use parenthensis, use just name of function for reference: `.change(toBus)`. But as you need to pass `i` as parameter, wrap it inside anonymous function: `.change(function(){toBus(i)})`. But now, i guess you'd have better to provide a jsfiddle in order to let us figure out what you are trying to do here — A. Wolff, Jan 06 '14 at 10:07
See the edit. Why would I need to wrap it in an anonymous function, but don't have to wrap callbackFactory(i)? I tried it but nothing changed. — NDevox, Jan 06 '14 at 10:22
Why don't include all your code in the jsffidle? The functions are missing. Also, why are you using jQuery version 1.6.4? — dcodesmith, Jan 06 '14 at 10:24
callbackFactory() can returns a function, so in this case you use the returned function as handler. You didn't provide any relevant code in your jsfiddle and a good advice should be to read some javascript basic tutos — A. Wolff, Jan 06 '14 at 10:25
callbackFactory() has absolutely no relevance to this function, it is only used in the same loop and I included it because it is fully functional. The jsfiddle shows an equivalent of what a single row for my HTML would be like, with the JS for that row. I've read the through tutorials but I still can't see what is wrong with my code. As to jQuery 1.6.4, I don't decide which library I used and so far my work has been stuck on 1.3.1. — NDevox, Jan 06 '14 at 10:29
I did screw up that jsfiddle looking back at it. Which was foolish. I still don't completely understand why it is failing though, considering the only change I had to make was to nest toBus() inside two anonymous functions. — NDevox, Jan 06 '14 at 10:39
@Scironic this is a for loop closure typicall case. An other fix would be to return a function from toBus() function to avoid these anonymous functions — A. Wolff, Jan 06 '14 at 10:41

score 2 · Accepted Answer · answered Jan 06 '14 at 10:31

2

The problem is in the way you are attaching the onchange events. The following statement (that you have used) does not attach any method.

 $("#Select" + i + "Box_C").change(toBus(i));

So whenever the value of the select box changes, the 'toBus' method is never called.

I have created a Fiddle. Please refer that. JSFiddle

answered Jan 06 '14 at 10:31

Akanksha

188
1
13

Thanks! That one worked. So why does my method not work for toBus() but works for callbackFactory()? – NDevox Jan 06 '14 at 10:36
1

+1 i forgot about closure. @Scironic see: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – A. Wolff Jan 06 '14 at 10:38
closures have really been screwing with my code recently. I need to get to grips with them. Thanks for the link. – NDevox Jan 06 '14 at 10:41
@Scironic : I need to see the callbackFactory function to see why it was working. – Akanksha Jan 06 '14 at 11:17
The function callbackFactory is not working. The function it is returning gets attached to the onchange event. That is why the code inside that function is working but console.log('change'); is not logging anything when you change the value of the selectbox. [link](http://jsfiddle.net/Dm9Yt/7/) – Akanksha Jan 06 '14 at 11:33

score 0 · Answer 2 · answered Jan 06 '14 at 10:25

Use the following code for your purpose and please show the function callbackFactory also, so that I can resolve your complete problem.

$(doucment).on('change', 'select[id^=Select]',function() {
        $('input[id^=Text]').prop({disabled:true});
        var id = $(this).attr('id');
        var txtId = id.replace('Select','Text').replace('Box','Box_Q1');
        if($(this).val() == 'Bus') {
           $('#'+txtId).prop({disabled:false});
        }


});

dynamically disabling/enabling a textbox

2 Answers2