Question

我有一个包含两个字段的表单，名字和姓氏。用户不必填写字段。当用户单击提交按钮时，将显示一个jquery对话框，其中包含用户在表单中输入的数据。我只想显示输入字段的数据。我正在尝试使用if语句并使用length（）函数，但它无法正常工作。帮助会很棒！

这是我的对话框jquery脚本：

$(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

只需使用：

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

其次，指定$("input#firstname")几乎没用。只做$("#firstname")。第一个是不必要的冗长。

这也是一个问题：

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

您不能以这种方式构建格式错误的HTML。尝试：

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

Answer 2

对于初学者("input#lastname").val().length应为$("input#lastname").val().length

此外，如果您要使用jQuery构建，您应该知道每次使用选择器调用$时，您都要创建一个全新的jQuery对象。缓存选择器的结果通常更好。你的提交函数，重构，可能看起来像这样：

$('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;
    });

编辑：在查看了cletus的回答并通过Bobinc阅读this article之后更新了删除CSRF / XSS漏洞的功能

Answer 3

请使用以下代码

如果（$（ “＃名称”）。VAL（）。修剪（）== “”）警报（ “空”）;

适合我

如何使用jQuery确定表单字段是否为空？

3 个答案: