每次更改日期时Ajax请求

Question

我尝试创建ajax，每次更改日期时都会发送日期，并将响应放在html中，然后如果所有输入都已发送，则提交。如果更改，如何创建侦听字段的脚本。

<form class="form-horizontal" action="" method="post">
            <fieldset>
                <legend></legend>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="reservation_Date">Date</label>
                    <div class="col-sm-6">
                        <input type="date" class="form-control" id="reservation_Date"
                               name="reservation[date]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label" for="reservation_Time">Time</label>
                    <div class="col-sm-6">
                        <input type="time" class="form-control" id="reservation_Time"
                               name="reservation[time]">
                    </div>
                </div> 
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4">
                        <a class="btn btn-default" href="">Cancel</a>
                        <button type="submit" class="btn btn-primary">Create Reservation!</button>
                    </div>
                </div>
                <hr>
                <button type="button" onclick="loadDoc()">Request data</button>
                <p id="reserved"></p>
                <script>
                    function loadDoc() {
                        var Date = $('#reservation_date').val();
                        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function() {
                            if (this.readyState == 4 && this.status == 200) {
                                document.getElementById("reserved").innerHTML = this.responseText;
                            }
                        };
                        xhttp.open("POST", "/create", true);
                        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                        xhttp.send(Date);
                    }
                </script>
            </fieldset>
        </form>

我尝试使用这个脚本，并将其添加到输入onchange＝"中；mySubmit(this.dateTime("；现在，当我更改日期时，再给我同样的表格。

<script>
                    function mySubmit(reservation_Date) {
                        $.ajax({ // create an AJAX call...
                            data: $("reservation_Date").serialize(), // get the form data
                            type: $(reservation_Date).attr("POST"), // GET or POST
                            url: $(reservation_Date).attr("/create"), // the file to call
                            success: function (response) { // on success..
                                $('#demo').html(response); // update the DIV
                            }
                        });
                    }
                </script>

Answer 1

我找到了解决方案

onchange="mySubmit(this.input)"
<script>
            function mySubmit() {
                var Date = document.getElementById("reservation_Date").value;
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("demo").innerHTML = this.responseText;
                    }
                };
                xhttp.open("POST", "/check", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send(Date);
            }
        </script>