this find label in a form does not work

Question

I have two forms of the same class in a page. These forms are exactly the same with the same elements. On submitting one of them, I try to access the elements inside. Here is what the forms look like:

<form role="form" class="login-form" id="login-form">
                  {% csrf_token %}
                <div class="form-group">
                  <div class="input-icon">
                    <i class="icon fa fa-user"></i>
                    <input type="text" class="form-control" name="email" placeholder="Username" id="email">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-icon">
                    <i class="icon fa fa-unlock-alt"></i>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                  </div>
                </div>
                <div>
                  <!--input type="checkbox" id="remember" name="rememberme" value="forever" style="float: left;"-->
                  <label style="display: none; color: red;" id="incorrect_info">Veuillez vérifier vos informations</label>
                </div>

                <button class="btn btn-common log-btn">Se connecter</button>
              </form>

Now the javascript where I try to access the elements:

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();
    $(this).find('label[id="incorrect_info"]').css('display','block');

});

This code works for the inputs, but not for the label, which is not found.

EDIT :

Sorry here is actually how the code looks like. The find is called in the ajax done.

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();

    $.ajax({
        .......
    }).done(function (data) {
        if (data.success) {
            window.location.href = data.url;
        }
        else {
            $(this).find('label[id="incorrect_info"]').css('display','block');
        }
    });

});

Your code seems to work fine in isolation: https://jsfiddle.net/f6dgk2kw/. Could you provide a working example of the problem. Also note that your code implies that you're using duplicate `id` attributes, which is invalid - and would explain your use of the attribute selector to find the elements by their id. Use classes instead — Rory McCrossan, Apr 07 '17 at 09:29
Is there a specific reason for not using same classes instead of using the same id? See: [link](http://stackoverflow.com/a/5611975/2271768) — Kartal, Apr 07 '17 at 09:30
@Kartal, I did not noticed that I was using the same id. I'll change that. — Spider, Apr 07 '17 at 09:37
Indeed, calling the find works fine as it is in the fiddle. However, I call it inside the ajax done. I edited my post — Spider, Apr 07 '17 at 09:38

Spider · Accepted Answer · 2017-04-12T07:16:43.377

I figured this out. The problem is that $(this) scope is different inside the ajax function. What I've done is to save it before getting into it, and reused it after:

$('.login-form').submit(function(e){
    e.preventDefault();
    // Get information

    this_form = $(this);

    email = $(this).find('input[id="email"]').val();
    pass = $(this).find('input[id="password"]').val();

    $.ajax({
        ......
        success  : function(data, status){
        }
    }).done(function (data) {
        if (data.success) {
            window.location.href = data.url;
        }
        else {
            this_form.find('label[id="incorrect_info"]').css('display','block');
        }
    });

});

this find label in a form does not work

1 Answers1