jQuery не удается отменить отправку формы
261
09 марта 2018, 14:24
На пустой странице есть форма. Моя задача - выполнить свой код вместо отправки этой формы.
Саму страницу редактировать не могу, так как это онлайн-конструктор, но могу добавлять свой код.
Никак не удается отменить отправку, хотя submit перехватываю. e.preventDefault() и return false не помогают.
Например такой код отправку перехватывает, но форма все равно отправляется.
<script>
$(".step1").submit ( function(e) {
e.preventDefault();
console.log('Перехват submit!');
return false;
});
</script>
Не могу понять в чем причина.
<div class="container">
<div class="cont">
<div class="node node7 widget widget-form step1" outline="2">
<div class="wrapper1">
<div class="wrapper2">
<div class="macros-form">
<div class="outer" style="max-width: 350px;">
<div class="inner">
<div class="vertical none size-big">
<div class="head">
<div class="textable">
<p><strong>Шаг 1/2</strong></p>
</div>
</div>
<div class="body">
<div class="cont"></div>
<form class="form text-in" data-form="{"name":"Расчет","type":"order","privacy":"none","privacy_checkbox":"Даю согласие на <обработку персональных данных>","after":"msg","msg":"Спасибо!\nВаша заявка отправлена.\nВ ближайшее время мы с Вами свяжемся!","url":"","addhtml":"","js":"alert(\"Этот код выполняется после успешного отправления заявки.\");","integrations":[]}"
data-fields="[{"name":"Имя","type":"name","required":true,"id":""},{"name":"Телефон","type":"phone","required":true,"id":""}]">
<div class="fields">
<div class="field" data-type="name">
<div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Имя *" style="border-radius: 1px;"></div>
</div>
<div class="field" data-type="phone">
<div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Телефон *" style="border-radius: 1px;"></div>
</div>
</div>
<div class="macros-button">
<div class="btn-out full xs-none">
<div class="btn-inner"><button class="btn font-text submit" id="uid5" data-ym_goal="" data-ga_category="" data-ga_action=""><span class="text">Следующий шаг</span><input type="submit"></button></div>
</div>
</div>
</form>
<div class="cont"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Answer 1
Вам нужно подсоединить обработчик события submit к элементу формы, который находится внутри .step1:
$(".step1 form").submit ( function(e) {
...
});
$(".step1").submit(function(e) {
e.preventDefault();
console.log('Перехват submit!');
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="cont">
<div class="node node7 widget widget-form step1" outline="2">
<div class="wrapper1">
<div class="wrapper2">
<div class="macros-form">
<div class="outer" style="max-width: 350px;">
<div class="inner">
<div class="vertical none size-big">
<div class="head">
<div class="textable">
<p><strong>Шаг 1/2</strong></p>
</div>
</div>
<div class="body">
<div class="cont"></div>
<form class="form text-in" data-form="{"name":"Расчет","type":"order","privacy":"none","privacy_checkbox":"Даю согласие на <обработку персональных данных>","after":"msg","msg":"Спасибо!\nВаша заявка отправлена.\nВ ближайшее время мы с Вами свяжемся!","url":"","addhtml":"","js":"alert(\"Этот код выполняется после успешного отправления заявки.\");","integrations":[]}"
data-fields="[{"name":"Имя","type":"name","required":true,"id":""},{"name":"Телефон","type":"phone","required":true,"id":""}]">
<div class="fields">
<div class="field" data-type="name">
<div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Имя *" style="border-radius: 1px;"></div>
</div>
<div class="field" data-type="phone">
<div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Телефон *" style="border-radius: 1px;"></div>
</div>
</div>
<div class="macros-button">
<div class="btn-out full xs-none">
<div class="btn-inner"><button class="btn font-text submit" id="uid5" data-ym_goal="" data-ga_category="" data-ga_action=""><span class="text">Следующий шаг</span><input type="submit"></button></div>
</div>
</div>
</form>
<div class="cont"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Даже Ваш код работает - смотрите пример. При чем любого из двух методов остановки сабмита (e.preventDefault(); или return false;) - достаточно. В Вашем коде есть еще что-то, чего Вы не показали, а я не могу догадаться, так как израсходовал большую часть сегодняшнего запаса телепатии на Функция load выполняется два раза подряд.
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50338 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31948 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26311 visits
- Как через css изменить цвет png изображения? 11766 visits
- Blob video url download 11314 visits
- Php curl запрос через прокси с авторизацией 10722 visits
- Работа с captcha vk api 9518 visits
© "hostciti.net" 25.3.2026 | 05:07