document.getElementById calculated value

[GIOVAN]

Hi,

I am trying to create  a submission form for my employees. They must only submit data between Start_Time and End_Time.
Do this I created a test form with the following js. The problem I have is that it works good when the fields Virtual1 and Virtual2 are Text Fields. When I changed Virtual1 and Virtual2 into Calculated Value it stop working.  Can anyone help me with this?

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {

var entered_value = document.getElementById("cbParamVirtual1").value;
var entered_date = new Date(entered_value);

var permitted_value = document.getElementById("cbParamVirtual2").value;
var permitted_date = new Date(permitted_value);

if(entered_date < permitted_date )
   {
      alert("Cannot be a date in the past");
      event.preventDefault();
 }
});
</script>

Thanks

[MayMusic]

When you change it to a calculated value you should call it by name

 

var entered_value = document.getElemenstByName("cbParamVirtual1")[0].value;

var permitted_value = document.getElementsByName("cbParamVirtual2")[0].value; 

 

[DefinitelyNot31337]

Hello @GIOVAN,

 

Say you have EntryDate as your entered date, and Virtual1 as the checker if the current datetime is greater than the entered date.

 

For Virtual1, once it is a Calculated Value, set the syntax to

CASE WHEN CAST('[@cbParamVirtual1]' as DATE) > [@EntryDate] THEN 'invalid'

ELSE 'valid'

END

 

Then for your javascript, paste the code snippet below in the footer (Make sure HTML Editor is disabled from the Advanced tab)

<script>
  
  document.addEventListener('BeforeFormSubmit', function(event) {
    var checker = document.querySelector('[id*=cbParamVirtual1]');
    
    if (checker.innerText == "invalid") {
    	event.preventDefault();
      	alert("Cannot set field to a previous date");
    }
    
  })
  
</script>

 

Hope this helps.

 

Cheers!

-DN31337

[GIOVAN]

Thanks I have tried this. Without success.
Start_Time and End_Time are calculated value.

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function(event) {

var StartTime_value = document.getElemenstByName("InsertRecordStart_Time")[0].value;
var StartTime_date = new Date(StartTime_value);

var EndTime_value = document.getElemenstByName("InsertRecordEnd_Time")[0].value;
var EndTime_date = new Date(EndTime_value);

if( StartTime_date < EndTime_date)
{
      alert("Cannot input date");
      event.preventDefault();
 }
});
</script>

[DefinitelyNot31337]

Hi @GIOVAN, I am updating my previous reply. It won't work yet.

[GIOVAN]

Thanks
I need a submission form that my employees will only be able to submit during their shift. I made a test submission form with the fields Start_Time and End_Time, these fields are Calculated Values. 
Example:
Start_Time -> 03/18/2019 07:00:00
End_Time -> 03/18/2019 15:00:00
I have made javascript that the user can only submit between Start_Time and End_Time. But have with the Calculated fields, if I change the Calculated Value in Text Field it works good.

<script type="text/javascript">
document.addEventListener('BeforeFormSubmit', function(event) {

var StartTime_value = document.getElementById(InsertRecordStart_Time]").value;
var StartTime_date = new Date(StartTime_value);
var d = '[@cbTimeStamp*]'

var EndTime_value = document.getElementById("[InsertRecordEnd_Time]").value;
var EndTime_date = new Date(EndTime_value);

if( d > StartTime_value || d < EndTime )
{
alert("Cannot input date now");
event.preventDefault();
}
});
</script>

[DefinitelyNot31337]

Hi once again @GIOVAN,

 

I would suggest to do the calculation in a Calculated Value as it is easier and more secure.

 

Just add another virtual field (Say Virtual31337), then paste>modify this syntax. You may set the hardcoded dates to DataFields or SELECT STATEMENTS as long as they have a DataType of Date/Time

CASE WHEN '[@cbTimestamp]' BETWEEN '03/18/2019 07:00:00' AND '03/18/2019 15:00:00'

THEN 'valid'
ELSE 'invalid'

END

 

Then for your javascript, paste the code snippet below in the Footer (Make sure HTML Editor is disabled from the Advanced tab)

<script>
  
  document.addEventListener('BeforeFormSubmit', function(event) {
    var checker = document.querySelector('[id*=cbParamVirtual1337]');
    
    if (checker.innerText == "invalid") {
    	event.preventDefault();
      	alert("Cannot input date now");
    }
    
  })
  
</script>

 

[GIOVAN]

Thanks, yes it works. This is much much easier. I have one more question.

We have 3 shift for the employees:
07:00 - 15:00
15:00 - 23:00
23:00 - 07:00
This is the calculated value I have used for StartTime.

CASE 
WHEN [@field:Shift_ID] = 1 THEN
Dateadd(hour,7,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103))
WHEN [@field:Shift_ID] = 2 THEN
Dateadd(hour,15,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103))
WHEN [@field:Shift_ID] = 3 THEN
Dateadd(hour,23,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103))
END

This for EndTime.

CASE 
WHEN [@field:Shift_ID] = 1 THEN
Dateadd(hour,15,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103))
WHEN [@field:Shift_ID] = 2 THEN
Dateadd(hour,23,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103))
WHEN [@field:Shift_ID] = 3 THEN
Dateadd(hour,7,Dateadd(day,1,CONVERT(DATETIME,CONVERT(DATE,GetUTCDate()-4, 103),103)))
END

Can I use this (GetUTCDate()-4), because our local time is UTC−04:00.

[DefinitelyNot31337]

I'd suggest to use Caspio Bridge Timestamp instead ( [@cbTimestamp] ). It will follow always follow the Timezone setting on your Caspio Bridge.

 

 

Sample usage would be:

CASE 
WHEN [@field:Shift_ID] = 1 
THEN DATETIME, DATEADD(hour, 5, '[@cbTimestamp*]')

WHEN [@field:Shift_ID] = 2
THEN DATETIME, DATEADD(hour, 15, '[@cbTimestamp*]')
END

 

Additional Info on Returned DataTypes

 

Hope this information helps.

 

Regards,

DN31337

[GIOVAN]

Thanks work great