oninput JavaScript Date Function Calculator

Question

I found this code online and am unable to get it to work correctly can someone please tell me where I am going wrong? The description made it sound like it will work exactly how I need it to but for some reason I cannot get it to work correctly on my end. I have been putting a bunch of alerts and cannot even get them to display. I am sorry I am very new trying to teach myself JavaScript.

Input button:

<cfinput
       type="datefield"
       name="purchasedate"
       width="130"
       required="yes"
       message="Please enter purchase date."
       value="#dateformat(now(),"mm/dd/yyyy")#" 
       oninput="calculateTotal();"
       >

JavaScript Function:

function getDatePrice(date) {
    var datePrice = 0
    var theForm = document.forms["form"];
    var purchasedate = theForm.elements["purchasedate"];
    var date = new Date(purchasedate.value);
if (Object.prototype.toString.call(date) !== '[object Date]') {
        date = new Date();
    }
var today = new Date();
    var diffMilli = today - date;
    var diffDays = diffMilli * 1000 * 60 * 60 * 24;

    if (diffDays > 30) {
        datePrice= 20;
    }
    return datePrice;
}

function calculateTotal()
{
    var titleFees =  getDatePrice(date);
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;

}

Roko C. Buljan · Accepted Answer · 2014-10-09T19:04:45.703

1

function getDatePrice() { // Don't pass any arguments ..*
  var theForm = document.forms.form;                // Use rather dot notation
  var purchasedate = theForm.elements.purchasedate; // Use rather dot notation
  var date = new Date(purchasedate.value); // *.. cause you'll get here the value
  if (Object.prototype.toString.call(date) !== '[object Date]') {
    date = new Date();
  }
  var today = new Date();
  var diffMilli = today - date;
  // So today - date = Some time in milliseconds...
  // if you multiply that value you'll get an astronomic number so, to get days..
  var diffDays = Math.floor(diffMilli / 1000 / 60 / 60 / 24); // ..Divide!

  var datePrice = 0;
  if (diffDays > 30) {
    datePrice = 20;
  }
  return datePrice;
}

function calculateTotal(){
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Estimated Transfer Fees $"+ getDatePrice();
}

Live demo

and for the Input event use the oninput="calculateTotal();"

edited Oct 09 '14 at 19:04

answered Oct 09 '14 at 18:19

Roko C. Buljan

196,159
39
305
313

@VitorinoFernandes exactly, but oninput is good to immediately see the change. It's more UX-friendly – Roko C. Buljan Oct 09 '14 at 18:39
it actually is working the issue I was having turned out to be the format of the date. The calendar was formatting mm/dd/yyyy and I was typing mm/dd/yy so I have to force the textbox to only accept the format like the calendar – Oct 09 '14 at 19:08
1

great! Thought was something like that! – Roko C. Buljan Oct 09 '14 at 19:09
is the JavaScript pre-emptying the format? I would of thought adding a mask to the input would have fixed it? Does there need to be JavaScript written that demands a certain format? – Oct 09 '14 at 19:58
@ZaneZ excuse me I don't understand. Fixed what? You mean the date format, to prevent the user to enter other than mm/dd/yyyy ? (Is that the date format you need after all? or it's dd/mm/yyyy) – Roko C. Buljan Oct 09 '14 at 20:08
The format for the textbox it allows the user to enter any date desired... but I need it to match the exact format as the calendar button mm/dd/yyyy. I thought I could just add a mask to the input button to show the format but it does not seem to work.. someone asked me if the JavaScript function was removing the mask – Oct 09 '14 at 20:10
Sorry for my grammar I should have paid attention more in school lol – Oct 09 '14 at 20:11
2

I'm not sure if there's some tools already built for that in Coldfusion I'm not an expert in that field, but I can give some suggestions for a native JS. And btw no, there's no mask. just a simple input value currently. (as you can see.) – Roko C. Buljan Oct 09 '14 at 20:12
1

yes that would be great! maybe we can just add something in the script we already have http://stackoverflow.com/questions/26286518/coldfusion-date-field-mask – Oct 10 '14 at 12:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62830/discussion-between-zane-z-and-roko-c-buljan). – Oct 10 '14 at 14:13

oninput JavaScript Date Function Calculator

1 Answers1