我在一个html文件中有这个表单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?
family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet'
type='text/css'>
<TITLE>Test Input</TITLE>
</head>
<body>
<form name="compoundSearchForm" id="compoundSearchForm" action="#"
method="POST" onsubmit="return validateForm(this.form)">
<h1 id="header1"></h1>
<section>
<fieldset>
<div><label for="CAS">CAS NO</label>
<input type="RADIO" id="CAS" name="identifier" value="CAS" checked></div>
<div><label for="inchikey">InChiKeys</label>
<input type="RADIO" id="inchikey" name="identifier" value="inchikey">
</div>
<div><label for="smiles">SMILES</label>
<input type="RADIO" id="smiles" name="identifier" value="smiles"></div>
<div><label for="keyword">Keyword</label>
<input type="RADIO" id="keyword" name="identifier" value="name"></div>
<textarea id='userInput' type='textarea' name="userInput" Enter your
rows="15" cols="60" wrap="virtual">Enter your search here...</textarea>
<br/>
<button type="reset">RESET</button>
<button type="submit" name="compoundSearchButton"
id="compoundSearchButton" value="SEARCH" style="margin-right: 15px;"
>Search</button>
</fieldset>
</section>
</form>
<script type="text/javascript" src="bundle.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
main.js包含我的javascript代码。bundle.js用于浏览。以下是main.js文件的内容
//for radio buttons, get checked value
function identifierChecked(fieldName) {
console.log(fieldName);
var checkedValue;
for(var x=0;x<fieldName.length;x++) {
if(fieldName[x].checked) {
checkedValue=fieldName[x].value;
//console.log(checkedValue);
}
}
return checkedValue;
}
let selectedIdentifier;
document.getElementById('compoundSearchForm').onclick = function (){
selectedIdentifier=identifierChecked(document.getElementsByName('identifier'));
console.log(selectedIdentifier);
}
var inputValue=document.getElementById('userInput').value;
console.log(inputValue);
function validateForm (){ //enter code here }
validateForm();
表单提交后，我似乎无法传递文本区域(inputValue(和单选按钮(selectedIdentifier(变量的确切值。缺少什么或我做错了什么？
请注意，我所有的js文件都是在nodejs服务器上执行的。非常感谢。
下面的示例向您展示了如何从单选按钮和文本区域获取的值。它将值放在表单下方的div中以显示结果：
function validateForm() {
var identifier = document.getElementsByName("identifier");
for (var x = 0; x < identifier.length; x++) {
if (identifier[x].checked) {
formResults.innerHTML = identifier[x].value;
}
}
formResults.innerHTML = formResults.innerHTML + " , " + userInput.value;
return false;
}<form name="compoundSearchForm" id="compoundSearchForm" action="#" method="POST" onsubmit="return validateForm(this.form)">
<h1 id="header1"></h1>
<section>
<fieldset>
<div><label for="CAS">CAS NO</label>
<input type="RADIO" id="CAS" name="identifier" value="CAS" checked></div>
<div><label for="inchikey">InChiKeys</label>
<input type="RADIO" id="inchikey" name="identifier" value="inchikey">
</div>
<div><label for="smiles">SMILES</label>
<input type="RADIO" id="smiles" name="identifier" value="smiles"></div>
<div><label for="keyword">Keyword</label>
<input type="RADIO" id="keyword" name="identifier" value="name"></div>
<textarea id="userInput" type="textarea" name="userInput" rows="15" cols="60" wrap="virtual">Enter your search here...</textarea>
<br/>
<button type="submit" name="compoundSearchButton" id="compoundSearchButton" value="SEARCH" style="margin-right: 15px;">Search</button>
</fieldset>
</section>
</form>
<div id="formResults" style="background-color: coral"></div>