AJAX 表单 - 发布结果数据以更正 DIV

Question

有人可以帮助 JS 新手吗？

几乎一切正常，返回结果，没有打开新标签，表单提交到 MC 数据库....但是我无法将结果 html 发布到正确的 DIV。所有结果都将发布到页脚 div。

我猜我的选择器不够具体？但是我不知道如何正确构建。

页面上的 2 个表单使用 AJAX 提交。 1 个弹出表单和 1 个在页脚中的表单.....但是所有结果 html 都在页脚中发布了 div。

我已按照建议调整了函数寄存器名称（并更新了下面的代码），但表单结果数据仍将进入页脚 div

//JAVASCRIPT


// FOOTER FORM. waits for form to appear rather than appending straight to the form. Also helps if you have more than one type of form that you want to use this action on. 
$(document).on('submit', '#footer-mc-embedded-subscribe-form', function(event) {
    try {
      //define argument as the current form especially if you have more than one
      var $registerFooterFormbutton= jQuery(this);
      // stop open of new tab
      event.preventDefault();
      // submit form via ajax
      register($registerFooterFormbutton);
    } catch(error){}
  });

// POP UP FORM. waits for form to appear rather than appending straight to the form. Also helps if you have more than one type of form that you want to use this action on. 
$(document).on('submit', '#pop-mc-embedded-subscribe-form', function(event) {
    try {
      //define argument as the current form especially if you have more than one
      var $registerPopUpFormbutton= jQuery(this);
      // stop open of new tab
      event.preventDefault();
      // submit form via ajax
      register($registerPopUpFormbutton);
    } catch(error){}
  });

// POP UP FORM. post result to div
function register($registerPopUpForm) {
  $('#pop-mc-embedded-subscribe-form').val('Sending...');
  $.ajax({
    type: 'GET',
    url: 'https://websitename.us16.list-manage.com/subscribe/post-json?u=.....&c=?',
    data: $registerPopUpForm.serialize(),
    cache: false,
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    error: function (err) { alert('Could not connect to the registration server. Please try again later.') },
    success: function (data) {
      $('#pop-mc-embedded-subscribe-form').val('pop-subscribe')
      if (data.result === 'success') {
        // Yeahhhh Success
    console.log(data.msg)
        $('#pop-mce-EMAIL').css('borderColor', '#ffffff')
        $('#pop-subscribe-result').css('color', 'rgb(53, 114, 210)')
         $("#pop-subscribe-result").html(data['msg']); 
        $('#pop-mce-EMAIL').val('')
      } else {
        // Something went wrong, do something to notify the user.
     console.log(data.msg)
        $('#pop-mce-EMAIL').css('borderColor', '#ff8282')
        $('#pop-subscribe-result').css('color', '#ff8282')
        $("#pop-subscribe-result").html(data['msg']);  
      }
    }
  })
};


// FOOTER FORM. post result to div
function register($registerFooterForm) {
  $('#footer-mc-embedded-subscribe-form').val('Sending...');
  $.ajax({
    type: 'GET',
    url: 'https://websitename.us16.list-manage.com/subscribe/post-json?u=.....&c=?',
    data: $registerFooterForm.serialize(),
    cache: false,
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    error: function (err) { alert('Could not connect to the registration server. Please try again later.') },
    success: function (data) {
      $('#footer-mc-embedded-subscribe-form').val('footer.subscribe')
      if (data.result === 'success') {
        // Yeahhhh Success 
    console.log(data.msg)
        $('#footer-mce-EMAIL').css('borderColor', '#ffffff')
        $('#footer-subscribe-result').css('color', 'rgb(53, 114, 210)')
         $("#footer-subscribe-result").html(data['msg']); 
        $('#footer-mce-EMAIL').val('')
      } else {
        // Something went wrong, do something to notify the user.
     console.log(data.msg)
        $('#footer-mce-EMAIL').css('borderColor', '#ff8282')
        $('#footer-subscribe-result').css('color', '#ff8282')
        $("#footer-subscribe-result").html(data['msg']); 
      }
    }
  })
};

<!--HTML POP UP FORM-->

<form
  action="mailchimp url"
  method="post"
  name="pop-form"
  id="pop-mc-embedded-subscribe-form"
  class=""
  target="_blank"
  novalidate
>
  <div class="form-group">
    <input
      type="email"
      name="EMAIL"
      class="form-control required"
      placeholder="Enter your e-mail"
      id="pop-mce-EMAIL"
    />
    <input
      type="submit"
      value="SUBSCRIBE HERE"
      name="pop-subscribe"
      id="pop-mc-embedded-subscribe"
      class="button"
    />
  </div>
  <div id="pop-subscribe-result"></div>
</form>

<!--FOOTER FORM HTML-->

<form
  action="mailchimp url"
  method="post"
  id="footer-mc-embedded-subscribe-form"
  name="footer-form"
  class=""
  target="_blank"
  novalidate
>
  <div class="mc-field-group">
    <label for="mce-EMAIL"
      >Email Address <span class="asterisk">*</span>
    </label>
    <input
      type="email"
      value=""
      name="EMAIL"
      class="form-control required email"
      id="footer-mce-EMAIL"
      placeholder="Email Address *"
    />
  </div>
  <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input
      type="text"
      value=""
      name="FNAME"
      class="form-control"
      id="mce-FNAME"
      placeholder="First Name"
    />
  </div>
  <div class="mc-field-group">
    <label for="mce-LNAME">Last Name </label>
    <input
      type="text"
      value=""
      name="LNAME"
      class="form-control"
      id="mce-LNAME"
      placeholder="Last Name"
    />
  </div>

  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
  <div style="position: absolute; left: -5000px;" aria-hidden="true">
    <input
      type="text"
      name="b_dc51fb25cd808abedc98e3ff2_ea4d259202"
      tabindex="-1"
      value=""
    />
  </div>
  <div class="footer-btn">
    <input
      type="submit"
      value="Subscribe"
      name="footer-subscribe"
      id="mc-embedded-subscribe"
      class="button"
    />
  </div>
  <div id="footer-subscribe-result"></div>
</form>

Answer 1

您有两个具有相同名称“注册”的函数，因此当您在任一表单中按下提交按钮时，它会在页脚的注册函数中运行，因为它与专用于弹出表单的名称相同

使用此代码，您的表单将按预期工作：

//JAVASCRIPT


// FOOTER FORM. waits for form to appear rather than appending straight to the form. Also helps if you have more than one type of form that you want to use this action on. 
$(document).on('submit', '#footer-mc-embedded-subscribe-form', function(event) {
    try {
      //define argument as the current form especially if you have more than one
      var $registerFooterFormbutton= jQuery(this);
      // stop open of new tab
      event.preventDefault();
      // submit form via ajax
      register1($registerFooterFormbutton);
    } catch(error){}
  });

// POP UP FORM. waits for form to appear rather than appending straight to the form. Also helps if you have more than one type of form that you want to use this action on. 
$(document).on('submit', '#pop-mc-embedded-subscribe-form', function(event) {
    try {
      //define argument as the current form especially if you have more than one
      var $registerPopUpFormbutton= jQuery(this);
      // stop open of new tab
      event.preventDefault();
      // submit form via ajax
      register($registerPopUpFormbutton);
    } catch(error){}
  });

// POP UP FORM. post result to div
function register($registerPopUpForm) {
  $('#pop-mc-embedded-subscribe-form').val('Sending...');
  $.ajax({
    type: 'GET',
    url: 'https://websitename.us16.list-manage.com/subscribe/post-json?u=.....&c=?',
    data: $registerPopUpForm.serialize(),
    cache: false,
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    error: function (err) { alert('Could not connect to the registration server. Please try again later.') },
    success: function (data) {
      $('#pop-mc-embedded-subscribe-form').val('pop-subscribe')
      if (data.result === 'success') {
        // Yeahhhh Success
    console.log(data.msg)
        $('#pop-mce-EMAIL').css('borderColor', '#ffffff')
        $('#pop-subscribe-result').css('color', 'rgb(53, 114, 210)')
         $("#pop-subscribe-result").html(data['msg']); 
        $('#pop-mce-EMAIL').val('')
      } else {
        // Something went wrong, do something to notify the user.
     console.log(data.msg)
        $('#pop-mce-EMAIL').css('borderColor', '#ff8282')
        $('#pop-subscribe-result').css('color', '#ff8282')
        $("#pop-subscribe-result").html(data['msg']);  
      }
    }
  })
};


// FOOTER FORM. post result to div
function register1($registerFooterForm) {
  $('#footer-mc-embedded-subscribe-form').val('Sending...');
  $.ajax({
    type: 'GET',
    url: 'https://websitename.us16.list-manage.com/subscribe/post-json?u=.....&c=?',
    data: $registerFooterForm.serialize(),
    cache: false,
    dataType: 'jsonp',
    contentType: 'application/json; charset=utf-8',
    error: function (err) { alert('Could not connect to the registration server. Please try again later.') },
    success: function (data) {
      $('#footer-mc-embedded-subscribe-form').val('footer.subscribe')
      if (data.result === 'success') {
        // Yeahhhh Success 
    console.log(data.msg)
        $('#footer-mce-EMAIL').css('borderColor', '#ffffff')
        $('#footer-subscribe-result').css('color', 'rgb(53, 114, 210)')
         $("#footer-subscribe-result").html(data['msg']); 
        $('#footer-mce-EMAIL').val('')
      } else {
        // Something went wrong, do something to notify the user.
     console.log(data.msg)
        $('#footer-mce-EMAIL').css('borderColor', '#ff8282')
        $('#footer-subscribe-result').css('color', '#ff8282')
        $("#footer-subscribe-result").html(data['msg']); 
      }
    }
  })
};

Answer 2

您使用相同的名称定义了两次 register() 函数。第二个覆盖第一个，并且每次使用该名称调用函数时，都会调用第二个函数。一个简单的解决方案是更改函数的名称（即 registerPopUpForm() 、 registerFooterForm() ）并相应地使用它们。