JS：缺少/可選數據的處理表格

前言：我不是程序員，甚至Web開發人員。我是一名只有足夠信息纔有危險的印刷設計師。所以，請不要假設我知道一些基本的東西;-)JS：缺少/可選數據的處理表格

我正在處理一個內部表單，爲我們的辦公室中的非HTMLers生成HTML。它只是一個基本的表單，它將數據輸入並將它們連接在適當的HTML中。

問題並非所有的字段條目都是必需的。但是，它目前的工作方式只是假定數據存在。

希望這是一個基本問題。但是，我需要將一些邏輯插入到忽略空字段的JavaScript的連接部分。

這裏就是我在談論的一個工作片斷：

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

當然

，實際的形式，有25個左右的領域。但是，我在這裏簡化了它的含義：假設只有一個子彈被輸入到表單中。我需要能夠告訴變量「文本」省略第二組

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

來源

2012-10-30 James

我無法訪問您的代碼段。 – Christophe

您的表單是否生成DOM元素或用戶可以複製/粘貼的html字符串？ – Christophe

在原問題 – James

我會採取這種方法：

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。

來源

2012-10-30 21:13:16 justspamjustin

中添加了代碼塊這使看起來非常好。我會採取這種方法，看看它是如何發展。謝謝。 – James

花了幾分鐘時間來檢查所有25個變量。但是，這很好！謝謝您的幫助。 – James

一個基本的解決辦法是從文本變量添加後處理和刪除空節點（例如<li></li>）。但它不適用於更復雜的情況（例如您的圖像）。

我建議你打破你的字符串分爲多個步驟，如下所示：

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

（？條件選擇1：選擇2）如果條件爲真，將選擇選擇1，選擇2如果沒有。在你的情況下，條件僅僅是知道字符串是否爲空。

來源

2012-10-30 21:02:01 Christophe

JS：缺少/可選數據的處理表格

回答

相關問題