JS. Form, submit buttons

Question

Уважаемые ! У меня огромный вопрос, я нашел в интернете скрипт, не знаю JS вообще, и обнаружил что у меня обе кнопки срабатывают на JS, т.к в каждой submit,но сколько бы я не пытался поменять скрипт в отношении кнопки создать аккаунт, реагирует либо на обе, либо что то не так. Как сделать чтобы скрипт запускался только по форме/кнопке которая должна открыть PHP регистрации

$(document).ready(function() {
  $("form").submit(function() {
    // Получение ID формы
    var formID = $(this).attr('id');
    // Добавление решётки к имени ID
    var formNm = $('#'+formID);
    $.ajax({
      type: "POST",
      url: '/sign.php',
      data: formNm.serialize(),
      success: function(data) {
        // Вывод текста результата отправки
        $(formNm).html(''+data+'');
      },
      error: function(jqXHR, text, error) {
        // Вывод текста ошибки отправки
        $(formNm).html('no');
      }
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="zr-lr" action="index.php" method="POST">
  <div class="d-flex justify-content-center">
    <button type="submit" name="do_login" class="btn btn-   primary">Войти</button>
  </div>
  <p class="mt-3 text-center">
    У вас нет аккаунта? <input type="submit" id="zrlink" class="zrlink" value="Создать сейчас!">
  </p>
</form>

Answer 1

Грубый вариант, если обработчик используется в разных местах (управляем условиями).

let subTrigger; // Тут будем хранить информацию о нажатой SUBMIT кнопке

$('form [type="submit"]').on('click', function() { // При нажатии на такую кнопку..
    subTrigger = $(this); // .. Записываем её в переменную
});

$("form").submit(function() {
  if(subTrigger.attr('id') !== 'zrlink') return false; // Далее сверяем, если в этом месте нажата не кнопка "Создать сейчас!", то пропускаем код ниже.
  var formID = $(this).attr('id');
  var formNm = $('#'+formID);
  $.ajax({
    type: "POST",
    url: '/sign.php',
    data: formNm.serialize(),
    success: function(data) {
      $(formNm).html(''+data+'');
    },
    error: function(jqXHR, text, error) {
      $(formNm).html('no');
    }
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="zr-lr" action="index.php" method="POST">
  <div class="d-flex justify-content-center">
    <button type="submit" name="do_login" class="btn btn-   primary">Войти</button>
  </div>
  <p class="mt-3 text-center">
    У вас нет аккаунта? <input type="submit" id="zrlink" class="zrlink" value="Создать сейчас!">
  </p>
</form>

Вариант если только в одном месте и с конкретной кнопкой

$('#zr-lr').submit(function() {
  return false; // Не производим отправку формы #zr-lr при нажатие любой кнопки submit
});

$("#zrlink").click(function() { // Выполняем только при нажатие кнопки #zrlink
  var formID = $(this).closest('form').attr('id'); // Чтобы получить ID формы, в которой находилась кнопка, выполним функцию .closest().
  var formNm = $('#'+formID);
  $.ajax({
    type: "POST",
    url: '/sign.php',
    data: formNm.serialize(),
    success: function(data) {
      $(formNm).html(''+data+'');
    },
    error: function(jqXHR, text, error) {
      $(formNm).html('no');
    }
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="zr-lr" action="index.php" method="POST">
  <div class="d-flex justify-content-center">
    <button type="submit" name="do_login" class="btn btn-   primary">Войти</button>
  </div>
  <p class="mt-3 text-center">
    У вас нет аккаунта? <input type="submit" id="zrlink" class="zrlink" value="Создать сейчас!">
  </p>
</form>

Разные действия для кнопок

let subTrigger; // Тут будем хранить информацию о нажатой SUBMIT кнопке

$('form [type="submit"]').on('click', function() { // При нажатии на такую кнопку..
    subTrigger = $(this); // .. Записываем её в переменную
});

$("form").submit(function() {
  if(subTrigger.attr('id') === 'login') { // Действие для кнопки "Войти"
    console.info('Вы нажали кнопку "Войти"');
  }
  
  if(subTrigger.attr('id') === 'zrlink') { // Действие для кнопки "Создать сейчас!"
    console.info('Вы нажали кнопку "Создать сейчас!"');
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form id="zr-lr" action="index.php" method="POST">
  <div class="d-flex justify-content-center">
    <button type="submit" id="login" name="do_login" class="btn btn-   primary">Войти</button>
  </div>
  <p class="mt-3 text-center">
    У вас нет аккаунта? <input type="submit" id="zrlink" class="zrlink" value="Создать сейчас!">
  </p>
</form>

БЛОГ НА HUSL

JS. Form, submit buttons

Ответы (1 шт):