My modal closes instantly and overall something is very wrong

Viewed 41

I got some jquery yes/no form snippet and im trying to cram it into my html,however it does not work and from flashes for millisecond then dissapears.

Also, after showing the modal form and clicking the desired button, I want to redirect the user to another page. Is using document.location.href ="some_url" the right way to do that?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Проверка данных</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
        rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        function checkSnils() {
            checkedValue = $("#snils").val();
            var checkSum = parseInt(checkedValue.slice(9), 10);
            let flag;
            //строка как массив(для старых браузеров)
            checkedValue = "" + checkedValue;
            checkedValue = checkedValue.split('');

            var sum = (checkedValue[0] * 9 + checkedValue[1] * 8 + checkedValue[2] * 7 + checkedValue[3] * 6 +
                checkedValue[4] * 5 + checkedValue[5] * 4 + checkedValue[6] * 3 + checkedValue[7] * 2 +
                checkedValue[8] * 1);

            if (sum < 100 && sum == checkSum) {
                flag = true;
            } else if ((sum == 100 || sum == 101) && checkSum == 0) {
                flag = true;
            } else if (sum > 101 && (sum % 101 == checkSum || (sum % 101 == 100 && checkSum == 0))) {
                flag = true;
            } else {
                flag = false;
            }
            if (flag) {
                ConfirmDialog("Всё легально! Контрольная сумма = " + sum, 1)
            } else {
                ConfirmDialog("Ай-ай-ай,жалко.\n Контрольная сумма = " + sum + "\n Узнать почему?", 1)
            }
        }

        function checkInn() {
            var inputNumber = $("#inn").val();
            let flag;
            //преобразуем в строку
            inputNumber = "" + inputNumber;
            //преобразуем в массив
            inputNumber = inputNumber.split('');
            //для ИНН в 10 знаков

            let cause;
            if ((inputNumber.length == 10) && (inputNumber[9] == ((2 * inputNumber[0] + 4 * inputNumber[1] + 10 *
                    inputNumber[2] + 3 * inputNumber[3] + 5 * inputNumber[4] + 9 * inputNumber[5] + 4 *
                    inputNumber[6] + 6 * inputNumber[7] + 8 * inputNumber[8]) % 11) % 10)) {
                flag = true;
                //для ИНН в 12 знаков
            } else if ((inputNumber.length == 12) && ((inputNumber[10] == ((7 * inputNumber[0] + 2 * inputNumber[1] +
                    4 * inputNumber[2] + 10 * inputNumber[3] + 3 * inputNumber[4] + 5 * inputNumber[5] + 9 *
                    inputNumber[6] + 4 * inputNumber[7] + 6 * inputNumber[8] + 8 * inputNumber[9]) % 11) % 10) && (
                    inputNumber[11] == ((3 * inputNumber[0] + 7 * inputNumber[1] + 2 * inputNumber[2] + 4 *
                        inputNumber[3] + 10 * inputNumber[4] + 3 * inputNumber[5] + 5 * inputNumber[6] + 9 *
                        inputNumber[7] + 4 * inputNumber[8] + 6 * inputNumber[9] + 8 * inputNumber[10]) % 11) % 10))) {
                flag = true;
            } else {
                flag = false;
            }
            if (flag) {

                ConfirmDialog("Всё легально!", 2)
            } else {
                debugger;
                ConfirmDialog("Ай-ай-ай,жалко. \n Узнать почему?", 2)
            }
        }

        function ConfirmDialog(message, id) {
            var globid = id;
            $('<div></div>').appendTo('body')
                .html('<div><h6>' + message + '?</h6></div>')
                .dialog({
                    modal: true,
                    title: 'Результат',
                    zIndex: 10000,
                    autoOpen: true,
                    width: 'auto',
                    resizable: false,
                    buttons: {
                        Yes: function () {
                            // $(obj).removeAttr('onclick');                                
                            // $(obj).parents('.Parent').remove();
                            if (globid = 1) {
                                //go somewhere document.location.href ="some_url"
                            }
                            if (globid = 2) {
                                //go somewhere elsewhere document.location.href ="some_other_url"    
                            }
                        },
                        No: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).remove();
                    }
                });
        };
    </script>
</head>

<body>
    <div class="left">
        <form class="snils">
            <legend>Проверка контрольного числа СНИЛС</legend>
            <p><label for="snils">СНИЛС</label> <input type="text" id="snils" name="snils"></p>
            <p><input id="elem1" class="button" type="submit" onclick="checkSnils()" value="Отправить"></p>

        </form>
    </div>

    <div class="right">
        <form class="inn">
            <legend>Проверка контрольного числа ИНН</legend>
            <p><label for="inn">ИНН</label> <input type="text" id="inn" name="inn"></p>
            <p><input class="button" type="submit" onclick="checkInn()" value="Отправить"></p>
        </form>
    </div>
</body>

</html>

1 Answers

As Swati pointed out in comment to my question the cause of problem was submit type attribute on my buttons.

because you have type="submit" so when you click on this button form gets submitted instead use type="button" or prevent default submission of form.

Related