<div>
  <h2>Кнопка внутри тегов &lt;from&gt;</h2>
<form id="form_1">
  <input name="input" type="text" placeholder="Введите что-нибудь" />
  <button type="submit">Отправить форму 1</button>
</form>
</div>

<div>
<h2>Кнопка вне тегов &lt;from&gt;</h2>
<form id="form_2">
  <input name="input" type="text" placeholder="Введите что-нибудь"/>
</form>

<button type="submit" form="form_2">Отправить форму 2</button>
</div>
div {
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
}

h2 {
  font-family: Tahoma;
  margin: 0;
}

form {
  
}

input, button {
  font-size: 16px;
  padding: 4px 8px;
  border: 1px solid #efefef
  border-radius: 3px;
  margin-top: 12px;
}

p {
  color: red;
}
jQuery(document).ready(function($){
  $('form').on('submit', function(e){
    e.preventDefault();
    
    var container = $(this).parent(),
        number = container.find('p').length;
    
    if(number < 3)
      text = 'Форма отправлена';
    if(number == 3)
      text = 'Не надоело еще кликать?';
    if(number == 4)
      text = 'Может хватит?'
    if(number == 5)
      text = 'Вы же уже поняли, что все работает';
    if(number == 6)
      text = 'Все, это был последний раз';
    if(number == 7)
      text = 'Я не шучу, хватит!'
    if(number == 8)
      text = 'Выкл.'
    if(number > 8)
      return false;
    
    container.find('h2').before('<p>' + text + '</p>');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js