jQuery

Question

Link到package/app/whatever你要称呼它：http://foundation-datepicker.peterbeno.com/example.html

所以我的 HTML 文件中有一个名为 dp-form 的表单，其中有一个名为 dp 的文本输入，其属性为 name="datepicker"。我知道日期选择器和表单有效，因为当我 select 一个日期并使用提交按钮时，一切都按预期工作，但是，不幸的是，我雄心勃勃并决定尝试让 jQuery 处理发布并在我的 HTML 文件末尾提交引导我执行以下代码：

<script>
    $('#dp').fdatepicker(format='yyyy-mm-dd')
        .on('changeDate', function(event) {
               var pickedDate = $("#dp").val();

               $.ajaxSetup( {data: {csrfmiddlewaretoken: '{{ csrf_token }}'}} );
                $.ajax({
                    url: "/index/",
                    method: "POST",
                    data: {'datepicker': pickedDate, 'routepicker': "default"}
                });
            });

    $("#dp-form").submit();
</script>

问题是一旦我加载包含页面，它就会从一个空表单（尚未单击，日期选择器尚未打开，根本没有完成任何操作）发布数据并提交，然后然后继续这样做。它陷入了无限循环，并且我的页面不断重新加载，因为它不断提交空数据。

Answer 1

您将在每次加载页面时提交表单，方法如下：

$("#dp-form").submit();

您应该在 'changeDate' 事件处理程序中调用它：

$('#dp').fdatepicker(format='yyyy-mm-dd')
        .on('changeDate', function(event) {
               var pickedDate = $("#dp").val();
               $("#dp-form").submit();
            });

如果您想使用 ajax 发送表单，您可以使用 jQuery Form Plugin

<html>

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        $('#dp').fdatepicker(format='yyyy-mm-dd')
        .on('changeDate', function(event) {
               var pickedDate = $("#dp").val();
               $("#dp-form").submit();
            });
        // bind 'dp-form' and provide a simple callback function 
        $('#dp-form').ajaxForm(function() { 
            alert("Thank you for posting"); 
        }); 
    });
    //You'll also need this snippet in order to not struggle with csrftoken in Django :
    $(function() {
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                }
            }
        });
    });
</script>

jQuery - 'changeDate' 触发器上的基础日期选择器表现不佳

jQuery - Foundation Datepicker on 'changeDate' trigger not behaving well

forms

django

datepicker

zurb-foundation