我的 html 表单中有两个选择块:
<select id="select1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select2" onchange="someFunc()">
<option>A/option>
<option>B</option>
</select>
我有一个从表单标签@onSubmit 调用的 validateForm() 函数。“someFunc”函数在表单的其他地方填充一些 innerHTML。我遇到的问题是,当我点击提交时,select1 的值恢复为其原始默认值,并且 validateForm 函数失败。
someFunc 函数真的很长,所以我没有发布整个内容,但本质上它所做的是检查字符串值并填充 html,例如:
if(select2.value = 'A'){
document.getElementById('anotherElement').innerHTML= '<h1>a new tag</h1>';
}
除了@onChange,还有其他 att 吗?
好的,这是一个完整的 html 表单,描述了我遇到的问题:
<html>
<head>
<title>javascript q</title>
<script>
function updateTag(){
document.getElementById('newHeading').innerHTML='<p id="status">updated</p>';
}
function validateForm(){
var s1 = document.getElementById('select1');
var s2 = document.getElementById('select2');
if( s1.value = 'please select' ){
alert('please select a value from the pulldown');
return false;
}
// updated html needs to have been performed and value selected
if(document.getElementById('status') == null ){
alert('status does not exist');
}
}
</script>
</head>
<body>
<h1>Javascript Q</h1>
<form id="testForm" onSubmit="return validateForm();">
<select id="select1">
<option>please select</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="select2" onchange="updateTag()">
<option>please select</option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input type="submit" value="submit"/>
<div id="newHeading">
</div>
</form>
</body>
</html>
发生的情况是,我从每个下拉列表中选择一个值,点击提交,然后 select1 的值恢复为其原始值,并且验证失败
希望那会更好。
谢谢,bp