AJAX 表格 - 發布結果數據以更正 DIV

Question

有人可以幫助 JS 新手嗎？

幾乎一切正常，返回結果，沒有打開新選項卡，forms 提交到 MC 數據庫....但是我無法將結果 html 發布到正確的 DIV。 所有結果都發布到頁腳 div。

我猜我的選擇器不夠具體？ 但我不知道如何正確構建。

2 forms 在頁面上使用 AJAX 提交。 1 個彈出表單和 1 個頁腳表單......但所有結果 html 都在頁腳中發布了 div。

我已按照建議調整了 function 寄存器名稱（並更新了下面的代碼），但表單結果數據仍將進入頁腳 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

您正在使用相同的名稱定義 register() function 兩次。 第二個覆蓋第一個，並且每次您使用該名稱調用 function 時，您調用第二個 function。 一個簡單的解決方案是更改函數的名稱（即 registerPopUpForm()、registerFooterForm() ）並相應地使用它們。

Answer 2

您有兩個具有相同名稱“注冊”的函數，因此當您按下任一 forms 中的提交按鈕時，它會在頁腳中的寄存器 function 中運行，因為它與專用於彈出表單的名稱相同

使用此代碼，您的表單將按預期工作：

//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']); 
      }
    }
  })
};