Question

我是建立网站的新手，需要一些帮助。我在页面上有三个表单。其中两种形式是模态。我试图在所有这些上运行java脚本。但看起来java脚本只会在首先使用的表单上运行。谁能告诉我哪里出错了。以下是我的代码

@NgModule({
    declarations: [
      CommonModule,
      HomeComponent,
    ],
    imports: [
        SharedModule,
    ]
})
class HomeModule

$(function() {

  // Get the form.
  var form = $('#ajax-contact');
  var form = $('#ajax-enquires');
  var form = $('#ajax-cv');

  // Get the messages div.
  var formMessages = $('#form-messages');

  //Hide image on page load
  $('#loader').hide();

  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // disable button double submits
    $("#submit").attr('disabled', true);

    // Show image before making ajax call
    $('#loader').show();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
      })
      .done(function(response) {
        // Hide always after every request
        $('#loader').hide();
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // Set the message text.
        $(formMessages).text(response);

        //Remove message after x seconds
        setTimeout(function() {
          $(formMessages).text('');
          $(formMessages).removeClass('success')
        }, 3000);

        //rest form
        $("#ajax-contact")[0].reset();
        $("#ajax-enquires")[0].reset();
        $("#ajax-cv")[0].reset();

        // enable button 
        $("#submit").attr('disabled', false);

      })
      .fail(function(data) {
        // Hide always after every request
        $('#loader').hide();
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // Set the message text.
        if (data.responseText !== '') {
          $(formMessages).text(data.responseText);
        } else {
          $(formMessages).text('Oops! An error occured and your message could not be sent.');
        }

        //Remove message after x seconds
        setTimeout(function() {
          $(formMessages).text('');
          $(formMessages).removeClass('error')
        }, 5000);

        // enable button 
        $("#con-submit").attr('disabled', false);

      });

  });

});

Answer 1

看看你在这做什么：

var form = $('#ajax-contact');
var form = $('#ajax-enquires');
var form = $('#ajax-cv');

在所有这三行之后，您期望form变量是什么？无论你最后将它设置为。

如果您希望form（或更恰当地forms）选择所有这三个，请使用标识所有三个的选择器设置一次：

var form = $('#ajax-contact, #ajax-enquires, #ajax-cv');

然后，当您设置提交处理程序时，它将被设置为所有这三个匹配元素。

另请注意，在提交处理程序中，您不希望以您的方式引用form变量。相反，使用this，因此处理程序的每个实例都知道要使用哪个匹配表单。例如：

var formData = $(this).serialize();

Answer 2

$('form').on('submit', function(){
  console.log($(this).attr('id'));
  // do something
  $(this).find('button[type="submit"]').attr('disabled', 'disabled');
});

已经尝试过这样的事情？

每次都会覆盖你的var表单。

<form id="form1">
    <button type="submit">btn1</button>
</form>
<form id="form2">
    <button type="submit">btn2</button>
</form>

并且你的html也是失败的，id只能使用一次。你在每种形式中使用id="submit"。最好杀死id属性并在你的js代码中使用$(this).find('button[type="submit"]')

在同一页面上的多个表单上运行javascript

2 个答案: