Ответы пользователя по тегу JavaScript
  • Иногда форма отправляет данные множество раз. Где ошибка, можете объяснить?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Могу предположить из-за того что пользователь может быстро несколько раз нажать на кнопку "Отправить" в результате будет отправлено несколько ajax запросов.

    Можно попробовать сделать вот так:
    Когда событие "submit" выполнится в первый раз кнопка "Отправить" заблокируется, и если пользователь сразу нажмёт её ещё раз то событие уже не будет запущенно т.к. кнопка будет заблокирована до тех пор пока ajax запрос не завершится. Пример скрипта ниже, я его не проверял, если будите использовать то протестируйте, не ломается ли ничего. На кнопку в html нужно будет добавить класс: btn-form-submit.

    Либо может что-то в php скрипте, или на форме устанавливается несколько событий которое отправляет ajax запрос.

    $(function () {
        $("form[data-ajax]").on("submit", function (e) {
            e.preventDefault();
            var $form = $(this);
            var btn = $form.find(".btn-form-submit");
            // Заблокируем кнопку отправить
            $(btn).prop("disabled", true);
            $form.find(".input--error").removeClass("input--error");
            $.post($form.attr("action"), $form.serialize(), function (json) {
                if (json.result == "error") {
                    for (var x in json.errors) {
                        $form.find('[name="' + x + '"]').addClass("input--error");
                    }
                } else if (json.result == "redirect") {
                    window.location.href = json.url;
                } else {
                    $form.html(json.html);
                }
            }, "json").always(function () {
                if (btn.length) {
                    // Разблокируем кнопку отправить когда ajax запрос завершится будь то успех или ошибка
                    $(btn).prop("disabled", false);
                }
            });
        })
    });

    Небольшой совет, лучше давать обратную связь пользователю, когда он отправил форму показывать какую нибудь загрузку/крутяшку/прилоуд, что бы пользователь понимал что какое-то действие происходит.
    Ответ написан
    2 комментария
  • Как подключить сайт написанный на html к базе данных mysql?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Для того что бы подключиться к базе данных можно использовать язык программирования PHP.
    На официальном сайте у них есть руководство по данному языку. Можно ещё к примеру в интернете искать/смотреть какие-то статьи/уроки/книги.
    С помощью php можно к примеру:
    • Когда пользователь отправляет форму обратной связи отправить сообщение на почту с данными из полей формы;
    • Сохранять/получать данные из базы данных;
    • Сделать корзину как в интернет магазинах (как вариант с помощью сессии);

    Если вы работаете на Windows то в качестве локального веб сервера можно использовать к примеру
    Open Server на данном локальном сервере можно вести разработку сайтов (скриптов).

    В будущем можно будет ещё посмотреть что такое AJAX, как делать AJAX запросы в javascript.

    Когда уже будет какое-то знание языка программирование и понимание можно будет посмотреть на какую нибудь CMS систему или php framework, потому что писать всё с нуля это может быть долго и трудно.
    А разрабатывая сайты на таких системах есть уже набор каких-то готовых инструментов
    Ответ написан
    Комментировать
  • Как не закончить цикл while?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    let sum = 0;
    let strNumber = 0;
    let number = 0;
    while (strNumber !== null) {
      strNumber = prompt("Введите число:", ""); // Получаем из prompt строку либо число в виде строки, если нажата отмена то вернёт null
      number = Number(strNumber); // Приводим строку к числу, если строка не может быть числом то вернёт NaN см. https://learn.javascript.ru/type-conversions
      sum += (!isNaN(number)) ? number : 0; // Использую isNaN потому что Number.isNaN не будет работать в IE у isNaN есть особености см (https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN)
    }
    if(sum) {
      alert(sum);
    }
    Ответ написан
    Комментировать
  • Как прибавить к каждому числу определенного класса другое число?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Вот ещё один вариант
    Ответ написан
    Комментировать
  • Почему false срабатывает как true?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Скорее всего из за того что false приходит в виде строки, и условие соответственно выполняется, потому что люба строка это уже true, пробуйте что-то типа такого:
    $.ajax({
    	url: '/action_ajax_form.php',
    	type: "POST",
    	data:  $("#feedback-form_03").serialize(),
    	success: function(response) {
    		if (response !== "false") {
    			console.log(response);
    			console.log('<div id="message_03">Ваше сообщение успешно отправлено. Спасибо!<br />Мы свяжемся с вами ближайшее время!</div>');
    		}
    	}
    }
    })
    Ответ написан
  • Как сделать круг с пунктами внутри?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Накидал тут кое что, может конечно можно более элегантно это всё сделать

    И есть ряд моментов:
    1. Данное решение не универсальное
    2. При смене шрифта может выглядеть не красиво
    3. При смене текста в пунктах тоже может выглядеть не красиво
    4. Позиционируется не автоматически
    Ответ написан
    Комментировать
  • Как настроить multiselect выпадающим списком с результатом во втором окне?

    Shlop
    @Shlop
    Full Stack Developer (PHP/Laravel/JavaScript)
    Ещё таких элементов не делал, погуглил, вот что удалось найти: loudev.com какая то библиотека, которая зависит от Jquery для multiselect. Может быть конечно это будет неприемлемо, т.к. из за одного multiselect, подключать jquery а затем данную библиотеку, не очень верно в некоторых ситуациях.
    А если писать своё решение, думаю что алгоритм его работы должен быть такой:
    • Необходимо получать выбранный элемент из селекта (выпадающего списка)
    • Из селекта (выпадающего списка) выбранный элемент скрыть/удалить (Это если из списка выбранный элемент должен пропадать)
    • Отобразить выбранное значение в блоке ниже
    Ответ написан
    Комментировать
  • Как передать параметры в событие js не изменяя контекст?

    Shlop
    @Shlop Автор вопроса
    Full Stack Developer (PHP/Laravel/JavaScript)
    Решил собственно свою проблему тем что добавил объект класса который мне нужен в глобальный объект window а потом в методе где этот объект класса мне необходим я к нему получаю доступ через window.
    В итоге получился такой вот код:
    Это я добавляю в window
    объект который мне нужен:
    addEventOpenModal()
    	{
    		let btnArray = document.querySelectorAll(this.btnOpenModal);
    		window.objectCurrent = this;
    		btnArray.forEach((element) => {
    			element.addEventListener('click',this.eventOpenModal);
    		});
    	}

    А тут уже получаю доступ через window к объекту который мне нужен
    eventOpenModal(e)
    	{
    		window.objectCurrent.itemRemove = this.closest('.list-object__item');
    		let idRemove = this.getAttribute('data-id');
    		let name = this.getAttribute('data-title');
    		let entity = window.switchObjects.getActionEntity();
    		let modal = document.querySelector('[data-remove-modal]');
    		window.objectCurrent.idRemove = idRemove;
    		window.objectCurrent.entity = entity;
    		let modalOverlay = modal.querySelector('.modal__overlay');
    		let modalBody = modal.querySelector('.modal__body');
    		let modalTitle = modal.querySelector('.modal__title-dynamic');
    		modalTitle.innerHTML = name;
    		window.objectCurrent.modalElem = new window.objectCurrent.modal(modalBody, modalOverlay, window.animation);
    
    		window.objectCurrent.modalElem.showModal();
    
    		window.objectCurrent.formRemove = document.querySelector('.modal__form-remove');
    
    		window.objectCurrent.formRemove.addEventListener('submit',window.objectCurrent.submitEvent);
    	}


    Возможно есть решение конечно более лучше и надежней.
    Ответ написан
    Комментировать