Question

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

你可以试试这个：

这里我只检查元素的禁用属性，如果元素未被禁用，那么我将文本添加到输出中，

summary(df)$r.squared

如需了解更多信息，请访问： 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>

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

3 个答案: