move submit button inline

[Mylene]

Hi everyone,

I need to hide a standard button on my submission form and insert "Submit" button inline with the last field. 

How can I do that?

Thanks!

[Mathilda]

Hi Mylene,

Add header/footer, open the header, disable html editor and add the following code in the header of the datapage to hide the default submit button:

 <style> #Submit{ display: none; } </style> 

Add an HTML block below all the fields and Disable the HTML editor and on the Standard tab and add the code below:

 <div style="text-align: center; position: relative;"> <input type="submit" onmouseout="cbButtonHover(this,'cbSubmitButton');" onmouseover="cbButtonHover(this,'cbSubmitButton_hover');" class="cbSubmitButton" value="Submit" id="Submit1" name="Submit"> </div>

And the last thing, open the advanced tab of the last field on the form and check the "Continue the next element on the same line" checkbox.

Hope it helps

[MayMusic]

Since you are creating your custom button you need to copy the style and assign it to your button. Otherwise it will not pick up the Caspio style anymore

[Fibonacciphil]

Will this affect ALL the the Submit buttons? I really only wanted to change one layout.

[MayMusic]

Since you are only applying the code to one DataPage only that DataPage will have the button on the same like. 

[Corpcat]

Can I use this method to put the login button inline with the password field on an Authentication HTML Datapage?

[Alison]

Hi @Corpcat,

Yes, you can.
You should put the following code for your custom button to the HTML element in the Authentication :

<input type="submit" name="xip_datasrc_Customer" id="xip_datasrc_Customer" value="Login" class="cbLoginButton">

And hide the original button using the following code in the footer in the Authentication:

<script>
let btn = document.getElementsByClassName("cbLoginButton")[1];
btn.style.display="none";
</script>

To put the button inline with the previous field, you should check "  Continue next element on the same line" for the Password field. Please refer to this screenshot:
https://prnt.sc/mah2rh

[Corpcat]

Thank you Alison

[Elderberg]

On 11/28/2016 at 10:56 AM, Mathilda said:

Hi Mylene,

Add header/footer, open the header, disable html editor and add the following code in the header of the datapage to hide the default submit button:

 <style> #Submit{ display: none; } </style> 

Add an HTML block below all the fields and Disable the HTML editor and on the Standard tab and add the code below:

 <div style="text-align: center; position: relative;"> <input type="submit" onmouseout="cbButtonHover(this,'cbSubmitButton');" onmouseover="cbButtonHover(this,'cbSubmitButton_hover');" class="cbSubmitButton" value="Submit" id="Submit1" name="Submit"> </div>

And the last thing, open the advanced tab of the last field on the form and check the "Continue the next element on the same line" checkbox.

Hope it helps

 

Can you advise what to put in the header of a Report Datapage to hide the search button?

The first part of your code didn't work when i applied it to the Report Datapage, wishful thinking, but the 2nd part that goes into the HTML block worked great!

 

 

[DefinitelyNot31337]

2 hours ago, Elderberg said:

 

Can you advise what to put in the header of a Report Datapage to hide the search button?

The first part of your code didn't work when i applied it to the Report Datapage, wishful thinking, but the 2nd part that goes into the HTML block worked great!

 

 

 

Try this one.

<style>
  [class*=cbSearchButtonContainer] {
  	display: none;
  }
  
</style>

 

[Elderberg]

Thank you kindly.  Worked brilliantly!

[PotatoMato]

Just to update this post. Caspio has already created a How-to article for this. You may check this link: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/display-the-submit-or-search-button-inline/.

 

-Potato