Hello, we are trying to disable some inputs in a specific time . While we target the inputs using JS all we get afterwards is undefined . Here is the code as simple as possible
document.addEventListener("DOMContentLoaded", function() {function disableInputsDuringSchedule() { var now = new Date(); var startTime = new Date(); var endTime = new Date(); // TIME : 15:57 startTime.setHours(15, 57, 0, 0); // TIME : 15:58 endTime.setHours(15, 58, 0, 0); var infocontainer = document.getElementById('#" + FormContainer.Id + "'); var hiddenDiv = document.getElementById('#" + HiddenText.Id + "'); var input1 = document.getElementById('#" + Input_TextVar.Id + "'); var input2 = document.getElementById('#" + Input_TextVar.Id + "'); var input3 = document.getElementById('#" + Input_TextVar.Id + "'); var input4 = document.getElementById('#" + Input_TextVar.Id + "'); var input5 = document.getElementById('#" + Input_TextVar.Id + "'); var input6 = document.getElementById('#" + Input_TextVar.Id + "'); // console.log(" + input1 + input2 + input3 + input4 + input5 + input6"); if (now < startTime) { input1.disabled = false; input2.disabled = false; input3.disabled = false; input4.disabled = false; input5.disabled = false; input6.disabled = false; hiddenDiv.style.display = 'none'; // console.log('Input elements are enabled because it\'s before the start time.'); } else if (now >= startTime && now <= endTime) { input1.disabled = true; input2.disabled = true; input3.disabled = true; input4.disabled = true; input5.disabled = true; input6.disabled = true;
hiddenDiv.style.display = 'block'; // console.log('Input elements are disabled, and ContactInfoHidden is displayed because it\'s between the start and end time.'); } else { input1.disabled = false; input2.disabled = false; input3.disabled = false; input4.disabled = false; input5.disabled = false; input6.disabled = false; hiddenDiv.style.display = 'none'; // console.log('Input elements are enabled because it\'s after the end time.');
}
var timeRemaining = endTime - now;
if (timeRemaining > 0) {
setTimeout(function() {
location.reload();
}, timeRemaining);
console.log('Scheduled page refresh in ' + timeRemaining + ' milliseconds'); } } disableInputsDuringSchedule();});PS: We tried already :
document.getElementById('FormContainer');
Hi, Please take a look at the changes that I made and let me know if you don't understand something. Also make sure you edit the JS to set new start and end dates to test.
Just tested it on my side and works, as I think your expected behavior is to refresh page automatically after a certain start time and disabling inputs, and then when reaches end time refreshes page again to enable input again.
Also, this is just a sketch, many things to improve on, one I suggest is passing the date values from outside the JS instead of having them hardcoded within the code...
Cheers,
Paulo
Hi Meletis,
The document.getElementById expects an Id, and you have the Outsystems .Id property in a container for example, which will already return the Id of that div (aka container in OS) at runtime, so you don't need to put a '#' behind it when passing to the getElementById method.
What this means is that you should simply pass the FormContainer.Id as an input parameter to your javascript node, and inside you just call that method with the input parameter like this:
var infocontainer = document.getElementById($parameters.FormContainerId);
Try this for all your usages of getElementById
Let me know if that worked for you,
Ill try that and ill tell you what happens
something like this , right ? Cause it gives me an error :
Invalid JavaScript { Unknown 'FormContainer' parameter used in 'JavaScript1'. }Should i create Input Parameters inside the Client action? For every input and container ?
var infocontainer = document.getElementById($parameters.FormContainer);
var hiddenDiv = document.getElementById($parameters.HiddenText);
var input1 = document.getElementById($parameters.Input_TextVar.Id);
var input2 = document.getElementById($parameters.Input_TextVar2.Id);
var input3 = document.getElementById($parameters.Input_TextVar3.Id);
var input4 = document.getElementById($parameters.Input_TextVar4.Id);
var input5 = document.getElementById($parameters.Input_TextVar5.Id);
var input6 = document.getElementById($parameters.Input_TextVar6.Id);
even if i remove the .Id in each element i still get the same error messageThanks for your time Paulo !
Hi, I will show with images maybe it's clearer:1. You have a container in your page, give it a name:
2. Now, in your client action where you have JS node, you should add an inputParameter, where you pass the .Id of your container, and inside you can just use it by double clicking on your text input parameter that hold the Id:
Paulo , i tried but without any luck. Here is my .oml
Thanks in advance
Good Morning Paulo , im sorry that i took so long to answer to your reply ,alot happend in this short span of days. You are a transcendent magician ( you're the best ) . I downloaded and checked the .oml and it works like a charm ! Thanks again for all your effort ,
sincerely MeL
Hi Meletis Kozakidis,
May I know where you have used this JS? OnReady or any other action?
Onready
I've checked the module and have some fixes as below:
- For the JS code in the OnReady, we can define the function and call it direct;y, no need to call it inside the DOMContentLoaded event.
- For the HiddenText block, please set Visible as True so that it will appear in the DOM tree, and set the Style Classes as "hidden" to hide it, so that it can be select by the JS code. (If we set the VIsible as False, then the Dom element for this Block will not be generated inside the DOM tree, hence, can not be selected by "document.getElementById":
After fix these, I can see those console loag that you put in the JS code:
Hope this helped.