another question about Passing Data From A Virtual Field To A Non-Virtual Field

[vidierre]

I have a table with 3 fields:
ID (Autonumber and unique), FieldAA (Text 255)  and FieldBB (Text 255).
My web form to update records shows Virtual1 getting its value as External Parameter  [@Param1], then FieldAA as Text Field, FieldBB and ID as Display Only.  I wish to set FieldAA with the value of Virtual1 when submit pressed.

So looking into this post https://forums.caspio.com/topic/4983-passing-data-from-a-virtual-field-to-a-non-virtual-field/  I added at bottom an html block,  disabled HTML editor and   added this code

<SCRIPT LANGUAGE="JavaScript">
function concatenate()
{
var x = document.getElementsByName('cbParamVirtual1').value;
document.getElementById('EditRecordFieldAA').value = x;
}

document.getElementById('caspioform').onsubmit=concatenate;
</script>

Using the web form I get correctly both values of FieldAA and FieldBB and Virtual1 shows the parameter value I passed, but when I click submit FieldAA or edited records remains unchanged. 

Where I am lost? Inspecting page all seems correct but my feeling is that my concatenate function is never triggered. I tryed also to add a console.log("I was here...") just before the end of the function and nothing appear on console.  I am doing my first app and I am shure that my newbie status make me blind to something, do you have any hints?

[CoopperBackpack]

Hello @innov2e,

This should work with document.getElementsByName.

Please note that it returns not a single value, but the NodeList Collection of elements, so to get the value you need to use [0] index:

document.getElementsByName('cbParamVirtual1')[0].value

So, you may try this code: 

<script>
document.addEventListener('BeforeFormSubmit', function(event) {
	let virtualField = document.getElementsByName('cbParamVirtual1');
	document.querySelector('#EditRecordFieldAA').value = virtualField[0].value;
});
</script>

 

[CoopperBackpack]

Hello @innov2e,

Please try to use this code in the Footer section of the DataPage.

Do not forget to disable the HTML editor before pasting the code.

<script>
document.addEventListener('BeforeFormSubmit', function(event) {
	let virtualField = document.querySelector("#cbParamVirtual1");
	document.querySelector('#EditRecordFieldAA').value = virtualField.value;
});
</script>

Please update this thread in case you have further questions. 

[vidierre]

I tested it and all works as expected.

Thank a lot.

[vidierre]

sorry, once more: do you know if I can use it also in details forms from reports Datapages?

[CoopperBackpack]

Hello again @innov2e,

This should work for the Details page as well, and you may refer to the editable fields as "EditRecordFIELDNAME" (more details can be found in this post https://forums.caspio.com/topic/4377-js-guide-caspio-form-elements/)

Single Record Update form and Details page display 1 record per time and you may set the fields as editable on both of them.  

If you pass some value as a parameter, I believe you need to create separate Results and Details https://howto.caspio.com/tech-tips-and-articles/tech-parameters/results-and-details-on-two-separate-web-pages/

You may provide with more details about the Details page if needed, so I can test it from my side. 

 

 

[vidierre]

Hi  @CoopperBackpack

the second data page is a tabular report with all three fields both in search, results and details definitions. From my tests in not necessary to have separate Results and Details datapages, because the Virtual1 Field defined into the details page and requiring parameter work as expected: when I preview the report page parameter is asked and is passed to every record i select where it is used.

Now I wish to avoid users to change this value  making the Virtual1 Field Display only, but:

- If I set Virtual1 as Text it results as 

<input type="text" maxlength="64000" name="cbParamVirtual1" id="cbParamVirtual1" value="Valery" class="cbFormTextField" size="25">

 with the id parameter. I suppose it allow to be addressed by the querySelector

-  If I set Virtual1 as Display Only it results as

<input type="hidden" name="cbParamVirtual1" value="Valery">

without the id parameter and I have no idea how to get it. I tried from console  with getElementsByName but with no results.

 

[Tubby]

On 5/26/2021 at 7:17 AM, vidierre said:

Hi  @CoopperBackpack

the second data page is a tabular report with all three fields both in search, results and details definitions. From my tests in not necessary to have separate Results and Details datapages, because the Virtual1 Field defined into the details page and requiring parameter work as expected: when I preview the report page parameter is asked and is passed to every record i select where it is used.

Now I wish to avoid users to change this value  making the Virtual1 Field Display only, but:

- If I set Virtual1 as Text it results as 

<input type="text" maxlength="64000" name="cbParamVirtual1" id="cbParamVirtual1" value="Valery" class="cbFormTextField" size="25">

 with the id parameter. I suppose it allow to be addressed by the querySelector

-  If I set Virtual1 as Display Only it results as

<input type="hidden" name="cbParamVirtual1" value="Valery">

without the id parameter and I have no idea how to get it. I tried from console  with getElementsByName but with no results.

 

If anyone is still looking for an answer for this, yes, querySelector should do the work. but instead of getting the value through the input tag, there is a span that is inside the field even if its hidden where we can use ID to get the value.

Somethinglike this:
let virtualf = document.querySelector('input[id*="cbParamVirtual1"]').value;

If you set the virtual field as calculated value, you'll need to add an EventListener to get the value.
document.querySelector('input[id*="cbParamVirtual1"]').addEventListener("change", myFunction);
function myFunction(){
let virtualf = document.querySelector('input[id*="cbParamVirtual1"]').value;

}
Then you can add the line where you insert to wherever you wish to pass the virtual field's value to.

This was quite a helpful finding for me. Hope that it is the same for some of you guys!