How do I determine if form field is empty with jQuery?

Question

I've got a form with two fields, firstname and lastname. The user does not have to fill in the fields. When the user clicks the submit button, a jquery dialog displays with the data the user entered in the form. I only want to show the data for the fields that were entered. I'm trying to do an if statement and use the length() function but it isn't working. Help would be great!

Here is my dialog jquery script:

$(function(){
    //Initialize the validation dialog
    $('#validation_dialog').dialog({
        autoOpen: false,
        height: 600,
        width: 600,
        modal: true,
        resizable: false,
        buttons: {
            "Submit Form": function() {
                document.account.submit();
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    // Populate the dialog with form data
    $('form#account').submit(function(){
        $("p#dialog-data").append('<span>First Name: </span>');
        $("p#dialog-data").append('<span>');
        $("p#dialog-data").append($("input#firstname").val());
        $("p#dialog-data").append('</span><br/>');
        if (("input#lastname").val().length) > 0) {
            $("p#dialog-data").append('<span>Last Name: </span>');
            $("p#dialog-data").append('<span>');
            $("p#dialog-data").append($("input#lastname").val());
            $("p#dialog-data").append('</span><br/>');
        };
        $('#validation_dialog').dialog('open');
        return false;
    });
});

Answer 1

For starters ("input#lastname").val().length should be $("input#lastname").val().length

Additionally, if you are going to build with jQuery you should be aware that every time you call $ with a selector you are creating an entire new jQuery object. It's generally better to cache the results of your selector. Your submit function, refactored, might look something like this:

$('form#account').submit(function(){
        dialog_data = $("p#dialog-data");
        _data = $('<span>First Name: </span>'); //Create a DOM element.
        _data.append($("<span>").text($("input#firstname").val()));
        _data.append('<br/>');
        last_name = $("input#lastname").val();
        if (last_name.length) > 0) {
           _data.append('<span>Last Name: </span>');
           _data.append($("<span>").text(last_name)));
           _data.append('<br/>');
        };
        dialog_data.append(_data);
        $('#validation_dialog').dialog('open');
        return false;
    });

EDIT: Updated function to remove the CSRF / XSS hole after looking at cletus' answer and reading this article by Bobinc

Answer 2

Just use:

if ($("#firstname").val() != "") {
  // something is there
}

Secondly, there's little use in specifying $("input#firstname"). Just do $("#firstname"). The first is unnecessarily verbose.

Also this is a problem:

$("p#dialog-data").append('<span>');
$("p#dialog-data").append($("input#firstname").val());
$("p#dialog-data").append('</span><br/>');

You can't build malformed HTML this way. Try:

$("<span>").text($("#firstname").val()).appendTo("#dialog-data");