Popovers dissapear on 'onClick' event

Question

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.

dkaramazov · Accepted Answer · 2018-05-03T22:07:39.180

0

Don't use type="submit" if you don't need that functionality.

You should be able to just change the type to "button" and add a button label by defining the "value" attribute on the input element.

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

If you're using this button to submit a form but don't want the default functionality then you can always use "preventDefault()"

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

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

Here are some helpful links for further research: https://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON

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

edited May 03 '18 at 22:07

answered May 03 '18 at 21:59

dkaramazov

204
2
9

Thank you! It actually solves it. What's the difference between "type=submit" to "type=button"? Basicly both are buttons. – AmitBL May 03 '18 at 22:02
The input type of "button" doesn't do anything by default. It is meant to be used in conjunction with JavaScript. The type of Submit will submit the form by default which makes it useful, but if you're using JavaScript you'll need to remember to either disable it or use the type of "button". – dkaramazov May 03 '18 at 22:04

Popovers dissapear on 'onClick' event

1 Answers1