Question

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

例如参见JS小提琴 https://jsfiddle.net/dbyo6ctv/35/

我苦苦挣扎的一件事是使用if语句，如果值保留为空会导致输出'Null''undefined'或空白，则将<textarea>的输出隐藏起来。

下面是我的尝试，

<textarea>

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

为澄清以下字段是否具有如下用户输入内容，

客户端名称->“测试”

错误消息->（此输入保留为空白）

选择->未选择

输出显示为

名称：测试

消息：

选择：空

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

名称：测试

所有其他区域都隐藏了。

谢谢您的协助。

修改

如果所有字段均已填写，我希望将其作为输出的最终结果的示例，

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

这个想法是，任何保留为空的字段都将被隐藏，并且任何加倍的换行符（由于隐藏的字段而又一个接一个）也将被隐藏。

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

说明：

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

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

1 个答案: