egoros7
@egoros7
всё ясно автору 12 лет

Почему страница перезагружается при вводе данных?

Хотел сделать чтобы в ul появлялся li с нужными данными.
Когда данные введены я нажимаю кнопку, li появляется, но сразу же исчезает.
В консоли вообще ничего не меняется. Вот html код:
<!DOCTYPE html>
<html lang="ru">
    <head>
    <meta charset="utf-8">
    <title>ЗТП Калькулятор</title>
    <script src="JQuery3.4.1.js"></script>
    <script src="sx.js"></script>
    <style>* {color: white; font-family: "Arial Black";}
        .user {border-left: solid 2px white; padding-left: 20px;}
        button {border: solid 2px white;
        background-color:#449c36;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;}
        button:active {color:#449c36; background-color: white; border: solid 2px #449c36;}
        body {background-color: #449c36;}
    </style>
    </head>
    <body>
        <div style="border-bottom: solid 3px white;">
        <pre>Сумма на обслуживание в квартал, руб  <input id="money_na_tp" style="color: black"
        placeholder="Например 1250..."></pre>
        <pre>Количество ТП (ЗТП), шт.<input id="kol_tp" 
        style="color: black;"
        placeholder="Например 3..."></pre>
        </div>
        <form>
	<div class="user">
            <p>Пользователь ЗТП</p><input id="user1"
            placeholder="Например: И. И. Иванов..." style="color: black;">
            <button onclick="user()">+</button>
            <h4>Количество месяцев использования в квартал</h4>
            <input type="radio" name="ZZZ" id="one" value="one" onchange="radio=1;">1
            <input type="radio" name="ZZZ" id="two" value="two" onchange="radio=2;">2
            <input type="radio" name="ZZZ" id="tre" value="tre" onchange="radio=3;">3
        </div>
        <div>
            <ul>
            
            </ul>    
        </div>
	</form>
    </body>
</html>

Вот javascript:
var radio;
function user () {
    let name = document.getElementById("user1");
    let user_name = name.value;
    let user_mouth = radio;
    $("ul").append ("<li>" + user_name + " " + user_mouth + "</li>");
};
  • Вопрос задан
  • 129 просмотров
Решения вопроса 1
Legalas61
@Legalas61
Студент
отмените действие по умолчанию т.к button по умолчанию предназначены для отправки формы
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
lamer350
@lamer350
กำลังสูงสุด
Потому что button по умолчанию предназначены для самбита формы, у вас по клику просто происходит отправка формы.
Попробуйте в коннице функции user() добавить строчку return false;
Ответ написан
Комментировать
XanXanXan
@XanXanXan
Можно еще прописатьtype="button" в теге<button>, тогда тоже не будет сабмита по умолчанию.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы