Ajax发布与jQuery datepicker没有显示日期 [英] Ajax post with jQuery datepicker not showing date

问题描述

我的表单中有一个datepicker，我想用ajax调用发布表单数据。我的问题是表单没有从datepicker中选择日期。

I have a datepicker in my form and I would like to post the form data with an ajax call. My problem is that the form does not get the date selected from the datepicker.

以下是我与datepicker一起使用的主题的链接：
< a href =http://wrapbootstrap.com/preview/WB00U99JJ =nofollow> http://wrapbootstrap.com/preview/WB00U99JJ

Here is the link to the theme I am using with the datepicker: http://wrapbootstrap.com/preview/WB00U99JJ

这里是表单中的datepicker的html：

Here is the html for the datepicker which is inside the form:

<div id="datepicker-inline" name="date"></div>

这是我的ajax帖子

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline');
    $.ajax('/api/service', {
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: form.serializeArray(),
        success: function(response) {
            console.log("Success!");
            $('#status').addClass('status-bar-success');
        },
        error: function() {
            console.log('OH NOES!');
            console.log(form.serializeArray());
            console.log(date.val());
            $('#status').addClass('status-bar-error');
        }
    });
});

我正在控制台中运行，看看我得到了什么。 form.serializeArray（）正在工作，并且date.val（）获取选择的日期。我的问题是如何将日期值放入form.serializeArray（）？

I am running in the console to see what I get. The form.serializeArray() is working and the date.val() gets the date selected. My quesion is how do I had the date value into the form.serializeArray()?

*更新*

html

<div id="datepicker-inline"></div>
<input type="text" id="date_hidden" name="date added" class="no_show"/>

ajax

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline').val();
    $('#date_hidden').val(date);
    $.ajax('/api/service', {
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: form.serializeArray(),
        success: function(response) {
            console.log("Success!");
            $('#status').addClass('status-bar-success');
        },
        error: function() {
            console.log('OH NOES!');
            console.log(form.serializeArray());
            console.log(date);
            $('#status').addClass('status-bar-error');
        }
    });
});

推荐答案

您可以隐藏 元素与 div 一起，因为它没有任何输入元素。

You could have a hidden element alongside that div since it doesn't have any input element.

<div id="datepicker-inline" name="date"></div>
<input type="hidden" id="datepicker-inline_hidden" name="date"/>

在您的提交中，您可以执行

And in your submit you could do

$('#submit').on('click', function() {
    var form = $('form');
    var date = $('#datepicker-inline');
    $('#datepicker-inline_hidden').val(date);
    //... your code

所以你的日期值是作为隐藏的元素提交的。

So that your date value is submitted as the hidden element.

这篇关于Ajax发布与jQuery datepicker没有显示日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！