Javascript JS：处理缺少/可选数据的表单_Javascript

Javascript JS：处理缺少/可选数据的表单

javascript

Javascript JS：处理缺少/可选数据的表单,javascript,Javascript,前言：我不是程序员，甚至不是网络开发者。我是一个印刷设计师，有足够的信息来制造危险。所以，请不要以为我知道一些基本的东西；-）我正在制作一个内部表单，为我们办公室的非HTML用户生成HTML。它只是一个基本表单，它接受数据输入并将其连接到适当的HTML中问题是并非所有字段条目都是必需的。但是，它目前的工作方式只是假设数据存在希望这是一个基本问题。但是，我需要在javascript忽略空字段的连接部分插入一些逻辑下面是我所说内容的一个工作片段：当然，实际表单有25个左右的字段。但是，我

前言：我不是程序员，甚至不是网络开发者。我是一个印刷设计师，有足够的信息来制造危险。所以，请不要以为我知道一些基本的东西；-）

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

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

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

下面是我所说内容的一个工作片段：

当然，实际表单有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>


父类别HTML生成器
* {
保证金：0；
填充：0；
}
身体{
背景色：白色；
}
标签，文本区{
显示：块；
}
window.onload=function（）{
document.getElementById（'product'）。onsubmit=function（）{
var Main_Image=document.getElementById（'Main_Image'）。值；
var Bullet1=document.getElementById（'Bullet1'）.value；
var Bullet2=document.getElementById（'Bullet2'）。值；
var text=“
”+Bullet1+”
“+Bullet2+””；
document.getElementById（'code'）。值=文本；
返回false；
}
}
文件名：

项目符号1:

项目符号2:






HTML:

基本解决方案是添加后处理并从文本变量中删除空节点（例如

）。但它不适用于更复杂的情况（例如，您的图像）

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

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

var text=（主图像？
：“”）+
“”+
（Bullet1？“”+Bullet1+”“：”）+
（Bullet2？“+Bullet2+”“：”）+
“”；

（条件？choice1:choice2）如果条件为真，则选择choice1；如果条件为非真，则选择choice2。在您的情况下，条件只是知道字符串是否为空。

我将采用以下方法：

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>';
}

var Main\u Image\u present=Main\u Image.length>0；
变量Bullet1_present=Bullet1.length>0；
变量Bullet2_当前=Bullet2.length>0；
var text=''；
如果（主图像存在）
text+='
'；
如果（有公告1 | |有公告2 |）{
文本+=“”；
如果（有公告1)
text+=''+Bullet1+''；
若有（2号公告）
text+=''+Bullet2+''；
text+=''；
}

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

您的表单是否生成DOM元素，或者用户可以复制/粘贴的html字符串？在原始问题中添加了代码块这看起来非常好。我将采取这一方法，并观察其进展情况。谢谢。花了几分钟来检查所有25个变量。但是，这很有效！谢谢你的帮助。