jQuery не удается отменить отправку формы

192

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="{&quot;name&quot;:&quot;Расчет&quot;,&quot;type&quot;:&quot;order&quot;,&quot;privacy&quot;:&quot;none&quot;,&quot;privacy_checkbox&quot;:&quot;Даю согласие на <обработку персональных данных>&quot;,&quot;after&quot;:&quot;msg&quot;,&quot;msg&quot;:&quot;Спасибо!\nВаша заявка отправлена.\nВ ближайшее время мы с Вами свяжемся!&quot;,&quot;url&quot;:&quot;&quot;,&quot;addhtml&quot;:&quot;&quot;,&quot;js&quot;:&quot;alert(\&quot;Этот код выполняется после успешного отправления заявки.\&quot;);&quot;,&quot;integrations&quot;:[]}" 
                      data-fields="[{&quot;name&quot;:&quot;Имя&quot;,&quot;type&quot;:&quot;name&quot;,&quot;required&quot;:true,&quot;id&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Телефон&quot;,&quot;type&quot;:&quot;phone&quot;,&quot;required&quot;:true,&quot;id&quot;:&quot;&quot;}]"> 
                      <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="{&quot;name&quot;:&quot;Расчет&quot;,&quot;type&quot;:&quot;order&quot;,&quot;privacy&quot;:&quot;none&quot;,&quot;privacy_checkbox&quot;:&quot;Даю согласие на <обработку персональных данных>&quot;,&quot;after&quot;:&quot;msg&quot;,&quot;msg&quot;:&quot;Спасибо!\nВаша заявка отправлена.\nВ ближайшее время мы с Вами свяжемся!&quot;,&quot;url&quot;:&quot;&quot;,&quot;addhtml&quot;:&quot;&quot;,&quot;js&quot;:&quot;alert(\&quot;Этот код выполняется после успешного отправления заявки.\&quot;);&quot;,&quot;integrations&quot;:[]}" 
                      data-fields="[{&quot;name&quot;:&quot;Имя&quot;,&quot;type&quot;:&quot;name&quot;,&quot;required&quot;:true,&quot;id&quot;:&quot;&quot;},{&quot;name&quot;:&quot;Телефон&quot;,&quot;type&quot;:&quot;phone&quot;,&quot;required&quot;:true,&quot;id&quot;:&quot;&quot;}]"> 
                      <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 выполняется два раза подряд.

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Перписать скрипт с Jquery на Vanila

Имеется скрипт манипуляции атрибутом на jqueryНужно переписать на js

190

jQuery

Помогите с расширением

Мне надо написать расширение которое изменяет высоту строки на сайтахЯ сделал слайдер на jquery ui, но вот как мне сделать чтоб это значение применялось...

158

jQuery