techguy Posted December 19, 2018 Report Share Posted December 19, 2018 I have two datapages on one web page. I want BOTH datapages to submit with ONE button.. can this be done?? Quote Link to comment Share on other sites More sharing options...
0 Andrii Posted December 20, 2018 Report Share Posted December 20, 2018 Hello! You can make it using additional JS code. First of all, you need to hide the buttons of submission forms. To make if you need to insert this code in the footer of the very end datapage that you deploy in your web page: <script type="text/javascript"> document.addEventListener('DataPageReady', function () { document.querySelectorAll('td[class^="cbSubmitButtonContainer"').forEach(function(i) { i.style.display = "none"; }); }); </script> After that, you need to add some code to your own datapage. You need to add the button that you will use to click two buttons of the submission forms. Here is the code: <button id="submitAll">Submit</button> <script> document.getElementById('submitAll').addEventListener('click', function() { var arr = Array.from(document.querySelectorAll('td[class^="cbSubmitButton"]>input')) arr.forEach(function(elem){ console.log(elem); elem.click(); }); }); </script> Quote Link to comment Share on other sites More sharing options...
0 techguy Posted December 26, 2018 Author Report Share Posted December 26, 2018 Hi Andrii, A few questions, 1. what is the best way to hide the submit buttons of the two datapages? 2. If I have two datapages on on webpage. Are you saying add the two scripts above to the last datapage? Thank you so much for your help!!! Happy Holidays! Quote Link to comment Share on other sites More sharing options...
0 cheonsa Posted February 5, 2019 Report Share Posted February 5, 2019 Hi @techguy, You can also hide the Sumit button under the Style tab on your Caspio Bride. I recommend that you duplicate the current style you are using and apply it to both DataPages. In that way, you will not mess with the other pages. To do that, click on the Source tab and choose All. Look for .cbSubmitButtonContainer and add "display:none;" Hope this helps. -kristina Quote Link to comment Share on other sites More sharing options...
0 Accountability Posted June 6, 2020 Report Share Posted June 6, 2020 I Have the exact same need only I have three separate datapages using three different tables all on the same web page. Do I just hide all three "Submit" buttons from the styles CCS and then add the following to the footer of the last datapage on the page : <script type="text/javascript"> document.addEventListener('DataPageReady', function () { document.querySelectorAll('td[class^="cbSubmitButtonContainer"').forEach(function(i) { i.style.display = "none"; }); }); </script> And can I add the following to anyone of the three datapages or does it have to be on the last datapage? <button id="submitAll">Submit</button> <script> document.getElementById('submitAll').addEventListener('click', function() { var arr = Array.from(document.querySelectorAll('td[class^="cbSubmitButton"]>input')) arr.forEach(function(elem){ console.log(elem); elem.click(); }); }); </script> One last thing, if any one of the datapages has a required field not populated, will it work as if I only had one datapage with one submission? In other words, will it reject the submission of all three and highlight the required field not highlighted. Thanks for your help. Quote Link to comment Share on other sites More sharing options...
0 cheonsa Posted July 27, 2020 Report Share Posted July 27, 2020 I tried the solution provided above and based on what I observe, it is not working if the responsive option is enabled. I need to uncheck it for this to work. @techguy, you need to insert both script at the Footer of the last DataPage deployed in your web page. @Accountability, if there are required fields in one of the DataPages and you did not insert a value to it, this DataPage will not be submitted. Values from other DataPages will be inserted in the Table. Quote Link to comment Share on other sites More sharing options...
0 BaySunshine Posted March 25, 2022 Report Share Posted March 25, 2022 Hi everyone, The code provided by @Andrii needs some changes as the names of the HTML elements have changed now. Add the following code in the footer of Update form DataPage: <script type="text/javascript"> document.addEventListener('DataPageReady', function () { document.querySelectorAll('div[class^="cbBackButtonContainer"]').forEach(function(i) { i.style.display = "none"; }); }); </script> Build a new HTML DataPage and then add the following code: <button id="submitAll">Submit</button> <script> document.getElementById('submitAll').addEventListener('click', function() { var arr = Array.from(document.querySelectorAll('div[class^="cbBackButton"]>input')) arr.forEach(function(elem){ console.log(elem); elem.click(); }); }); </script> Deploy this DataPage and add the embed code in the bottom of all other DataPages. You may want to add some CSS to the new Submit button to make it more visible. This functionality will work on both Submission and Update forms. Hope this helps. ReeganAnne 1 Quote Link to comment Share on other sites More sharing options...
0 PotatoMato Posted August 31, 2022 Report Share Posted August 31, 2022 Hi! Just to add, you may also check this howto article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/submit-multiple-datapages-using-one-button/ -Potato Quote Link to comment Share on other sites More sharing options...
Question
techguy
I have two datapages on one web page. I want BOTH datapages to submit with ONE button.. can this be done??
Link to comment
Share on other sites
7 answers to this question
Recommended Posts
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.