jQuery val is undefined?

Question

I have this code:

<input type="hidden" id="editorTitle" name="title" value="home">
<textarea name="text" id="editorText"></textarea>

But when i write $('#editorTitle').val() and $('#editorText').html(), $('#editorTitle').val() is 'undefined' and $('#editorText').html() is empty?

What is wrong?

---

Edit:

Here is my full code:

function openEditor() {
    $("#editor").show().animate({ width: 965, height: 380 }, 1500);
    $("#editor textarea").show();
}

function closeEditor() {
    $("#editor").animate({ width: 985, height: 1 }, 1500, function () {
        $("#editor").hide();
        $("#editor textarea").hide();
    });
}

function setedit() {
    $.ajax({
        type: "POST",
        url: "engine.php",
        data: "title=" + $('#editorTitle').attr('value') + "&text=" + $('#editorText').html(),
        beforeSend: function () {
            $('#mainField').html('<img src="data/images/loader.gif" alt="Loading...">');
        },
        success: function (msg) {
            alert(msg);
            closeEditor();
            search();
        }
    });
}
function search() {
    $('#title').val($('#search').val());

    $.get('engine.php?search=' + $('#search').val(), function (data) {
        $('#mainField').html(data);
    });

    $.get('engine.php?raw=true&search=' + $('#search').val(), function (data2) {
        $('#editorText').html(data2);
    });

    $.get('engine.php?title=true&search=' + $('#search').val(), function (data2) {
        $('#h1').html(data2); // Row 152
        $('#editorTitle').html(data2);
    });
}

$(document).ready(function () {
    $("#ready").html('Document ready at ' + event.timeStamp);
});

But what is wrong?!?!

Kado

Are you using $('#editorTitle').val() and $('#editorText').html() in jQuery ready event/after the elements are available in DOM? – Goodall

Nothing wrong in your code. You need to provide more context. Test case at jsfiddle.net/heYJh – Catawba

editorText is empty because there's nothing in the textarea. make sure you are doing the jQuery onDomReady – Joanjoana

Is .val() still undefined if you close the input tag? Also, shouldn't html() be empty in this case? I thought it returned inner child elements, and the textarea tag has none. Or am I mistaken? – Nunuance

You might have computed the value before browser has parsed the elements, so use the code after ready function : $(document).ready(function(){}) – Gefell

Thanks for the edit. How does your code get called? The $(document).ready() doesn't do anything related to the setEditor() in which the problem occurs. I gather that the undefined and empty values occur in the POST-request URL, not as a result of the search(). – Catawba

Answer 1

You probably included your JavaScript before the HTML: example.

You should either execute your JavaScript when the window loads (or better, when the DOM is fully loaded), or you should include your JavaScript after your HTML: example.

Seaborne

You made my day! I was to get the value on change action using $(this) context and almost I was getting mad until I saw your solution. Thx. – Gamma

Answer 2

You should call the events after the document is ready, like this:

$(document).ready(function () {
  // Your code
});

This is because you are trying to manipulate elements before they are rendered by the browser.

So, in the case you posted it should look something like this

$(document).ready(function () {
  var editorTitle = $('#editorTitle').val();
  var editorText = $('#editorText').html();
});

Hope it helps.

Tips: always save your jQuery object in a variable for later use and only code that really need to run after the document have loaded should go inside the ready() function.

Alp

Answer 3

This is stupid but for future reference. I did put all my code in:

$(document).ready(function () {
    //your jQuery function
});

But still it wasn't working and it was returning undefined value. I check my HTML DOM

<input id="username" placeholder="Username"></input>

and I realised that I was referencing it wrong in jQuery:

var user_name = $('#user_name').val();

Making it:

var user_name = $('#username').val();

solved my problem.

So it's always better to check your previous code.

Scrawny

Answer 4

could it be that you forgot to load it in the document ready function?

$(document).ready(function () {

    //your jQuery function
});

Outlaw

Answer 5

I just ran across this myself yesterday on a project I was working on. I'm my specific case, it was not exactly what the input was named, but how the ID was named.

<input id="user_info[1][last_name]" ..... />
var last_name = $("#user_info[1][last_name]").val() // returned undefined

Removing the brackets solved the issue:

<input id="user_info1_last_name" ..... />
var last_name = $("#user_info1_last_name").val() // returned "MyLastNameValue"

Anyway, probably a no brainer for some people, but in case this helps anyone else... there you go!

:-) - Drew

Charlottcharlotta

Answer 6

you may forgot to wrap your object with $()

  var tableChild = children[i];
  tableChild.val("my Value");// this is wrong 

and the ccorrect one is

$(tableChild).val("my Value");// this is correct

Multistage

Answer 7

try: $('#editorTitle').attr('value') ?

Unchancy

Answer 8

In my case I had 2 functions with same name.

Erectile