Question

我之前在这里发布过，但收到的答案没有任何帮助，因为它们不起作用。

我有一个使用AJAX的表单，但不会出现错误或成功消息。

任何人都可以看到我可能忽略的内容吗？感谢。

HTML

<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
                            <input type="hidden" name="fid" value="gmy3v1ej883x2lffibqv869a2e3j9" />
                            <input type="hidden" name="sid" value="37ea72cebcc05140e157208f6435c81b" />
                            <input type="hidden" name="delid" value="" />
                            <input type="hidden" name="subid" value="" />
                            <script type="text/javascript">
                            var fieldMaps = {};
                            </script>
                            <label for="nameField">Name:</label>
                            <input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />
                            <label for="emailField">Email:</label>
                            <input id="emailField" type="text" name="39821" value="" />
                            <input type="submit" value="Submit" />
                            <div id="newsletter-message" style="display:none;"></div>
</form>

JS

//ajax subscribe
$(document).ready(function(){
    $("#newsletter").submit(function(event) {
        event.preventDefault();
        alert("submitting");
        alert(data); //it doesn't alert here??
        console.log($("#newsletter").serialize());
        $.post($("#newsletter").attr("action"), $("#newsletter").serialize(), function(data){
            alert(data); //doesn't alert here either
        if(data == 'success'){
        $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
            } else {
        $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').css('visibility','visible');
    }
        });
        //Stop the normal POST
        return false;
    });
});

修改

我现在尝试了这个，但仍然没有运气..

$("#newsletter").submit(function(event) {

  event.preventDefault();

  var $form = $( this ),
      ufname = $form.find( 'input[name="39829[66663]"]' ).val(),
      uemail = $form.find( 'input[name="39821"]' ).val(),
      url = $form.attr( 'action' );

  var posting = $.post( url, { name: ufname, email: uemail } );

  posting.done(function( data ) {
    $('#newsletter-message').html('You have been signed up.').removeClass('error').css('visibility','visible');
  });
});

Answer 1

visibility和display是CSS中的两个不同的东西。

您正在使用div创建展示display:none;，但之后尝试使用.css('visibility','visible');显示该展示位置，因此您最终得到：

<div style="display: none; visibility: visible;" id="newsletter-message">...</div>

由于display:none;。

，这仍然不可见

您应该替换if by：

中的操作

if(data == 'success'){
    $('#newsletter-message').html('You have been signed up.').removeClass('error').show();
} else {
    $('#newsletter-message').html('Please complete the fields and re-submit').addClass('error').show();
}

以下是有关.show() jQuery函数的文档：http://api.jquery.com/show/

Answer 2

我注意到的一件小事，你在名字字段中使用2 id属性，这使得你的输入无效并可能导致问题。

<input id="nameField" type="text" id="field_66663" name="39829[66663]" value="" />

同样如@Thierry所说，如果可能，请避免在名称字段中使用数字。

Ajax表单 - 仍无法使其与验证一起使用

2 个答案: