after dom loaded textbox value is undefined

Question

This is strange. My .val() and .html() is always undefined although i am using it after everything is loaded on page. also, .text() is empty.

<div class="row col-md-12">
<div class="row col-md-12">
    <label id="lblDir" style="width:auto">Scripts Directory Path: <input type="text" id="txturl"></label>
</div>
<div class="row col-md-12">
    <div id="grid" style="border:dashed"></div>
</div>
<div class="row col-md-12">
    <input id="btnRun" type="button" value="Run Scripts" style="margin:5px" />
</div>
<div class="row col-md-12">
    <label id="result"></label>
</div>
</div>
<script>
$(function () {
    $("#btnRun").kendoButton();
    $("#btnRun").on("click", function (e) {
        alert($('#txtUrl').text());
    });
});

Things i have tried 1. putting script tag before div tag 2. adding onclick function in button html

<input id="btnRun" type="button" value="Run Scripts" onclick="onInstall();" style="margin:5px" />

Result is the same

Your id on the input is `txturl` but in jquery you are using `#txtUrl` it should be `#txturl`. Also if you want to get the value of the input use `$('#txturl').val()` — Carsten Løvbo Andersen, Oct 20 '17 at 06:02

Chris Happy · Answer 1 · 2017-10-20T06:16:17.307

As @Carsten Løvbo Andersen mentioned, you need to use $('#txturl').val() instead of $('#txtUrl').text() because:

#txtUrl doesn't exist. CSS classes and jQuery selectors are often case sensetive. (Case-insenstivity is not very well supported.)
input elements don't have .text(), but rather .val().

$(function () {
    $("#btnRun").on("click", function (e) {
        alert($('#txturl').val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row col-md-12">
<div class="row col-md-12">
    <label id="lblDir" style="width:auto">Scripts Directory Path: <input type="text" id="txturl"></label>
</div>
<div class="row col-md-12">
    <div id="grid" style="border:dashed"></div>
</div>
<div class="row col-md-12">
    <input id="btnRun" type="button" value="Run Scripts" style="margin:5px" />
</div>
<div class="row col-md-12">
    <label id="result"></label>
</div>
</div>

I appreciate the honor, but i'm happy with letting your answer stay, it's well documented. +1 — Carsten Løvbo Andersen, Oct 20 '17 at 06:15
@Chris Thanks, i had tried .val() previously and even that didn't work. Kousik pointed rightly that I didn't notice txtUrl was upper case :( so STUPID of me...but your point also stands valid :) — Samra, Oct 22 '17 at 22:45

score 1 · Accepted Answer · answered Oct 20 '17 at 06:08

1

You have to keep the id in HTML markup and id value in script same. And the id value is case sensitive.

In your html markup the id of input type is "txturl" but in js it is "txtUrl". Make both either "txturl" or "txtUrl" and then it should work fine.

answered Oct 20 '17 at 06:08

KOUSIK MANDAL

2,002
1
21
46

1

An `input` element uses `.val()`, not `.text()`. :) – Chris Happy Oct 20 '17 at 06:13

after dom loaded textbox value is undefined

2 Answers2