0

I am doing my first ASP.net MVC application and I am facing some problems that I do not know how to fix. I have been trying to find answers from here as well but no luck so far, so I really hope you can help me.

So what I need my application to do is once I select an start date and end date I will click the button and it will bring back the data from selected period. I can choose the dates but for some reason the button dos not work, I can not click it. Debuging gives me an error saying:

SCRIPT5022: InvalidStateError

I assume that the problem is in here, but I am not sure:

var startdate = $("#startdate").datepicker('getDate');

I tried to test the button by writing it like that:

var startdate = "";

and it takes me to controller, but if it has an value its not working. The code that I have in MVC view is following:

@model Proovitoo_v4.Models.DatePickerModel
@{
    ViewBag.Title = "Index";
}

@using (Html.BeginForm())
{
    <label>Start date</label><br />
    @Html.EditorFor(model => model.StartDate, new { htmlAttributes = new { @class = "datepicker"@*, @required = "true", type = "date", value = "startdate"*@ } })
    <br />
    <label>End date</label><br />
    @Html.EditorFor(model => model.EndDate, new { htmlAttributes = new { @class = "datepicker"@*, @required = "true", type = "date", value = "enddate"*@ } })

}
<br />
<br />
<input id="btnSubmit" type="button" value="Show electricity consumption" @*onclick="location.href='@Url.Action("FilterByDate", "FilterByDate")'"*@ />
<br />

@section scripts{
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function algus() {
            $(".datepicker").datepicker({
                dateFormat: "dd.mm.yy",
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                yearRange: "2010:2018",
                minDate: new Date(2010, 0, 1),
                maxDate: new Date(2018, 0, 1),
                showOn: "both",
                buttonText: "Select"
            });
        });
        $(function () {
            $("#startdate").datepicker({ dateformat: "dd.mm.yy" });
            $("#enddate").datepicker({ dateformat: "dd.mm.yy" });
            $("#btnSubmit").click(function (e) {
                e.preventDefault();
                var startdate = $("#startdate").datepicker('getDate');
                console.log(startdate);
                var enddate = $("#enddate").datepicker('getDate');
                console.log(enddate);
                var datefilter = { StartDate: startdate, EndDate: enddate };
                console.log(datefilter);

            $.ajax({
                url: "@Url.Action("FilterByDate", "DatePicker")",
                type: "get",
                data: datefilter
            })
            .done(function(datepicker) {
                $("#res").html(tmpConsumptions);
            });
        });
    });
    </script>
}
Abbas
  • 14,186
  • 6
  • 41
  • 72
KVlge
  • 1
  • 1
    Possible duplicate of [Enable submit button when filling in some field with text](https://stackoverflow.com/questions/14632110/enable-submit-button-when-filling-in-some-field-with-text) – Danieboy Dec 14 '17 at 08:23
  • Could you please check the console and send the errors you see there? – Golnaz Saraji Dec 14 '17 at 08:59
  • Golnaz console gives me fallowing message: [object Object]: {context: Object, selector: "#startdate"} [object Object]: {context: Object, selector: "#enddate"} [object Object]: {EndDate: Object, StartDate: Object} SCRIPT5022: InvalidStateError jquery-1.12.4.js (10054,3) – KVlge Dec 14 '17 at 09:08

1 Answers1

0

I got some extra help. Thank you for your support. Here is my working solution:

@model Proovitoo_v4.Models.DatePickerModel
@{
    ViewBag.Title = "Index";
}     
    @using (Html.BeginForm())
    {
        <label>Start date</label><br />
        @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker" })
        <br />
        <label>End date</label><br />
        @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" })
    }
    <br />

<br />

    <input id="btnSubmit" type="button" value="Show electricity consumption"/>

<br />

@section scripts{

    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(function algus() {
            $(".datepicker").datepicker({
                dateFormat: "dd.mm.yy",
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                yearRange: "2015:2018",
                minDate: new Date(2010, 0, 1),
                maxDate: new Date(2018, 0, 1),
                showOn: "both",
                buttonText: "Select"
            });
        });
        $(function () {
            $("#startdate").datepicker({ dateformat: "dd.mm.yy" });
            $("#enddate").datepicker({ dateformat: "dd.mm.yy" });
            $("#btnSubmit").click(function (e) {
                e.preventDefault();
                var startdate = $("#StartDate").val();
                console.log(startdate);
                var enddate = $("#EndDate").val();
                console.log(enddate);
                var datefilter = { StartDate: startdate, EndDate: enddate };
                console.log(datefilter);
                console.log('@Url.Action("FilterByDate", "DatePicker")');

            $.ajax({
                url: "@Url.Action("FilterByDate", "DatePicker")",
                    type: "POST",
                    data: JSON.stringify(datefilter),
                    contentType: 'application/json; charset=utf-8'
                })
                    .done(function (datepicker) {
                        $("#res").html(tempConsumtion);
                    });
        });
});
    </script>

    }
KVlge
  • 1