如何使用從各種複選框派生的字符串值填充textarea？

我是javascripting的新手，但通過閱讀Q &就像在這個論壇上學到了很多東西。就像他們所說的，學習編碼的最好方法是看看其他人是如何編碼的！如何使用從各種複選框派生的字符串值填充textarea？

我正在嘗試使用基於javascript/html的表單來管理我的工作流程。有一點背景，我是一名爲各種患者樣本生成基於文本的報告的病理學家。許多輸出非常適合使用預先寫好的「罐裝評論」。我希望將這些評論鏈接到各種複選框值，以便我可以簡單地檢查相應的框，並在textarea中創建我的報告。

例如，如果我有4個不同的組織部位：

[]站點1 []站點2 []位點3 []部位4

並可以選擇的4個不同的診斷一個對於每個

[] diagnosis1 [] diagnosis2 [] diagnosis3 [] diagnosis4

我希望能夠選擇一個站點和診斷，並有與下面的格式輸出一個文本的相關值：

SITE1，活組織檢查：
- 診斷1

SITE2，BIOPSY：
- 診斷1

SITE3，活組織檢查：
- 診斷3

SITE4，活組織檢查：
- 診斷2

我有一些在此窗體的開端：

<body> 
Duodenum sites <br/> 
<form name=duodenum> 
<input type="checkbox" name="duoDx1" id="duoDx1" /> DUO, NSA <br /> 
<input type="checkbox" name="duoDx2" id="duoDx2" /> DUO, _ PART <br /> 
<input type="checkbox" name="duoDx3" id="duoDx3" /> DUO, BULB <br /> 
<input type="checkbox" name="duoDx4" id="duoDx4" /> DUO, ULCER <br /> 
</form> 

<p>&nbsp;</p> 
Duodenum diagnoses <br/>  
<form name=duodiags> 
<input type="checkbox" name="duoDiag1" id="duoDiag1" /> NSA <br /> 
<input type="checkbox" name="duoDiag2" id="duoDiag2" /> FOCAL ACTIVE <br /> 
<input type="checkbox" name="duoDiag3" id="duoDiag3" /> C A <br /> 
<input type="checkbox" name="duoDiag4" id="duoDiag4" /> CELIAC <br /> 
</form> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 

<textarea id="outPut" placeholder="Diagnoses" cols=80 rows=20></textarea> 

</body>

我的javascript：

var duoDxs = { 
duoDx1: 'DUODENUM, BIOPSY: \n \n', 
duoDx2: 'DUODENUM, ___ PART, BIOPSY: \n \n', 
duoDx3: 'DUODENUM, BULB, BIOPSY: \n \n', 
duoDx4: 'DUODENUM, "ULCER", BIOPSY: \n \n' 
} 

var duoDiags = { 
duoDiag1: '  - NO SIGNIFICANT ABNORMALITIES \n', 
duoDiag2: '  - FOCAL ACUTE INFLAMMATION\n', 
duoDiag3: '  - CHRONIC AND ACTIVE DUODENITIS\n', 
duoDiag4: '  - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES (SEE 
COMMENT)\n' 
} 

var mytextbox = document.getElementById('outPut'); 


var inputs = document.getElementsByTagName("input"); 
for (var i = 0; i < inputs.length; i++) { 
if (inputs[i].type === "checkbox" && inputs[i].name.indexOf('duoDx') > -1) { 
inputs[i].onchange = function() { 
if (this.checked) { 
mytextbox.value = mytextbox.value + duoDxs[this.name] + duoDiags[this.name]; 
} else { 
mytextbox.value = mytextbox.value.replace(duoDxs[this.name], ""); 
      } 
     } 
    } 
}

JSFiddle

但是，我似乎無法獲得複選框值的兩部分來填充文本ea以正確的方式。我似乎無法弄清楚如何讓填充我的textarea的函數循環訪問網站和診斷？任何幫助/教育將非常感激！

謝謝。 CK

來源

2012-11-29 user1837608

你有沒有考慮過使用jQuery？ – gibberish

嗨，我嘗試了一種類似的方法，在代碼中「借用」jQuery片段，但它們不起作用，而且我很難理解所做的事情，因爲我仍然不清楚jQuery。 – user1837608

根據你的問題，你想配對網站，診斷，診斷，可以多次使用：

 
SITE1, BIOPSY: 
- DIAGNOSIS 1 

SITE2, BIOPSY: 
- DIAGNOSIS 1 << second usage of DIAGNOSIS 1 

SITE3, BIOPSY: 
- DIAGNOSIS 3 

SITE4, BIOPSY: 
- DIAGNOSIS 2

在這種情況下，一個複選框是不是要走的路。首先，因爲似乎只有一個站點爲一個診斷，一個<input type="radio">會更合適。其次，實際提供輸入後需要重新設置這些值。

想想你的網站更多的咖啡自動售貨機：首先你選擇奶油（網站）的數量，然後糖的數量（診斷），並且機器自動沖泡你的咖啡，並重置兩者的值不確定，或者你必須按下按鈕才能得到咖啡（或者機器給你的任何具有獨特風味的飲料）。

因此，不要只爲您的複選框使用一種機制，請使用兩種：一種用於網站，另一種用於診斷。檢查是否已經分配了合作伙伴。如果有一個合作伙伴，雙方值添加到textarea的和刪除的選擇：

var choosenDiagnosis = null; 
var choosenSite = null; 

function testAndFill(){ 
    if(choosenDiagnosis !== null && choosenSite !== null){ 
     mytextbox.value += duoDxs[choosenSite.id]+ duoDiags[choosenDiagnosis.id] + "\n"; 
     choosenDiagnosis.checked = choosenSite.checked = false; 
     choosenDiagnosis = choosenSite = null; 
    } 
} 

var diagInputs = document.getElementsByName("duoDiag"); 
for (var i = 0; i < diagInputs.length; i++) { 
    diagInputs[i].onchange = function() { 
     choosenDiagnosis = this; 
     testAndFill();  
    }; 
} 
var diaxInputs = document.getElementsByName("duoDx"); 
for (i = 0; i < diaxInputs.length; i++) { 
    diaxInputs[i].onchange = function() { 
     choosenSite = this; 
     testAndFill();  
    };

JSFiddle

來源

2012-11-29 22:58:31 Zeta

嗨，謝謝！那是我想要做這個項目的另一種方法，但我可以看到你的邏輯。我需要花時間陪伴你的js來幫助我瞭解正在做什麼，然後我可以嘗試將它應用到我的模板的另一個草稿。 – user1837608

嗨，我想分享我的腳本建議作爲骨幹的形式。 [鏈接]（http://www.hematogones.com/pbsmears.html）。 – user1837608

只需更換這

var duoDiags = { 
      duoDiag1: '  - NO SIGNIFICANT ABNORMALITIES \n', 
      duoDiag2: '  - FOCAL ACUTE INFLAMMATION\n', 
      duoDiag3: '  - CHRONIC AND ACTIVE DUODENITIS\n', 
      duoDiag4: '  - VILLOUS BLUNTING AND INCREASED 
         INTRAEPITHELIAL LYMPHOCYTES (SEE COMMENT)\n' 
}

與

var duoDiags = { 
    duoDx1: '  - NO SIGNIFICANT ABNORMALITIES \n \n', 
    duoDx2: '  - FOCAL ACUTE INFLAMMATION\n\n', 
    duoDx3: '  - CHRONIC AND ACTIVE DUODENITIS\n\n', 
    duoDx4: '  - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES 
        (SEE COMMENT)\n\n' 
}

Check Fiddle

來源

2012-11-29 23:04:02

如何使用從各種複選框派生的字符串值填充textarea？

回答

相關問題