Jump to content
  • 0
vanderLeest

Change a header of a Submission DataPage based on a value on the page

Question

I want to change a header of  submission datapage based on a comparison between two virtual fields on the page. The virtual fields are fixed values for the record drawn from an underlying query, using dropdown values.

If Virtual 2 <> Virtual 3 a section with a  submission field for the Financial Statement Report is hidden (via Rule 1) , and if Virtual 2 = Virtual 3 the same field is set to be required (via Rule 2).

I did not create the header, but it looks currently like this:

<div class="container mt-3 mb-3">
    <div class="row">
        <div class="col mb-3" style="display:inherit !important;">

<h4>Add your Invoice and a Financial Statement Report</h4>
            
            <a href="https://c4ffn695.caspio.com/folderlogout" class="ml-auto btn btn-secondary">Logout</a>
        </div>
    </div>

    <div class="row">
        <div class="col">


If Virtual 2 <> Virtual 3, I want to header to read 'Add your Invoice'  and if not 'Add your Invoice and the Financial Statement Report'

I tried (to no avail) - with different header values - the following script in the Footer

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
       if ("[@cbParamVirtual2]" == "[@cbParamVirtual3]" ) {
document.querySelector("h4").innerHTML="Some title";   }
else {
DataPage, you may try document.querySelector("h4").innerHTML="Other title";   }
});
</script>
 

But I am no JS expert

Any help sincerely appreciated

Floris

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Hello @vanderLeest,

Please try this code:

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
  
  let title = document.querySelector('#cbParamVirtual2').value;
  let title1 = document.querySelector('#cbParamVirtual3').value;

         if (title == title1) {
          document.querySelector('h4').innerHTML="Add your Invoice";
     }
         else {
          document.querySelector('h4').innerHTML="Add your Invoice and the Financial Statement Report";
     }
  });
  
</script>

The code should work properly if:

1) you have only one <h4> tag on the DataPage

2)  Virtual2 and Virtual3 values are present on the DataPage once it is loaded.

 Feel free to write back in case you have additional questions.

Share this post


Link to post
Share on other sites
  • 0

Thanks  CoopperBackpack your solution worked (almost perfectly).

I put your JavaScript in the header of the DataPage, and changed the option around,

as title == title1, the innerHTML of the H4 header should read "Add your Invoice and Financial Statement Report".

Floris

Share this post


Link to post
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
Answer this question...

×   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...