问题使表单与AJAX一起工作

时间:2013-08-09 08:01:33

标签: javascript ajax forms

我在客户端网站上创建了一个表单,我正在尝试使用AJAX作为订阅表单。

提交似乎只是重定向而不是序列化表单并使用AJAX。

我认为这里的问题是它不知道响应数据是否“成功”......可能使用不同的变量来确定它是成功还是错误?它应该以相应的方式向用户显示消息,即:

成功 - >你已经注册了。
错误 - >电子邮件地址无效。

也应该是输入空白名称的消息,因为它是必填字段但不确定如何处理该错误..:/

完成小提琴: http://jsfiddle.net/pUd5P/6/

表格

<form id="newsletter" action="http://app.bronto.com/public/webform/process/" method="post">
....
</form>

JS

//ajax subscribe
$( document ).ready( function() {
     $("#newsletter").submit( function() {
        //Do the AJAX post
        //alert("submitting");
        alert(data);
        $.post($("#newsletter").attr("action"), 
        $("#newsletter").serialize(), 
        function( data ) {
            //alert(data);
            if ( data == 'success' ) {
                $('#newsletter-message').html('You have been signed up.')
                             .removeClass('error')
                             .css('visibility','visible');
            } else {
                $('#field-error').html('Invalid email address.')
                                 .addClass('error')
                                 .css('visibility','visible');
            }
        });
        //Stop the normal POST
        return false;
    });
});

2 个答案:

答案 0 :(得分:0)

查看event.preventDefault()

$("#newsletter").submit(function(event) {
    event.preventDefault();
    // rest of your code here.

这会阻止表单以标准方式提交并刷新页面,并允许您$.post返回结果。

我可以看到你使用了return false但是尝试了这个(或者等等):D

答案 1 :(得分:0)

我只是不明白这种行为,但让它发挥作用

http://jsfiddle.net/pUd5P/12/

它正在name = sid上创建问题所以我只是将其更改为tsid

<input type="hidden" name="tsid" value="37ea72cebcc05140e157208f6435c81b" />

现在它正在制作一个ajax请求,你需要在服务器上测试它 Origin is not allowed by Access-Control-Allow-Origin.错误。