Question

我实现了很少的弹出窗口，我试图通过onclick事件调用一个函数来触发它们。我不明白为什么，但是它们会在一秒钟内消失。我确实设法让它们在检查每一个时都能正常工作，但是当用户按下“提交”按钮时，它会消失。任何想法如何和 HTML：

function fieldValidation(textBox){

    if (textBox.value === "" || textBox === "") {
        textBox.style.borderColor = "red";
        $(textBox).popover('show');
    }
    else {
        $(textBox).popover('hide');
        textBox.style.borderColor = "green";
    }
}

function formValidation(){
    var fields = document.getElementsByClassName("personal").length;
    var current, check = true;
    for (var index = 0; index < fields ; index++) {
        current = document.getElementsByClassName("personal")[index];
        if(current.value === "") {
            fieldValidation(current);
            check = false;
        }
    }
    if (!check)
        return;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Academic Calculator</title>
    <meta name="Calculator" content="Academic Calculator">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Libs/bootstrap.css">
    <script src="Libs/http_code.jquery.com_jquery-2.0.0.js"></script>
    <script src="Libs/bootstrap.js"></script>
    <link rel="stylesheet" href="Calculate.css">
</head>
<body>
    <script src="calculatorLogic.js"></script>
    <div><h1>Academic Calculator</h1></div>
    <div class="container-fluid">
        <hr>
        <div class="row">
            <form>
                <div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12" >
                    <input class="personal" placeholder="First Name:" data-toggle="popover"
                         data-content="Please Fill First Name Correctly" onblur="fieldValidation(this)"
                        data-placement="top">
                </div>
                <div class ="col-lg-1 col-md-2 col-sm-2 col-xs-12">
                    <input class="personal" placeholder="Last Name:" data-toggle="popover"
                     data-content="Please Fill Last Name Correctly" onblur="fieldValidation(this)"
                    data-placement="top">
                </div>
                <div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12">
                    <input class="personal" placeholder="Academic Institute:" data-trigger="popover"
                     data-content="Please Fill Academic Institute Correctly" onblur="fieldValidation(this)"
                    data-placement="top">
                </div>
                <div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12">
                    <input class="personal" placeholder="School:" data-trigger="popover"
                   data-content="Please School Institute Correctly" onblur="fieldValidation(this)"
                    data-placement="top">
                </div>
                <div class = "col-lg-1 col-md-2 col-sm-2 col-xs-12 start-btn">
                    <input type="submit" class="submit" onclick="formValidation()">
                </div>
            </form>
        </div>
        <hr>
        <div class="courses"></div>
    </div>
</body>
</html>

我希望我已经正确地输入了代码，第一次使用代码片段。

Answer 1

如果您不需要该功能，请不要使用type =“submit”。

您应该只需将类型更改为“按钮”，并通过在输入元素上定义“value”属性来添加按钮标签。

<input type="button" value="submit" class="submit" onclick="formValidation()" />

如果您使用此按钮提交表单但不想使用默认功能，那么您可以随时使用“preventDefault（）”

<input onclick="myFunc(e)" type="submit" />

function myFunc(e){
   e.preventDefault();
}

以下是进一步研究的一些有用链接： https://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON

input type="submit" Vs button tag are they interchangeable?

Popovers在'onClick'事件中消失

1 个答案: