Jump to content
  • 0

submit two datapages with one button


techguy

Question

7 answers to this question

Recommended Posts

  • 0

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>


 

Link to comment
Share on other sites

  • 0

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;"

image.thumb.png.fba128380e0226b7070a0dede94f5895.png

 

Hope this helps.

 

-kristina

 

 

 

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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. 

 

 

Link to comment
Share on other sites

  • 0

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.

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