HTML フォームに 2 つの選択ブロックがあります。
<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 以外に別の属性はありますか?
OK、これは私が抱えている問題を説明する完全な 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