javascript - 隐藏输出文本区域中的 null 值和空值

Question

我有一个 HTML 表单，我正在使用 <input> 获取用户输入和<select>字段，一旦用户输入所有相关字段，他们单击表单提交按钮，它将显示在 <textarea> 中具有一些基本的格式。

参见 JS fiddle 示例 https://jsfiddle.net/dbyo6ctv/35/

我正在努力解决的一件事是使用 if 语句来隐藏 <textarea> 的输出。如果值保留为空，则会导致“Null”、“未定义”或空格。

以下是我的尝试，

if($('cName').val() === 'undefined'){"$(\n\rName: "+name+").hide();}

尽管这只会导致语法错误。

<小时/>

为了澄清以下字段是否有用户输入，

客户端名称 ->“测试”

错误消息 ->(此输入留空)

选择 -> 未选择任何内容

<小时/>

输出显示为

名称:测试

消息:

选择:空

<小时/>

我希望它在上述情况下如何输出如下，

名称:测试

所有其他区域都隐藏。

<小时/>

感谢您提供的所有帮助。

<小时/>

编辑

如果所有字段都已填写，我希望实现的最终结果示例，

Name                            -    Name
Advised x                       -    Yes
Logged x                        -    Yes

-----------------------------------------------------------------

Describe Issue
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Summary                         -    Summary
Started occurring               -    2018-12-17
Things affected                 -    1

Error message                   -    Errors

-----------------------------------------------------------------

System Information
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
System Audit                    -    Yes
Server                          -    Live
Version                         -    1.23.12.312
Win OS Version                  -    Windows 8
System Architecture             -    64bit
MSO version                     -    MSO 365
Antivirus Installed             -    AV here

------------------------------------------------------------------

What actions been taken:
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
steps taken

Assistance?                     -    Yes | Initals 


------------------------------------------------------------------

Resolution                      -    Closing

这个想法是任何留空的字段都将被隐藏，并且任何双倍的换行符(由于隐藏字段而一个接一个)也将被隐藏。

Answer 1

以下是获得您想要的输出并进行一些清理的建议:

const ret = [
  {id: 'clientName', label: 'Name'},
  {id: 'errorMessage', label: 'Message'},
  {id: 'thingsAffected', label: 'Select', linebreak: true}
].reduce((memo, {id, label, linebreak}) => {
  const val = $(`#${id}`).val();
  if (val) {
    if (linebreak && memo.length) {
      memo.push('-------------------------------------------------------')
    }
    memo.push(`${label}: ${val}`);
  }
  return memo;
}, []).join('\n\r');

Updated Fiddle

说明:

1. 我们从一个对象列表开始，这些对象为我们想要包含在结果中的每个表单元素定义 ID 和标签
2. 我们在数组上使用 reduce，因为与 map 不同，它使我们能够有选择地添加到结果
3. reduce 的初始结果是一个空数组 - reduce 的第二个参数
4. 在每次迭代中，我们都会测试获取控件的值 - 如果它是真的，我们会向 reduce 累加器添加一个元素(我喜欢称之为 memo
5. 最后，我们将reduce的结果与'\n\r'连接起来