Возврат на ту же страницу. Непонятное поведение при клике на кнопку

Question

Есть php код, в котором определены переменные #userfio, #phonenumber, #selectoperatorid и кнопка #addnewuser. По нажатию кнопки #addnewuser данные отправляются с помощью ajax на сервер

    $(document).ready(function() {
        console.log('Inside addinfouser.js');


$('#addnewuser').click(function(){ 

    let data = {
            userfio : $("#userfio").val(),
          //userfio: $("#userfio :selected").text() -- если нужен текст, а  не значение
            phonenumber : $("#phonenumber").val(),
            selectoperatorid: $("#selectoperatorid").val()
          };

    if($data.userfio == '' || data.phonenumber == ''){
        return;
    }

    $.post("addinfouser.php", data, function(result) {
      let tr = `<tr class=userlist#{result.phpuserid}><td>#{result.phpuserfio}</td><td>#{result.phpphonenmumer}</td><td>#{result.selectoperatorname}</td></tr>`;
      $(tr).appendTo("#alllistusers");
    });  
}); 
    
    

    }
    )

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Журнал вызовов</title>
    <link rel="stylesheet" type="text/css" href="calllog.css"></link>   
</head>
<body>  
    <h1 class="hstyle">Журнал вызовов</h1>
    <div id="btns">
        <!--<input type="button" id="addoperator" value="Добавить"></input>-->
        <button id="deleteoperator">Удалить</button>
    </div>
    <!--<div class="addinfooperators">Добавление операторов</div>-->
    <div class="centeredblock">Добавление операторов</div>  
    <div class="wrapper">
        <form class="leftmenu">
            <div>Название оператора</div>
            <div><input type="text" placeholder="Наименование" id="operatorname"></input></div>
            <div>Тариф</div>
            <div><input type="text" placeholder="Стоимость минуты разговора" id="ratevalue"></input></div>
            <input type="submit" id="addoperator" value="Добавить"></input>                     
        </form>
        <div class="tableblock">
            <table id="alllistoperators">
                <tr>
                    <td>
                        Оператор    
                    </td>
                    <td>
                        Тариф
                    </td>
                </tr>
<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $operatorslistconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($operatorslistconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $operatorslistresult = mysqli_query( $operatorslistconn, "SELECT * FROM `operators`" );
                if($operatorslistresult) {

                    $tableoperatorscontent='';
                    while($dbrowoperator = mysqli_fetch_assoc($operatorslistresult)){
                        // $leftmenu = "";
                        // $leftmenu = "";                      
                        $tableoperatorscontent .= '<tr class=operator'.$dbrowoperator['id'].'><td>'.$dbrowoperator['name'].'</td><td>'.$dbrowoperator['rate'].'</td></tr>';



                    }

                    echo $tableoperatorscontent;
    
            }
        mysqli_free_result($operatorslistresult);       
        }           

        mysqli_close($operatorslistconn);

?>
            </table>
        </div>
    </div>
    <!--<div class="addinfousers">Добавление пользователей</div>-->
    <div class="centeredblock">Добавление пользователей</div>
    <div class="wrapperusers">
        <form class="leftmenuusers">
            <div>Имя пользователя</div>
            <div><input type="text" placeholder="ФИО" id="userfio"></input></div>
            <div>Номер телефона</div>
            <div><input type="text" placeholder="Номер телефона" id="phonenumber"></input></div>
            <div>Оператор</div>
            
            <div><select name="selectoperator" id="selectoperatorid">


<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $selectoperatorsconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($selectoperatorsconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $selectoperatorsresult = mysqli_query( $selectoperatorsconn, "SELECT * FROM `operators`" );
            if ($selectoperatorsresult) {
                    while($dbrowselectoperator = mysqli_fetch_assoc($selectoperatorsresult)){
                        echo '<option value=selectid'.$dbrowselectoperator['id'].'>'.$dbrowselectoperator['name'].'</option>';
                    }               
        }
    }

?>






            </select></div>
            <button id="addnewuser">Добавить</button>           
        </form>
        <div class="tableblockusers">
            <table id="alllistusers">
                <tr>
                    <td>
                        Имя 
                    </td>
                    <td>
                        Номер телефона
                    </td>
                    <td>
                        Оператор
                    </td>   
                </tr>
<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $userslistconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($userslistconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $userslistresult = mysqli_query( $userslistconn, "SELECT * FROM `users`" );
                if($userslistresult) {
                    $tableuserscontent='';
                    while($dbrowuser = mysqli_fetch_assoc($userslistresult)){
                        $sqlExtractNameOperator = 'SELECT name FROM operators WHERE operators.id='.$dbrowuser['operator'];
                        $nameOperatorsListResult = mysqli_query( $userslistconn, $sqlExtractNameOperator );
                        if ($nameOperatorsListResult) {
                            while($dbrowoperatorinstance = mysqli_fetch_assoc($nameOperatorsListResult)){
                                // echo '<option value=selectid'.$dbrowselectoperator['id'].'>'.$dbrowselectoperator['name'].'</option>';
                                $operatornameforuser=$dbrowoperatorinstance['name'];
                            }
                        }
                        $tableuserscontent .= '<tr class=userlist'.$dbrowuser['id'].'><td>'.$dbrowuser['name'].'</td><td>'.$dbrowuser['phonenumber'].'</td><td>'.$operatornameforuser.'</td></tr>';

                    }
                    echo $tableuserscontent;
            }
        
        mysqli_free_result($userslistresult);
        }

        mysqli_close($userslistconn);
?>              
            </table>
        </div>      
    </div>
    <!--<div class="addinfocalls">Добавление звонков</div>-->
    <div class="centeredblock">Добавление звонков</div> 
    <div>

    </div>  
    <table class="calltable">
        <tr>
            <td>
                №
            </td>
            <td>
                Дата/Время
            </td>
            <td>
                Входящий абонент
            </td>
            <td>
                Телефон входящего абонента
            </td>
            <td>
                Исходящий абонент
            </td>
            <td>
                Телефон исходящего абонента
            </td>   
            <td>
                Продолжительность
            </td>
            <td>
                Оператор абонента
            </td>
            <td>
                Стоимость вызова
            </td>   
        </tr>


<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";


        $conn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($conn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $result = mysqli_query( $conn, "SELECT * FROM `calls`" );
            // $definingusername = mysqli_query($conn, "SELECT name FROM `users` WHERE id='.$row["inputuser"]");
            // $usernamerow = mysqli_fetch_row($definingusername);

                if($result) {
                    // $phptable="";
                    while($row = mysqli_fetch_assoc($result)){
                    // $name = $row["$yourfield"];
                    // echo "Name: ".$name."br/>";
                    // var_dump($row);
                    // Чтение из базы данных и заполнение ими таблицы
                    $phptable="";   
                    $phptable .= "<tr><td>".$row["id"]."</td>";
                    $phptable .= "<td>".$row["datetimecall"]."</td>";
                    

                    $definingusernamequery = mysqli_query($conn, "SELECT name FROM `users` WHERE users.id=".$row["inputuser"]);
                    //echo "SELECT name FROM `users` WHERE users.id=".$row["inputuser"];
                    $usernamerow = mysqli_fetch_row($definingusernamequery);
                    $phptable .= "<td>".$usernamerow[0]."</td>";
                    //echo $usernamerow[0];
                    
                    $phptable .= "<td>".$row["inputphonenumber"]."</td>";
                    
                    
                    $outputcallernamequery = mysqli_query($conn, "SELECT name FROM `users` WHERE users.id=".$row["outputuser"]);
                    //echo "SELECT name FROM `users` WHERE users.id=".$row["outputuser"];
                    $outputcallerrow = mysqli_fetch_row($outputcallernamequery);
                    $phptable .= "<td>".$outputcallerrow[0]."</td>";
                    //echo $outputcallerrow[0];

                    $phptable .= "<td>".$row["outputphonenumber"]."</td>";
                    $phptable .= "<td>".$row["duration"]."</td>";



                    $operatoridquery = mysqli_query($conn, "SELECT operator FROM `users` WHERE users.id=".$row["outputuser"]);
                    // $operatorid = $outputcallerrow[0];
                    // echo $operatoridquery;
                    $operatoridvalue = mysqli_fetch_row($operatoridquery);
                    $operatornamevaluequery = mysqli_query($conn, "SELECT name FROM `operators` WHERE operators.id=".$operatoridvalue[0]);
                    $operatornamevaluerow = mysqli_fetch_row($operatornamevaluequery);
                    $phptable .= "<td>".$operatornamevaluerow[0]."</td>";

                    
                    $durationquery = mysqli_query($conn,"SELECT TIME_TO_SEC(duration)/60 as dec_time FROM `calls` WHERE calls.id=".$row["id"]);
                    $durationvalue = mysqli_fetch_row($durationquery);
                    $duration = $durationvalue[0];
                    // echo $duration;                  
                    
                    /*
                    $duration = TIME_TO_SEC($row["duration"]);
                    echo $duration;
                    */

                    $ratequery = mysqli_query($conn, "SELECT rate FROM `operators` WHERE operators.id=".$operatoridvalue[0]);
                    $ratevalue = mysqli_fetch_row($ratequery);
                    $rate = $ratevalue[0];
                    // echo $rate;

                    $ratepennyvalue="";
                    $raterublesvalue="";
                    $rublescount="";
                    $rateprice=mb_substr($rate, 0, mb_strlen($rate)-7);
                    if (strpos($rateprice, 'копеек')!=false) {
                        $ratepennystr = mb_substr($rateprice, 0, mb_strlen($rateprice)-7);
                        // echo $ratepennystr;
                        $ratepennyvalue = mb_substr($ratepennystr, mb_strlen($ratepennystr)-2, 2);
                        // echo $ratepennyvalue;
                        $raterublesvalue = mb_substr($ratepennystr, 0, mb_strlen($ratepennystr)-2);
                        if (strpos($ratepennystr, 'рубль')!=false){
                            $raterublesvalue = mb_substr($raterublesvalue, 0, mb_strlen($raterublesvalue)-6);
                        }
                        else if (strpos($ratepennystr, 'рубля')!=false){
                            $raterublesvalue = mb_substr($raterublesvalue, 0, mb_strlen($raterublesvalue)-6);
                        }
                        else if (strpos($ratepennystr, 'рублей')!=false){
                            $raterublesvalue = mb_substr($raterublesvalue, 0, mb_strlen($raterublesvalue)-7);
                        }
                        else {

                        }

                    }
                    else {
                        if (strpos($rateprice, 'рубль')!=false){
                            $raterublesvalue = mb_substr($rateprice, 0, mb_strlen($rateprice)-6);
                        }
                        else if (strpos($rateprice, 'рубля')!=false){
                            $raterublesvalue = mb_substr($rateprice, 0, mb_strlen($rateprice)-6);
                        }
                        else if (strpos($rateprice, 'рублей')!=false){
                            $raterublesvalue = mb_substr($rateprice, 0, mb_strlen($rateprice)-7);                           
                        }
                        else {

                        }

                    };

                    $ratecost=(int)($raterublesvalue)*100 + (int)($ratepennyvalue);
                    $callcost=$ratecost*$duration;

                    $callcoststring = strval(intdiv($callcost, 100)).'руб. '.strval($callcost%100).'коп.';
                    $phptable .= "<td>".$callcoststring."</td>";



                    // echo $rateprice;







                    /*  
                    $phptable .= "<td>".$row["outputphonenumber"]."</td>";
                    $phptable .= "<td>".$row["duration"]."</td>";
                    $phptable .= "<td>".$row["operator"]."</td>";
                    */
                    $phptable .= '</tr>';
                    
                    echo $phptable;
                }
        
                mysqli_free_result($operatornamevaluequery);
                mysqli_free_result($operatoridquery);
                mysqli_free_result($outputcallernamequery);
                mysqli_free_result($definingusernamequery);                                 
                mysqli_free_result($result);
        
        }

        }
        //  echo "Подключение успешно установлено";
        mysqli_close($conn);


?>
        
    </table>

    <div class="secondandmore"><h1 class="hstyle" id="second">Статистика вызовов</h1></div>
    <div class="centeredblock">Длительность разговоров пользователей</div>

<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $usersconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($usersconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $usersresult = mysqli_query( $usersconn, "SELECT * FROM `users`" );
                if($usersresult) {
                    // $phptable="";
                    $MenuTableWrapper = '<div class='."wrapper".'><div class='."leftmenu".'>';
                    $leftmenu = "";
                    while($rowuser = mysqli_fetch_assoc($usersresult)){
                        // $leftmenu = "";
                        // $leftmenu = "";                      
                        $leftmenu .= '<div class="elemcheckbox"><input class="checkboxitemuserlist" type="checkbox" name='.$rowuser["name"].' value ='.$rowuser["id"].'><div class="elemuserlist">'.$rowuser["name"].'</div></input></div>'; 
                        //echo '<div><input class="checkboxitemuserlist" type="checkbox" name="users[]" value ='.$rowuser["id"].'/>'.$rowuser["name"].'</div>';
                        // echo $leftmenu;
                    }
                    $MenuTableWrapper .= $leftmenu;
                    $MenuTableWrapper .= "</div>";
                    echo $MenuTableWrapper;
                    /*
                    $durationtable = "";
                    $durationtable .= '<table id="userdurationcalltable">';
                    $durationtable .= '</table>';
                    $statisticacontent = $leftmenu;
                    $statisticacontent .= $durationtable;
                    */
                    //echo $durationtable;
                    //echo $statisticacontent;  
            }

        mysqli_free_result($usersresult);           
        }
        mysqli_close($usersconn);           
?>

    <div class="tableblock"> 
        <table id="userdurationcalltable">
            <tr>
                <td>
                    Имя пользователя
                </td>
                <td>
                    Длительность разговоров
                </td>   
            </tr>
        </table>
    </div>
    </div>

    <div class="centeredblock">Длительность разговоров по операторам</div>

<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $operatorsconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($operatorsconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $operatorsresult = mysqli_query( $operatorsconn, "SELECT * FROM `operators`" );
                if($operatorsresult) {
                    // $phptable="";
                    $MenuTableOperatorsWrapper = '<div class='."wrapper".'><div class='."leftmenuoperators".'>';
                    $leftmenuoperators = "";                                        
                    while($rowoperator = mysqli_fetch_assoc($operatorsresult)){

                        $leftmenuoperators .= '<div class="elemcheckbox"><input class="checkboxitemoperatorlist" type="checkbox" name='.$rowoperator["name"].' value ='.$rowoperator["id"].'><div class="elemoperatorlist">'.$rowoperator["name"].'</div></div>';       
                    }
                    $MenuTableOperatorsWrapper .= $leftmenuoperators;
                    $MenuTableOperatorsWrapper .= "</div>";
                    echo $MenuTableOperatorsWrapper;                            
            }
        mysqli_free_result($operatorsresult);
        }
        mysqli_close($operatorsconn);           
?>


    <div class="tableblock"> 
        <table id="operatorsdurationcalltable">
            <tr>
                <td>
                    Оператор
                </td>
                <td>
                    Длительность разговоров
                </td>   
            </tr>
        </table>
    </div>
    </div>

    <div class="centeredblock">Статистика средств за период времени</div>
    
    <div class="chooseperiod">
        <div id="labelchooseperiod">Выберите период времени</div>
    
        <div class="chooseperiodbegin">
            <div class="labelperiodbegin">Начало периода</div>
            <input type="datetime-local" id="beginlocaldate" name="begindate" step=1></input>
        </div>
    
        <div class="chooseperiodend">   
            <div class="labelperiodend">Конец периода</div>
            <input type="datetime-local" id="endlocaldate" name="enddate" step=1></input>
        </div>
    </div>  
        
<?php
        $hostname="localhost";
        $username="root";
        $password="";
        $dbname="dbcall";

        $usersconn = mysqli_connect($hostname, $username, $password, $dbname);
        if ($usersconn === false) {
            die("Ошибка: " . mysqli_connect_error());
        } 
        else {
            $usersresult = mysqli_query( $usersconn, "SELECT * FROM `users`" );
                if($usersresult) {
                    // $phptable="";
                    $MenuTableWrapper = '<div class='."wrapper".'><div class='."leftmenu".'>';
                    $leftmenu = "";
                    while($rowuser = mysqli_fetch_assoc($usersresult)){
                        // $leftmenu = "";
                        // $leftmenu = "";                      
                        $leftmenu .= '<div><input class="checkboxitemuserlisttotalcost" type="checkbox" name='.$rowuser["name"].' value ='.$rowuser["id"].'>'.$rowuser["name"].'</input></div>'; 
                        //echo '<div><input class="checkboxitemuserlist" type="checkbox" name="users[]" value ='.$rowuser["id"].'/>'.$rowuser["name"].'</div>';
                        // echo $leftmenu;
                    }
                    $MenuTableWrapper .= $leftmenu;
                    $MenuTableWrapper .= "</div>";
                    echo $MenuTableWrapper;
            }
        mysqli_free_result($usersresult);       
        }

        mysqli_close($usersconn);
?>

    <div class="tableblock"> 
        <table id="stattable">
            <tr>
                <td>
                    Имя пользователя
                </td>
                <td>
                    Суммарная стоимость разговоров
                </td>   
            </tr>
        </table>
    </div>
    </div>



<script src="jquery-3.6.0.min.js"></script>
<script src="userdurationcall.js"></script>
<script src="operatordurationcall.js"></script>
<script src="totalcost.js"></script>
<script src="addinfooperator.js"></script>
<script src="addinfouser.js"></script>
<!--<script src="addinfocall.js"></script>-->
</body> 
</html>

Изначально я нахожусь на странице

После нажатия на кнопку Добавить (#addnewuser)

отображается вверх страницы, а должна добавляться запись в таблицу #alllistusers.

Answer 1

Как написали в комментарии выше:

Наверное, вы забыли отключить кнопке стандартное действие, и в итоге кнопка просто отправляет ваш <form> и тем самым приводит к перезагрузке страницы? - andreymal

По нажатию на кнопку #addnewuser происходит стандартное событие сабмита формы, а соответветственно и перезагрузка страницы. Так что нужно отключить стандартное событие на кнопке:

Добавьте в ваш обработчик события:

$('#addnewuser').click(function(e) {
       e.preventDefault();
       ... далее Ваш код 
}

БЛОГ НА HUSL

Возврат на ту же страницу. Непонятное поведение при клике на кнопку

Ответы (1 шт):