僅使用Javascript，如何防止輸出禁用的表單元素？

Question

我正在嘗試將表單輸出到同一頁面上的文本區域，並使其僅顯示任何啟用的字段。 您現在可以在我的JSFiddle上看到它，現在，當您單擊“合並”按鈕時，即使默認情況下禁用了兩個類別，它也會輸出所有4個類別。

因此它將輸出：

Optional Detail: 
Default Detail: 
Optional Selection: 
Default Selection: 

但是，如果未選中詳細信息切換，我希望它看起來像這樣：

Default Detail: 
Default Selection:

這是我的腳本：

function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;

var output = "";

output += "Optional Detail: " + detailToggle + "\n";
output += "Default Detail: " + basicDetail + "\n";
output += "Optional Selection: " + selectOne + "\n";
output += "Default Selection: " + selectTwo + "";
document.getElementById("output3").value = output;
}

function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : 
toggle.disabled=true;
}

function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}

和HTML：

<table width="100%" height=" " border="0"><tr>
<td width=550 valign=top>

<form name="Form3" onsubmit="return false;" action="">
Toggle detail:
<input type="checkbox" id="ChecktoggleDetail" class="formArea" 
name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')">
<input type="text" class="formArea" name="details"
id="detailToggle" placeholder="Toggle field" disabled required>
<br>
Detail:
<br>
<input type="text" class="formArea" name="Basicdetail" id="basicDetail"
placeholder="Some detail" maxlength="25" required>
<br>
Selection 1:
<input type="checkbox" id="CheckselectOne" class="formArea" 
name="detailsgiven"  onClick="toggle('CheckselectOne', 'selectOne')">
<br>
<select type="drop" class="formArea" name="Selectone" id="selectOne" 
disabled required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option Two">Option 2</option>
</select>
<br>
Selection 2:
<br>
<select type="drop" class="formArea" name="Selecttwo" id="selectTwo" 
required>
<option value="" disabled selected>...</option>
<option value="Option One">Option 1</option>
<option value="Option two">Option 2</option>
</select>
<br>

</td>
<td valign="top">
<table border="0" height="200" ><tr><td valign="top" height=200>

<textarea type="textarea" class="formArea" name="form3output" id="output3"
onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" 
required></textarea><br>
</td></tr>

<tr><td valign=top>
<div class="btn-group">
<button value="Combine" onclick="convertForm()" 
id="combine3">Combine</button>
</div>
<br>

<div class="btn-group2">
<button type="reset" value="Reset form" onclick="ResetForm();">Reset 
form</button> <br> 
</div>
</form>

</td></tr></table>

我對Javascript還是很陌生，我猜想有一些變量要插入，但不確定是什么。 任何幫助表示贊賞。

Answer 1

使用下面的javascript檢查元素是否先禁用然后追加變量

檢查更新的小提琴： https : //jsfiddle.net/yogesh078/66qpfyhh/1/

function convertForm() {
    var detailToggle = document.getElementById("detailToggle");
    var basicDetail = document.getElementById("basicDetail");
    var selectOne = document.getElementById("selectOne");
    var selectTwo = document.getElementById("selectTwo");

    var output = "";

    if (!detailToggle.disabled) {
        output += "Optional Detail: " + detailToggle.value + "\n";
    }
    if (!basicDetail.disabled) {
        output += "Default Detail: " + basicDetail.value + "\n";
    }
    if (!selectOne.disabled) {
        output += "Optional Selection: " + selectOne.value + "\n";
    }
    if (!selectTwo.disabled) {
        output += "Default Selection: " + selectTwo.value + "";
    }

    document.getElementById("output3").value = output;

}

function toggle(checkboxID, toggleID) {
    var checkbox = document.getElementById(checkboxID);
    var toggle = document.getElementById(toggleID);
    updateToggle = checkbox.checked ? toggle.disabled = false : toggle.disabled = true;
}

function ResetForm() {
    document.getElementById("detailToggle").disabled = true;
    document.getElementById("selectOne").disabled = true;
}

Answer 2

您可以為此嘗試：

在這里，我只是檢查element的disabled屬性 ，如果沒有禁用element ，則會在輸出中添加文本，

function convertForm() {
var detailToggle = document.getElementById("detailToggle").value;
var basicDetail = document.getElementById("basicDetail").value;
var selectOne = document.getElementById("selectOne").value;
var selectTwo = document.getElementById("selectTwo").value;
debugger;
var output = "";
if(!document.getElementById("detailToggle").disabled){
output += "Optional Detail: " + detailToggle + "\n";
}
if(!document.getElementById("basicDetail").disabled){
output += "Default Detail: " + basicDetail + "\n";
}
 if(!document.getElementById("selectOne").disabled){
    output += "Optional Selection: " + selectOne + "\n";
}
 if(!document.getElementById("selectTwo").disabled){
    output += "Default Selection: " + selectTwo + "";
}



document.getElementById("output3").value = output;
}

function toggle(checkboxID, toggleID) {
var checkbox = document.getElementById(checkboxID);
var toggle = document.getElementById(toggleID);
updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}

function ResetForm() {
document.getElementById("detailToggle").disabled = true;
document.getElementById("selectOne").disabled = true;
}

有關更多信息，請訪問： https : //jsfiddle.net/66qpfyhh/8/

Answer 3

此代碼段可以解決您的問題。

 function convertForm() { var detailToggle = document.getElementById("detailToggle").value; var basicDetail = document.getElementById("basicDetail").value; var selectOne = document.getElementById("selectOne").value; var selectTwo = document.getElementById("selectTwo").value; if(document.getElementById("detailToggle").disabled) detailToggle=''; if(document.getElementById("selectOne").disabled) selectOne=''; var output = ""; output += "Optional Detail: " + detailToggle + "\\n"; output += "Default Detail: " + basicDetail + "\\n"; output += "Optional Selection: " + selectOne + "\\n"; output += "Default Selection: " + selectTwo + ""; document.getElementById("output3").value = output; } function toggle(checkboxID, toggleID) { var checkbox = document.getElementById(checkboxID); var toggle = document.getElementById(toggleID); updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true; } function ResetForm() { document.getElementById("detailToggle").disabled = true; document.getElementById("selectOne").disabled = true; } 

 <table width="100%" height=" " border="0"><tr> <td width=550 valign=top> <form name="Form3" onsubmit="return false;" action=""> Toggle detail: <input type="checkbox" id="ChecktoggleDetail" class="formArea" name="Toggledetail" onClick="toggle('ChecktoggleDetail', 'detailToggle')"> <input type="text" class="formArea" name="details" id="detailToggle" placeholder="Toggle field" disabled required> <br> Detail: <br> <input type="text" class="formArea" name="Basicdetail" id="basicDetail" placeholder="Some detail" maxlength="25" required> <br> Selection 1: <input type="checkbox" id="CheckselectOne" class="formArea" name="detailsgiven" onClick="toggle('CheckselectOne', 'selectOne')"> <br> <select type="drop" class="formArea" name="Selectone" id="selectOne" disabled required> <option value="" disabled selected>...</option> <option value="Option One">Option 1</option> <option value="Option Two">Option 2</option> </select> <br> Selection 2: <br> <select type="drop" class="formArea" name="Selecttwo" id="selectTwo" required> <option value="" disabled selected>...</option> <option value="Option One">Option 1</option> <option value="Option two">Option 2</option> </select> <br> </td> <td valign="top"> <table border="0" height="200" ><tr><td valign="top" height=200> <textarea type="textarea" class="formArea" name="form3output" id="output3" onclick="this.focus();this.select()" cols="70" rows="10" placeholder="" required> </textarea><br> </td></tr> <tr><td valign=top> <div class="btn-group"> <button value="Combine" onclick="convertForm()" id="combine3">Combine</button> </div> <br> <div class="btn-group2"> <button type="reset" value="Reset form" onclick="ResetForm();">Reset form</button> <br> </div> </form> </td></tr></table>