0

我是一个 javascript 新手，我正在尝试组合两段单独工作但不一起工作的代码：

  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

以下是一个可行的解决方案（可能不是最好的或理想的），它也应该适用于您。尝试将该功能附加到提交按钮。使其键入“按钮”将“显示”附加到其单击事件并稍微修改“显示”方法，如下所示。希望这可以帮助：

<html>
<head>
<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
        document.getElementById("myform").submit();
    }
}
function hide() {
    document.getElementById("myDiv").style.display="none";
}
</script>
</head>
<body>
<form id="myform" action="someAction" onSubmit="show()">
    <input type="text" id="length"/>
    <input type="text" id="height"/>
    <input type="text" id="weight"/>
    <input type="button" value="submit" id="mySubmitBtn" onClick="show()"/>
</form>
<div id="myDiv"></div>
</body>
</html>
于 2013-04-02T18:09:24.790 回答
0

在 HTML 表单中添加onClick="validate(event)"提交按钮：

<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 回答