There's an incomprehensible phenomenon in the forin statement

We are doing a simple form validation. It's nothing big, but once the value is entered, the submit button is activated Submit is disabled by default, and validation is turned on whenever the form value changes. The HTML form to be checked is input text and text area, and the number of text areas may change, so I check it every time.

$('.mainBlock').on('change', function(){
    var arr = $('.mainBlock input[type], .mainBlock textarea');
    for(i in arr){
            console.log(arr[i].value);
        if(arr[i].value){
            $('.mainBlock button[type="submit"]').removeAttr('disabled');
            console.log(arr[i]);
            console.log('remove');
        }else{
            $('.mainBlock button[type="submit"]').attr('disabled', 'disabled');
            console.log(arr[i]);
            console.log('attr');
            break;
        }
    }
});

The problem is that attr('disabled', 'disabled') continues to run even if the text and text area are filled, and I put console.log to check the progress.

//csrf code
<input type="hidden" name="_csrf" value="~~">    //csrf node
remove //for verification
test    //input text value
<input type="text" maxlength="30" class="form-control">    //input text node
remove //for verification
test1    //textarea value
<textarea maxlength="300" class="form-control">    //textarea node
remove //for verification
a1    //input text value
<input type="text"class="form-control">    //input text node
remove //for verification
undefined
4
attr

The last three lines are the problem. I don't know why the object length comes out, and I don't know why the attr keeps running.

javascript

2022-09-22 21:55

3 Answers

@Jang Sung-won's answer is that forin goes around the attribute.

for(i in arr)

I think you expected the index of the array of i to be included in the code, but to do so

for(var i = 0 ; i < arr.length ; i++)

You have to use grammar.

If you use the for in door in chrome,

This is how the properties are listed.

It is said that forin is handled differently by browser. In the general loop, I recommend you just use the for statement.

2022-09-22 21:55

I'm going to answer with my gut feeling. You have to circulate by ear as shown below. Basically In javascript, for in is a property created to circle a particular property property, although it spins in the case of an array. So in order to go around an array, it's right to circulate through a For statement or an ear.


var arr = $('.mainBlock input[type], .mainBlock textarea');

arr.each(function(){
    console.log(this.value);
    if(this.value){
        $('.mainBlock button[type="submit"]').removeAttr('disabled');
        console.log(this);
        console.log('remove');
    }else{
        $('.mainBlock button[type="submit"]').attr('disabled', 'disabled');
        console.log(this);
        console.log('attr');
        break;
    }   
});

2022-09-22 21:55

The part you asked is the part that constitutes the basis of language, so you have to accurately understand the principle of motion.

JavaScript is a language that uses the prototype object model. Other languages that use this approach include self and io.

These prototype-based languages are characterized by asking the parent object for attributes that they do not have.

The for in syntax lists all of its properties. The problem is that the forin syntax lists the properties of the parent in addition to the properties you have.

var arr = $('.mainBlock input[type], .mainBlock textarea');

In the above case, arr is not a pure JavaScript object, but a jQuery object. Therefore, the separate properties that jQuery has are listed together.

To avoid this, you can use the for statement using the traditional C-style index, as explained by others, or the each function provided by jQuery.

Here, the above each function is an implementation of jQuery, so its behavior is slightly different from the forEach function provided in the JavaScript core.

I think you can use it with this in mind.

Note: hasOwnProperty

2022-09-22 21:55

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656