【问题标题】:Jquery AJAX submission form errorJquery AJAX提交表单错误
【发布时间】:2015-08-03 10:27:07
【问题描述】:

我使用表达式引擎的插件免费表单创建了一个基本的提交表单。从 CMS 方面来看,我的数据正在提交到 EE CMS。但是,在我提交了我的详细信息后,我没有收到成功消息,而是在我的表单 object object 上收到以下消息。 <div id="form-messages" class="success">[object Object]</div>

我假设这与我的 jquery 有关,因为当我通过 php 验证提交时,该函数正在工作。

下面是我的代码的 sn-p。

var form = $('#ajax-contact');
var formMessages = $('#form-messages');

$(form).submit(function(e) {

e.preventDefault();
var formData = $(form).serialize();

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})
.done(function(response) {
    //  formMessages div has the 'success' class.
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');

    // Set the message text.
    $(formMessages).text(response);

    // Clear the form.
    $('#name').val('');
    $('#email').val('');
})
.fail(function(data) {
    // Make sure that the formMessages div has the 'error' class.
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    // Set the message text.
    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
});

})

HTML

<div id="form-messages" class="success"></div>

exp:freeform:form 
            form_id="1"
            admin_notify="me@email.com"
            form:class="main-contact submit-fade ajax-form"
            form:id="ajax-contact"


        }

            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  {freeform:field:first_name
                      attr:class="form-control" 
                      attr:placeholder="First Name" 
                      attr:class="required"
                  }

                </li>

                <li>
                  <label for="email">Email</label>
                  {freeform:field:email
                      attr:class="form-control" 
                      attr:placeholder="Email" 
                      attr:class="required"
                  }
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">

        {/exp:freeform:form}

【问题讨论】:

  • 控制器是否返回 JSON?看起来 jQuery 正在解析 JSON,所以 response 是一个对象,而不是字符串。
  • console.log(response) 显示什么?
  • 对象 {success: true, entry_id: 5, form_id: "1", return: "mysite/index.php/sandbox/freeform", return_url: "mysiteindex.php/sandbox/freeform"}
  • @Barmar 我假设我需要修改 .done(function) 但我也不是 100% 确定要修改什么
  • 你想在form-messages中显示哪一部分?

标签: jquery ajax forms expressionengine


【解决方案1】:

响应被解析为 JSON。使用:

.done(function(response) {
    if (response.success) {
        formMessages.removeClass("error").addClass("success").text("Success!");
        $("#name,#email").val("");
    } else {
        formMessages.removeClass("success").addClass("error").text("Oops, failure!");
    }
})

【讨论】:

  • 谢谢,我试过了,但它仍然不起作用,我稍微编辑了我的问题,只是为了让事情更清楚
  • 是否还有一种方法可以标记该字段中的错误,即如果用户输入了无法识别的电子邮件地址等
  • 您可以在 JSON 响应中添加一个 message 字段,并显示该字段而不是我在答案中输入的硬编码消息。
猜你喜欢
  • 2015-10-24
  • 1970-01-01
  • 2014-12-22
  • 1970-01-01
  • 1970-01-01
  • 2021-09-30
  • 2011-04-23
  • 2012-04-05
相关资源
最近更新 更多