Jump to content

Submission Form - Display hidden fields and prepopulate fields in tables


Recommended Posts

I have a submission form which uses javascript to show certain fields (hidden in tables with display set to "none") and prepopulating those fields with content depending on the value of a selection made in a drop down list. This code has been working fine and still works in "Preview" mode within the Caspio dashboard. However, when I had to update the deploy code in our website to get the submission form to display, the javascript is no longer functioning on the live webpage. In the submission form I am using HTML blocks and code in the Footer.

Here is an example of the HTML block code:

<table id="Sec_aq" style="display:none;"><td>
<p><font face="arial"><b>Air Quality:</b></font></p>

The next HTML block contains the closing tag for the above table and repeats the above for several more tables that are hidden when the page loads.

Here is the footer javascript:

<script>

function link()
{
if (document.getElementById('InsertRecordpntype').value == 'aq')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/aq/publicnotices/';
document.getElementById('InsertRecordaq_dp').value = 'https://denr.sd.gov/des/aq/publicnotices/';
document.getElementById('InsertRecordaq_ar').value = 'https://denr.sd.gov/des/aq/publicnotices/';
document.getElementById('Sec_aq').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'gp')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/';
document.getElementById('InsertRecorddgp').value = 'https://denr.sd.gov/des/';
document.getElementById('InsertRecorddgp_sob').value = 'https://denr.sd.gov/des/';
document.getElementById('Sec_dgp').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'fp_cafo_npdes')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/fp/publicnotices/';
document.getElementById('InsertRecordfp_rec').value = 'https://denr.sd.gov/des/fp/publicnotices/';
document.getElementById('Sec_fp_rec').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'fp_cafo_individual')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/fp/publicnotices/';
document.getElementById('InsertRecordfp_dp').value = 'https://denr.sd.gov/des/fp/publicnotices/';
document.getElementById('InsertRecordfp_sob').value = 'https://denr.sd.gov/des/fp/publicnotices/';
document.getElementById('Sec_fp_ind').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'gw_brn')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/gw/Brownfields/';
document.getElementById('InsertRecordgw_brnplan').value = 'https://denr.sd.gov/des/gw/Brownfields/';
document.getElementById('Sec_gw_brnplan').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'gw_dplan')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/gw/Public_Notices/';
document.getElementById('InsertRecordgw_dapp').value = 'https://denr.sd.gov/des/gw/Public_Notices/';
document.getElementById('InsertRecordgw_drep').value = 'https://denr.sd.gov/des/gw/Public_Notices/';
document.getElementById('InsertRecordgw_dcon').value = 'https://denr.sd.gov/des/gw/Public_Notices/';
document.getElementById('Sec_gw_dplan').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'sw_ir')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/sw/publicnotices/';
document.getElementById('InsertRecordsw_dir').value = 'https://denr.sd.gov/des/sw/publicnotices/';
document.getElementById('InsertRecordsw_dvir').value = 'https://denr.sd.gov/dfta/wp/tmdl/';
document.getElementById('Sec_sw_dir').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'mm_app')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/mm/documents/';
document.getElementById('InsertRecordmm_app').value = 'https://denr.sd.gov/des/mm/';
document.getElementById('Sec_mm_app').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'sw_npdes')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/sw/PublicNotices/';
document.getElementById('InsertRecordsw_dp').value = 'https://denr.sd.gov/des/sw/PublicNotices/';
document.getElementById('InsertRecordsw_sob').value = 'https://denr.sd.gov/des/sw/PublicNotices/';
document.getElementById('Sec_sw').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'og')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/og/documents/';
document.getElementById('InsertRecordog_app').value = 'https://denr.sd.gov/des/og/documents/';
document.getElementById('Sec_og_app').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'wra')
{
document.getElementById('InsertRecordpnotice').value = 'http://denr.sd.gov/dfta/wwf/publicnotices/';
document.getElementById('InsertRecordwra_plan').value = 'https://denr.sd.gov/dfta/wwf/dwsrf/';
document.getElementById('Sec_wra_plan').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'wm')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/wm/publicnotice/';
document.getElementById('InsertRecordwm_dp').value = 'https://denr.sd.gov/des/wm/draftpermit/';
document.getElementById('Sec_wm_dp').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'wp')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/dfta/wp/tmdl/pn/';
document.getElementById('InsertRecordwp_as').value = 'https://denr.sd.gov/dfta/wp/tmdl/pn/';
document.getElementById('Sec_wp_as').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'rules')
{
document.getElementById('Sec_rules').style.display='inline';
}
else if (document.getElementById('InsertRecordpntype').value == 'aq_nplan')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/aq/aqnews/';
}
else if (document.getElementById('InsertRecordpntype').value == 'aq_iplan')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/aq/aqnews/';
}
else if (document.getElementById('InsertRecordpntype').value == 'aq_excp')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/aq/publicnotices/';
}
else if (document.getElementById('InsertRecordpntype').value == 'fp_cafo')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/fp/publicnotices/';
}
else if (document.getElementById('InsertRecordpntype').value == 'sw_er')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/sw/publicnotices/';
}
else if (document.getElementById('InsertRecordpntype').value == 'dw')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/dw/pdf/';
}
else if (document.getElementById('InsertRecordpntype').value == 'mm')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/mm/documents/';
}
else if (document.getElementById('InsertRecordpntype').value == 'mm_ex')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/mm/documents/';
}
else if (document.getElementById('InsertRecordpntype').value == 'wmb')
{
document.getElementById('InsertRecordpnotice').value = 'https://denr.sd.gov/des/';
}
else
{
document.getElementById('InsertRecordpnotice').value = '';
document.getElementById('InsertRecordaq_dp').value = '';
document.getElementById('InsertRecordaq_ar').value = '';
document.getElementById('InsertRecordgw_brnplan').value = '';
document.getElementById('InsertRecordgw_dapp').value = '';
document.getElementById('InsertRecordgw_drep').value = '';
document.getElementById('InsertRecordgw_dcon').value = '';
document.getElementById('InsertRecordsw_dir').value = '';
document.getElementById('InsertRecordsw_dvir').value = '';
document.getElementById('InsertRecordmm_app').value = '';
document.getElementById('InsertRecordsw_dp').value = '';
document.getElementById('InsertRecordsw_sob').value = '';
document.getElementById('InsertRecordog_app').value = '';
document.getElementById('InsertRecordwra_plan').value = '';
document.getElementById('InsertRecordwm_dp').value = '';
document.getElementById('InsertRecordwp_as').value = '';
document.getElementById('Sec_aq').style.display='none';
document.getElementById('Sec_dgp').style.display='none';
document.getElementById('Sec_gw_brnplan').style.display='none';
document.getElementById('Sec_gw_dplan').style.display='none';
document.getElementById('Sec_sw_dir').style.display='none';
document.getElementById('Sec_mm_app').style.display='none';
document.getElementById('Sec_sw').style.display='none';
document.getElementById('Sec_og_app').style.display='none';
document.getElementById('Sec_wra_plan').style.display='none';
document.getElementById('Sec_wm_dp').style.display='none';
document.getElementById('Sec_wp_as').style.display='none';
document.getElementById('Sec_rules').style.display='none';
}
}
document.getElementById('InsertRecordpntype').onchange= link;

</script>

I am assuming since I updated the embed code, that action is connected as to why the above code no longer functions.  However, I am clueless enough when it comes to javascript, that there may be something else going on.  All I know for certain in preview mode within Caspio, it works fine.

Thank you for any ideas as to how to rememdy this issue.

Ron

 

Link to comment
Share on other sites

I did as you suggested and here is the error statement:

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLSelectElement.displ (<anonymous>:10:36)

and the error displayed in the debugger is as follows:

function displ()
{
if (document.getElementById('InsertRecordpntype').value == 'aq')  
{
document.getElementById('Section1').style.display='inline';
}
else
{
document.getElementById('Section1').style.display='none';
}
}
document.getElementById('InsertRecordpntype').onchange= displ;
 

The text I highlighted in blue above is highlighted in the debugger console.  The CMS software I use is Dreamweaver.   It sounds like I need to "unNull" a property but knowing how is another matter:)

There is also the following alert (I guess you would call it that) about cookies but it sounds like that may an issue at some point in the future:

A cookie associated with a cross-site resource at http://www.caspio.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`

 

Link to comment
Share on other sites

I believe the problem is that it cannot find any element with the ID of 'Section1', not that you have to 'unnull' anything.

Are you using the correct ID from outside of preview mode? Not sure if it would change, but it could be the answer. 

One thing with Caspio elements, is that if you use any 'Special' elements, it appends a random string to the ID that changes with every load. I believe this is with cascading, autocomplete, calculated values, and whatnot. Once again, not sure if you are using any of these, but this could also be the answer.

Did you create the Section1 element in an html block or something? Or are you trying to capture the Sections from the DataPage Wizard?

Link to comment
Share on other sites

I am stumped.  In my javascript code which is shown in the original post.  I make no reference to "Section1" concerning ".style.display ="  The only reference to Section1 I can find is in the caspio datapage itself where you have Header, Section1, your fields, HTML Blocks, Footer.  If that is where the reference to Section1 is coming from, then I don't know how to work around it because you cannot delete Section1 from the Datapage.  To really put my javascript ignorance on display,  I didn't create a function called "function displ()" but it is throwing that function in the error statement in the Chrome console.

My work around is to just display all the fields when the webpage loads rather than just the pertinent fields based on the users selection in a dropdown box.  However, it will add clutter by showing a bunch of unnecessary fields.

Ideas?

Link to comment
Share on other sites

Hi @SDDENR,

Perhaps you have the JS which throws an error on the hosting page since you have mentioned that issue can be replicated only on embed page. 

Try to embed the Datapage on different web-page in your CMS to check if the issues still persist.

It would help if you could send us a URL of the web-page in question.

Regards,

Vitalikssssss

 

Link to comment
Share on other sites

  • 2 weeks later...

I just got back to this and started looking everything over - particularly where this "function displ()" was coming from.  In my footer on the datapage I had long ago commented out some old javascript code which was either used for testing or something.  After needing to re-embed the datapage due to the old embed code no longer functioning, this commented out javascript is what started to cause the issue.  I removed this javascript and everything works fine now.   

Thank you for pointing me in the right direction by asking me to check the code for errors in the Chrome debugger - that is what found the culprit:)

Ron

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