javascript - 仅使用 Javascript，如何防止输出禁用的表单元素？

Question

我正在尝试将我的表单输出到同一页面上的文本区域，并让它只显示任何启用的字段。你可以在我的JSFiddle here看到它，现在，当您单击“合并”按钮时，它会输出所有 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

你可以试试这个:

这里我只是检查元素的disabled属性，如果元素没有被禁用然后我添加文本输出，

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/