Ajax表單不顯示html

我有一個基於ajax的反饋表單，並且在表單中顯示來自響應的html的問題。Ajax表單不顯示html

jQuery代碼是

$(document).ready(function() { 
var form_holder = $('#form-holder'); 
var form_holder_feedback = ''; 
$('.submit button').click(function() { 
    var name = $('[name=name]').val(); 
    var email = $('[name=email]').val(); 
    var message = $('[name=message]').val(); 

    $.ajax({ 
     url: 'email/email.php', 
     type: 'POST', 
     data: {name: name, email: email, message: message}, 
     dataType: 'html', 
    }) 
    .success(function(html) { 
     form_holder_feedback = html; 
     console.log(form_holder_feedback); 
    }) 
    .error(function(html) { 
     form_holder_feedback = '<strong>There was an error!</strong>'; 
    }) 

    form_holder.animate({ 
     'marginLeft': '840px' 
    },300,'swing', function() { 
     form_holder.css({ 
      'display' : 'none', 
      'margin-left': '0' 
     }).html(form_holder_feedback).fadeIn('slow'); 
    }); 
}); 

});

會發生什麼事的形式發送數據，並得到處理和電子郵件被髮送。但php電子郵件文件回顯的html沒有顯示出來。

我已經添加了console.log(form_holder_feedback);來測試發送表單後的值，它回來了與PHP電子郵件發件人迴應的行。

來源

2014-01-09 Ronald Fernandes

嘗試在.html（「Static Text goes here」）中分配靜態文本並查看它是否正在更改div的文本。如果你沒有得到它，這意味着在form_holder.animate中有一些錯誤（{... block – nextgtech

顯示您form_holder後，你的Ajax完成

.success(function(html) { 
     form_holder_feedback = html; 
     console.log(form_holder_feedback); 
     showFeedback(form_holder_feedback); 
});

將代碼放在一個函數裏面 -

function showFeedback(fb){ 
    form_holder.animate({ 
     'marginLeft': '840px' 
    },300,'swing', function() { 
     form_holder.css({ 
      'display' : 'none', 
      'margin-left': '0' 
     }).html(fb).fadeIn('slow'); 
    }); 
}

來源

2014-01-09 08:42:42

是的，但這有效，但是有一些代碼重複，謝謝 –

你的回調（即設置form_holder_feedback）您.html呼叫form_holder後正在執行。您需要將該代碼放入回調中。爲了節省一些代碼重複，你應該把它放在一個函數中。

$(document).ready(function() { 
    var form_holder = $('#form-holder'); 
    var form_holder_feedback = ''; 
    var animateForm = function() { 
     form_holder.animate({ 
      'marginLeft': '840px' 
     },300,'swing', function() { 
      form_holder.css({ 
       'display' : 'none', 
       'margin-left': '0' 
      }).html(form_holder_feedback).fadeIn('slow'); 
     }); 
    } 

    $('.submit button').click(function() { 
     var name = $('[name=name]').val(); 
     var email = $('[name=email]').val(); 
     var message = $('[name=message]').val(); 

     $.ajax({ 
      url: 'email/email.php', 
      type: 'POST', 
      data: {name: name, email: email, message: message}, 
      dataType: 'html', 
     }) 
     .success(function(html) { 
      form_holder_feedback = html; 
      animateForm(); 
     }) 
     .error(function(html) { 
      form_holder_feedback = '<strong>There was an error!</strong>'; 
      animateForm(); 
     }) 
    }); 
});

來源

2014-01-09 08:44:11 Pinpickle

這工作完美。 –

Ajax表單不顯示html

回答

相關問題