Jump to content

document.getElementById calculated value


Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

image.thumb.png.3a6c726b4e9702ed21fe0d5f8b482ff4.png

 

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

image.png.b2e77159b803117084013d95bed643b8.png

 

Hope this information helps.

 

Regards,

DN31337

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...