jQuery not updating input value on page load

Question

Learner here...when the page loads, I want to update the value of an input field with the count of another element on the page.

This doesn't work to update the value, but the console log does work:

$(document).ready(function(){
    $(window).on("load",function(){
        var count = 0;
        $(".docCat").each(function(){
            count++;
        });
        console.log(count);
        $(this).closest("input").val(count);
    });
});

The console log is logging the count number correctly, but it doesn't update the input value with the number? Sorry for the newby question, I've searched and tried stuff but just keep hitting dead end. Thanks in advance for any tips!

Show your HTML, i know what the problem is, but i can help you better if i can see the HTML — Pavlo, Feb 01 '18 at 18:18
You dont need both __document.ready__ and __window.onload__, just use __document.ready__. — Munim Munna, Feb 01 '18 at 18:22
Please share a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — Ele, Feb 01 '18 at 18:23
`this` is the window object, which has no closest `input` element. (`closest` looks in ancestors). — trincot, Feb 01 '18 at 18:26
The document.ready function could consist of `$("#someInput").val($(".docCat").length);` - you don't need a loop. — James, Feb 01 '18 at 18:34

Ele · Accepted Answer · 2018-02-01T18:51:12.533

This is your approach

$(document).ready(function(){
    $(window).on("load",function(){
        var count = 0;
        $(".docCat").each(function(){
            count++;
        });
        console.log(count);
        $(this).closest("input").val(count);
    });
});

You have some issues, let's analyze them :-)

Your're using the wrong this value, your code is using the window's context (this).

$(window).on("load",function(){ <- window's context
    var count = 0;
    $(".docCat").each(function(){
        count++;
    });
    console.log(count);
    $(this).closest("input").val(count);
});
      ^

You're using two ways to execute your logic after both document and window are loaded. You need to decide where to put your logic.

            |
            v
$(document).ready(function(){
    $(window).on("load",function(){
              ^

You don't need to execute the each function to find the count of selected elements. Just use either length attribute or size function.

var count = 0; <- Unnecessary
$(".docCat").each(function(){
    count++; <- Unnecessary
});
^

Probably this is not what you want to do, because you're using the wrong this context:

$(this).closest("input").val(count);
  ^

Look this code snippet with those fixes

$(document).ready(function(){
    $(window).on("load",function(){
        $('input').val($(".docCat").length);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="docCat"></span>
<span class="docCat"></span>
<span class="docCat"></span>
<span class="docCat"></span>

<input value="">

See? the input has the correct count.

Be sure, how do you want to select the input fields.

Currently you're using: $(this).closest("input").

jQuery not updating input value on page load

1 Answers1

This is your approach

You have some issues, let's analyze them :-)

Look this code snippet with those fixes

Resources