0

私はJavaScriptの初心者で、個別に機能しているが一緒には機能していない2つのコードを結合しようとしています:

  1. フォームを検証して、長さ、幅、高さがゼロでないことを確認する
  2. フォームが有効な場合は、フォームを送信し、コンテンツの読み込み中に CSS スプラッシュ読み込み画面を表示します

これが私の失敗した試みです:

<script type = "text/javascript">

function notEmpty(elem, helperMsg){
    if (elem.value.length == 0) {
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function show() {
    if ((notEmpty(document.getElementById('length'), 'Please Enter a Length')==true) &&
        (notEmpty(document.getElementById('height'), 'Please Enter a Height')==true) &&
        (notEmpty(document.getElementById('weight'), 'Please Enter a Weight')==true)) {
        document.getElementById("myDiv").style.display="block";
        setTimeout("hide()", 10000);  // 10 seconds
    }
}
function hide() {
    document.getElementById("myDiv").style.display="none";
}
</script>

show()私のフォームはフォーム送信時に呼び出されます。myDiv は、ページの読み込み中に表示される CSS 読み込みページ要素です。繰り返しになりますが、私の試みがうまくいかなかった場合はお詫び申し上げます。私は JavaScript に非常に慣れていないため、正しい方向に向けるためのアドバイスをいただければ幸いです。

4

2 に答える 2

0

onClick="validate(event)"HTML フォームで送信ボタンに追加します。

<form action="someAction">
    <input type="text" id="length"/><br/>
    <input type="text" id="height"/><br/>
    <input type="text" id="weight"/><br/>
    <input type="submit" onClick="validate(event)"/>
</form>
<div id="myDiv" style="display: none">Loading....</div>

次に、このコードを試してください:

function validate(e) {
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;//stop the form from submitting before validating
    var arr = ['length', 'height', 'weight'],
        valid = true,
        helperMsg = ['please choose length value', 'please choose height value', 'please choose weight vale'];
    for (var i in arr) {
        var elm = document.getElementById(arr[i]);
        if (elm.value.length == 0) {
            alert(helperMsg[i]);
            elm.focus();
            valid = false;            
            break;//stop looping and move to the next step
        }
    }
    if (valid) {
        var div = document.getElementById('myDiv');
        document.getElementsByTagName('form')[0].submit();//submit the first form, or you can change it to document.getElementBY('id') instead if you add an id to your form which would be better.
        div.style.display = 'block';//show div
        setTimeout(function () {
            div.style.display = 'none';//hide div after 10 sec
        }, 10000);
    }

}

デモ

于 2013-04-02T18:24:52.967 に答える