Question

前言：我不是程序员甚至是Web开发人员。我是一名印刷设计师，只有足够的信息才有危险。所以，请不要认为我知道一些基本的东西; - ）

我正在使用内部表单为我们办公室中的非HTMLers生成HTML。它只是一个基本的表单，它将数据输入并在适当的HTML中连接在一起。

问题不是所有的字段条目都是必需的。但是，它目前的工作方式只是假设数据存在。

希望这是一个基本问题。但是，我需要在忽略空字段的javascript的连接部分插入一些逻辑。

这是我正在谈论的一个工作片段：

http://devtest.host.org/testing/sample-form.html

当然，实际表格有25个左右的字段。但是，我在这里简化它以表明我的观点：假设在表格中只输入了一个子弹。我需要能够告诉变量“text”省略第二组

<LI> </LI>

标签，因为没有第二个子弹数据。

如果有人对如何解决这个问题有一些建议，我会很感激。

感谢。

[编辑：添加代码块]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Parent Category HTML Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
label, textarea {
display:block;
}
</style>
<script type="text/javascript">
window.onload=function() {
document.getElementById('product').onsubmit=function() {
 var Main_Image=document.getElementById('Main_Image').value;
 var Bullet1=document.getElementById('Bullet1').value;
 var Bullet2=document.getElementById('Bullet2').value;


var text="<img src=\"assets/images/"+Main_Image+"\"><br><ul><li>"+Bullet1+"</li><li>"+Bullet2+"</li></ul>";
document.getElementById('code').value=text;
return false;
 }
}
</script>
</head>
<body>

<form id="product" action="#">
Filename: <INPUT TYPE="TEXT" TABINDEX="1" size="40" id="Main_Image"><BR>
Bullet 1: <INPUT TYPE="TEXT" TABINDEX="3" size="50" id="Bullet1"><BR>
Bullet 2: <INPUT TYPE="TEXT" TABINDEX="4" size="50" id="Bullet2"><BR>
<BR>

<input type="submit">
</form>
<BR><BR>

<p>HTML:</p>
<textarea rows="20" cols="80" id="code"></textarea>
</body>
</html>

Answer 1

一个基本的解决方案是添加后处理并从文本变量中删除空节点（例如<li></li>）。但它不适用于更复杂的情况（例如您的图像）。

我建议您将字符串分成多个步骤，如下所示：

var text=(Main_Image?"<img src=\"assets/images/"+Main_Image+"\"><br>":"")+
         "<ul>"+
         (Bullet1?"<li>"+Bullet1+"</li>":"")+
         (Bullet2?"<li>"+Bullet2+"</li>":"")+
         "</ul>";

如果condition为true，

（condition？choice1：choice2）将选择choice1，否则选择choice2。在您的情况下，条件只是知道字符串是否为空。

Answer 2

我会采用这种方法：

var Main_Image_present = Main_Image.length > 0;
var Bullet1_present = Bullet1.length > 0;
var Bullet2_present = Bullet2.length > 0;
var text= '';
if(Main_Image_present)
  text += '<img src="assets/images/'+Main_Image+'"><br>';
if(Bullet1_present || Bullet2_present) {
  text += '<ul>';
  if(Bullet1_present)
    text += '<li>'+Bullet1+'</li>';
  if(Bullet2_present)
    text += '<li>'+Bullet2+'</li></ul>';
  text += '</ul>';
}

基本上这只是检查输入值的长度。如果值存在（或长度> 0），它仅添加必要的HTML。

JS：处理带有缺失/可选数据的表单

2 个答案: