запуск скриптов php и js по кнопке

101

27 декабря 2021, 03:10

Имеется кнопка, при нажатии на которую происходит php скрипт, на добавление данных в базу данных. Так же по этой кнопке вызывается js скрипт, со всплывающим окном окном, которое уведомляет об успешном добавлении данных в БД. Добавление и js работают. Но только при нажатии на кнопку js-скрипт срабатывает, но так как имеется еще и php скрипт, страница перезагружается и пользователь не видит всплывающее окно. Вопрос как настроить, чтобы добавлялись данные и скрипт срабатывал?

<?php
                    include_once("bd.php");
                    if(isset($_POST['reg']))
                    {   
                        $stage = $_POST['stage'];
                        $team = strip_tags(trim($_POST['team']));
                        $fio_mem1 = strip_tags(trim($_POST['fio_mem1']));
                        $fio_mem2 = strip_tags(trim($_POST['fio_mem2']));
                        $fio_mem3 = strip_tags(trim($_POST['fio_mem3']));
                        $city = strip_tags(trim($_POST['city']));
                        $institution = strip_tags(trim($_POST['institution']));
                        $klass = strip_tags(trim($_POST['klass']));
                        $tel = strip_tags(trim($_POST['tel']));
                        $mail = strip_tags(trim($_POST['mail']));
                        $head = strip_tags(trim($_POST['head']));
                        $position = strip_tags(trim($_POST['position']));
                        $sql = "INSERT INTO members (stage, team, fio_mem1, fio_mem2, fio_mem3, city, institution, klass, tel, mail, head, position)
                            VALUES('$stage','$team','$fio_mem1','$fio_mem2','$fio_mem3','$city','$institution','$klass','$tel','$mail','$head','$position')";
                        if($link->query($sql)===TRUE) {
                            echo "";
                        }  
                    }
                    ?>

<script> 
                    $(window).on("load", function(){ 
                        $('#button1').click(function(){ 
                            $('#myModal').fadeIn(500); 
                        }) 
 
                        $('#close').click(function(){ 
                            $('#myModal').fadeOut(500); 
                        }) 
                        $(document).click(function(event){ 
                            if ($(event.target).closest('#button1').length || $(event.target).closest('#button1').length) return; 
                            $('#myModal').fadeOut(500); 
                            event.stopPropagation(); 
                        }); 
                    }) 
                </script>

.modal { 
    font-size: 30px; 
    font-style: bold; 
    display: none; 
    position: fixed; 
    color: black; 
    text-align: center; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(18, 30, 119, 0.8); 
     
} 
 
#modal-content { 
    background-color: #fefefe; 
    margin: 15% auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
     
     
} 
 
#close { 
    color: #aaa;  
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
}

<head> 
    <script 
            src="https://code.jquery.com/jquery-3.4.1.min.js" 
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
            crossorigin="anonymous"></script> 
</head> 
<div class="container"> 
            <div class="forma2 clearfix"> 
                <form method="post" action="reg.php"> 
                    <div class="main_reg"> 
                        <div class="field"> 
                            <label for="stage">Вид этапа</label> 
                            <select name="stage" id="stage"> 
                                <option value="" disabled>Выберите этап</option> 
                                <option value="Очный">Очный</option> 
                                <option value="Заочный">Заочный</option>     
                            </select> 
                        </div> 
                        <div class="field"> 
                            <label for="team">Название команды</label> 
                            <input type="text" id="team" name="team" placeholder="Название команды"> 
                        </div> 
                        <div class="field"> 
                            <label for="fio_mem1">ФИО  первого участника</label> 
                            <input type="text" id="fio_mem1" name="fio_mem1" placeholder="ФИО"> 
                        </div> 
                        <div class="field"> 
                            <label for="fio_mem2">ФИО  второго участника</label> 
                            <input type="text" id="fio_mem2" name="fio_mem2" placeholder="ФИО"> 
                        </div> 
                        <div class="field"> 
                            <label for="fio_mem3">ФИО  третьего участника</label> 
                            <input type="text" id="fio_mem3" name="fio_mem3" placeholder="ФИО"> 
                        </div> 
                        <div class="field"> 
                            <label for="city">Ваш город</label> 
                            <input type="text" id="city" name="city" placeholder="Город"> 
                        </div> 
                        <div class="field"> 
                            <label for="institution">Учебное учреждение</label> 
                            <input type="text" id="institution" name="institution" placeholder="Учебное заведение"> 
                        </div> 
                        <div class="field"> 
                            <label for="klass">Класс\специальнсть</label> 
                            <input type="text" id="klass" name="klass" placeholder="Класс\специальность"> 
                        </div> 
                        <div class="field"> 
                            <label for="tel">Номер тел. руководителя</label> 
                            <input type="text" id="tel" name="tel" placeholder="Телефон"> 
                        </div> 
                        <div class="field"> 
                            <label for="mail">e-mail руководителя</label> 
                            <input type="text" id="mail" name="mail" placeholder="e-mail"> 
                        </div> 
                        <div class="field"> 
                            <label for="head">ФИО руководителя</label> 
                            <input type="text" id="head" name="head" placeholder="ФИО"> 
                        </div> 
                        <div class="field"> 
                            <label for="position">Должность руководителя</label> 
                            <input type="text" id="position" name="position" placeholder="Должность"> 
                        </div> 
                        <div class="button_reg"> 
                            <button id="button1" class="button1" value="Зарегистрировать" type="submit" name="reg" OnClick='function()'>Зарегистрировать</button> 
                            <div id="myModal" class="modal"> 
                                <div id="modal-content"> 
                                    <span id="close">&times;</span> 
                                    <p>Вы успешно прошли регистрацию!</p> 
                                </div> 
                            </div> 
                        </div> 
                  </div> 
                </form>