Мобильная версияHTML-форма: проверка и предотвращение обновления страницы при отправке ⇐ Jquery
-
Anonymous
HTML-форма: проверка и предотвращение обновления страницы при отправке
У меня есть HTML-форма с кнопкой отправки, и я хочу запретить обновление страницы после нажатия кнопки «Отправить» (у меня также есть несколько вызовов AJAX в обработчике кликов):
varratating_form = d3.select("body") .append('форма') .attr('класс', 'рейтинг'); // Добавление переключателя для голосования вверх и вниз var radio_groups =ating_form.append('div').attr('class', 'form-group'); // Радио для вверх вар radio_grp_chk = radio_groups .append('дел') .attr('class', 'form-check form-inline upvote'); radio_grp_chk .append('ввод') .attr('класс', 'ввод-проверка формы') .attr('тип', 'радио') .attr('имя', 'радио-голосование') .attr('значение', 'большой палец') .attr("обязательно", ""); radio_grp_chk.append('span').text("upvote"); // Радио для отключения вар radio_grp_chk2 = радио_группы .append('дел') .attr('class', 'form-check form-inline downvote'); radio_grp_chk2 .append('ввод') .attr('класс', 'ввод-проверка формы') .attr('тип', 'радио') .attr('имя', 'радио-голосование') .attr('значение', 'большой палец') .attr("обязательно", ""); radio_grp_chk2.append('span').text("Понижающее голосование"); // Добавляем текстовую область рейтинг_форма .append('дел') .attr('класс', 'группа-форм') .append('текстовая область') .attr('класс', 'текст обратной связи для элемента управления формой') .attr('placeholder', 'Введите текст...'); // Кнопка отправки рейтинг_форма .append('кнопка') .attr('тип', 'отправить') .attr('класс', 'btn btn-первичный рейтинг-btn') .text('Отправить!'); // Привязываем событие клика Rating_form.select('.rating-btn').on('click', function () { d3.event.preventDefault(); var current_text = $("form").find("textarea").val(); var current_vote = $("form").find('input[name=voting-radio]:checked').val() консоль.log( «Мой текст: » + текущий_текст + " и голосование: " + current_vote ); // Здесь еще несколько вызовов AJAX });
Чтобы предотвратить автоматическое обновление при отправке, я использую d3.event.preventDefault(); в прослушивателе кликов.
Однако это делает форму недействительной (мои переключатели имеют атрибут required) => нажатие кнопки «Отправить» без выбора переключателя не приведет к появлению каких-либо ошибок. Как мне решить эту проблему?
У меня есть HTML-форма с кнопкой отправки, и я хочу запретить обновление страницы после нажатия кнопки «Отправить» (у меня также есть несколько вызовов AJAX в обработчике кликов):
varratating_form = d3.select("body") .append('форма') .attr('класс', 'рейтинг'); // Добавление переключателя для голосования вверх и вниз var radio_groups =ating_form.append('div').attr('class', 'form-group'); // Радио для вверх вар radio_grp_chk = radio_groups .append('дел') .attr('class', 'form-check form-inline upvote'); radio_grp_chk .append('ввод') .attr('класс', 'ввод-проверка формы') .attr('тип', 'радио') .attr('имя', 'радио-голосование') .attr('значение', 'большой палец') .attr("обязательно", ""); radio_grp_chk.append('span').text("upvote"); // Радио для отключения вар radio_grp_chk2 = радио_группы .append('дел') .attr('class', 'form-check form-inline downvote'); radio_grp_chk2 .append('ввод') .attr('класс', 'ввод-проверка формы') .attr('тип', 'радио') .attr('имя', 'радио-голосование') .attr('значение', 'большой палец') .attr("обязательно", ""); radio_grp_chk2.append('span').text("Понижающее голосование"); // Добавляем текстовую область рейтинг_форма .append('дел') .attr('класс', 'группа-форм') .append('текстовая область') .attr('класс', 'текст обратной связи для элемента управления формой') .attr('placeholder', 'Введите текст...'); // Кнопка отправки рейтинг_форма .append('кнопка') .attr('тип', 'отправить') .attr('класс', 'btn btn-первичный рейтинг-btn') .text('Отправить!'); // Привязываем событие клика Rating_form.select('.rating-btn').on('click', function () { d3.event.preventDefault(); var current_text = $("form").find("textarea").val(); var current_vote = $("form").find('input[name=voting-radio]:checked').val() консоль.log( «Мой текст: » + текущий_текст + " и голосование: " + current_vote ); // Здесь еще несколько вызовов AJAX });
Чтобы предотвратить автоматическое обновление при отправке, я использую d3.event.preventDefault(); в прослушивателе кликов.
Однако это делает форму недействительной (мои переключатели имеют атрибут required) => нажатие кнопки «Отправить» без выбора переключателя не приведет к появлению каких-либо ошибок. Как мне решить эту проблему?
