Разрешить действие Click на обеих формах

Question

У меня есть две формы на одной целевой странице.одна - это всплывающая форма.

<form method="post" class="catalyst_form test-form" action="email.php" id="test-form">
    <input type="text" name="name" id="name" placeholder="Name *" required>
    <input type="email" name="email" id="email" placeholder="Email id *" required>
    <input type="text" name="contact" id="contact" placeholder="Contact number *" required
        pattern="[6789][0-9]{9}" title="Enter 10 digit mobile number.">
    <input type="text" name="city" id="city" placeholder="City *" required>
    <select name="service" id="service" placeholder="Select Service *" required>
        <option value="" disabled selected>Select Company type</option>
        <option value="Pvt Ltd">Pvt Ltd</option>
        <option value="LLP">LLP</option>
        <option value="Partnership">Partnership</option>
        <option value="Sec 8 Company">Sec 8 Company</option>
        <option value="I am not sure about this
                ">I am not sure about this
        </option>
    </select>
    <div class="button_center">

        <input type="submit" value="Submit Form" id="submit-form" class="filled-button">
    </div>
</form>

И нормальная форма

<form action="email.php" method="POST" id="new-form" class="test-form">
    <input type="text" name="name" id="name" placeholder="Name *" required>
    <input type="email" name="email" id="email" placeholder="Email id *" required>
    <input type="text" name="contact" id="contact" placeholder="Contact number *" required
        pattern="[6789][0-9]{9}" title="Enter 10 digit mobile number.">
    <input type="text" name="city" id="city" placeholder="City *" required>
    <select name="service" id="service" placeholder="Select Service *" required>
        <option value="" disabled selected>Select Company type</option>
        <option value="Pvt Ltd">Pvt Ltd</option>
        <option value="LLP">LLP</option>
        <option value="Partnership">Partnership</option>
        <option value="Sec 8 Company">Sec 8 Company</option>
        <option value="I am not sure about this
                ">I am not sure about this
        </option>
    </select>
    <input type="submit" value="Submit" id="submit" id="new-submit">
</form>

Мой код JQuery выглядит так:

    <script>
        var $form = $('form#test-form')
        url = 'https://script.google.com/macros/s/AKfycbwS7PfJ-Olo0U7_ZEfulrQ5OZnLCnwcUEX6uRE23lvKZbfNoh1K/exec'
        $('#submit-form').on('click', function (e) {
            $('#submit-form').val("Please Wait...").attr('disabled', 'disabled');
            e.preventDefault();
            var jqxhr = $.ajax({
                url: url,
                method: "GET",
                dataType: "json",
                data: $form.serialize()
            }).done(
                $.post('email.php', $('form#test-form').serialize()),
                window.location.replace("link to thank you page")
            );
        })
    </script>

Я хочу включить этот скриптна обеих формах.Я попытался добавить классы, но мой JS, кажется, не работает, как ожидалось.Как выбрать форму, чтобы она работала на обеих формах.

Я даже попробовал два сценария с разными идентификаторами, которые тоже не работали.

Моя цель - использовать два одинаковых сценария для обеих форм.

Answer 1

Внутри обработчика события отправки формы this - это форма, в которой произошло событие

Таким образом, вы можете использовать это для получения сериализованных данных для конкретной формы и использования вашего общего класса для селектора.

Вам также не хватает функций обратного вызова для done() и $.post

var url ='...';
$('.test-form').on('submit', function(e) {
  e.preventDefault();
  var $form = $(this),
       data = $form.serialize();// data from current form instance

  $form.find('input:submit').val("Please Wait...").prop('disabled', true);

  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: data
  }).done(function(){
    $.post('email.php', data, function(){
        window.location.replace("link to thank you page")
    });
  });
})

Answer 2

Вы можете использовать следующий фрагмент кода для включения одной и той же функции обратного вызова на обеих кнопках отправки:

$('body').on('click', '#new-submit, #submit-form', function (e) {
   $('#submit-form').val("Please Wait...").attr('disabled', 'disabled');
   ...
});