DateTime picker calculates price

Refresh

March 2019

Views

83 time

1

I'm using 2 Inline DateTimePicker (http://www.jqueryrain.com/?lnsG0UbP) to calculate the difference between 2 DateTimes. As the result I get difference in hours and then I multiply them with my static price. The main problem is that I use submit form and after every calculation my DateTime picker resets.

How I'm able to do the same calculation without refreshing the page (via ajax), that calculates price directly by selecting the values?

Thank you.

Image: http://s1.postimg.org/djh6euay7/datetime.png

2 answers

1

You could post the input elements values in your form. Then when the server answers the post you fill the input elements on the server.

Then when the client loads and you apply

jQuery('#datetimepicker').datetimepicker();//From their site

The time picker should get its pre form post value.

Then you can calculate what you need, if both input elements has values

var $timepicker1 = jQuery('#datetimepicker1').datetimepicker();
var $timepicker2 = jQuery('#datetimepicker2').datetimepicker();
if($timepicker1.val() && $timepicker2.val())
{
 //call awesome calculation function
}
1

You should use the button-tag instead of the submit-button:

<input type = button ...> or <button ....>

Now you are able to use the onClick-Event

<input type = 'button' onclick='onClickEvent()'>

...

<script>
function onClickEvent()
{
    sendData("POST",{'value1':1,'value2':2},"","/yourURL","","");
}
function sendData(method,data,dataType,adress, funcSuccess, funcError)
{
    $.ajax({
    type: method,
    url: adress,
    data: data,
    success: function(jqXHR, textStatus, errorThrown)
    {
        funcSuccess(jqXHR,textStatus,errorThrown);
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        funcError(jqXHR,textStatus,errorThrown);
    },
    dataType: dataType,

    });
}

Lee