时间戳

首页 > 解决方案 > Popovers dissapear on 'onClick' event

javascript - Popovers dissapear on 'onClick' event

问题描述

I've implemented few popovers and I try to trigger them thourgh a function which is called by onclick event. I have no idea why, but they dissappear in a second.I actually managed to get them work fine when checking each one, but when user press "submit" button, it disappers. any idea how and 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>
I hope I've I've entered the code correcly, first time doing it with snippet.

标签： javascriptjqueryhtmlbootstrap-4

解决方案

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

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

<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" 与按钮标签是否可以互换？

推荐阅读