submit two datapages with one button

[techguy]

I have two datapages on one web page. I want BOTH datapages to submit with ONE button.. can this be done?? 

[Andrii]

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>

 

[techguy]

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!

[cheonsa]

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

 

 

 

[Accountability]

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.

[cheonsa]

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. 

 

 

[BaySunshine]

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.

[PotatoMato]

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