1

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

我有一个使用 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');
  });
});
4

2 回答 2

1

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

您正在使用 创建显示div，display:none;但随后您尝试使用 使其可见.css('visibility','visible');，因此您最终得到：

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

由于display:none;.

您应该将 if 中的操作替换为：

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/

于 2013-08-12T03:56:10.727 回答
0

我注意到一件小事，您使用 2id属性作为名称字段，这会使您的输入无效并可能导致问题。

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

也按照@Thierry 所说的那样做，如果可能的话，避免在名称字段中使用数字。

于 2013-08-12T04:07:32.720 回答