We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ProgressButton + Spinner control on a Submit button

Thread ID:

Created:

Updated:

Platform:

Replies:

144058 Apr 16,2019 10:40 AM UTC Apr 17,2019 05:26 PM UTC ASP.NET MVC - EJ 2 1
loading
Tags: ProgressButton
Ben Smith
Asked On April 16, 2019 10:40 AM UTC

Hi there.

I have a progress button linked to the Submit button at the end of a register form. When the submit button is clicked, I have it so the spinner appears and the progress bar starts to fill across the button.

However, I'm trying to make it so the spinner & progress bar will only work once the form has successfully passed its validation.
I can't quite figure out how to achieve this.

Any help/links in the right direction would be appreciated

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On April 17, 2019 05:26 PM UTC

Hi Ben, 
  
Thank you for using Syncfusion products. 
  
We have checked your reported requirement “The progress button spins only when the form validation is successfully completed” and it is achievable by using “stop” method in ProgressButton as like as in the below code example. 
  
@Html.EJS().ProgressButton("progress-btn").Content("SUBMIT").EnableProgress(true).Render() 
  
<script> 
document.getElementById('progress-btn').onclick = function () { 
    var name = document.forms["myForm"]["fname"].value; 
    var password = document.forms["myForm"]["fpassword"].value; 
    var progressBtn = ej.base.getComponent(document.querySelector("#progress-btn"), "progress-btn"); 
    if (name == "") { 
        progressBtn.cssClass = 'e-hide-spinner'; 
        progressBtn.dataBind(); 
        progressBtn.stop(); 
    } else if (password == "") { 
        progressBtn.cssClass = 'e-hide-spinner'; 
        progressBtn.dataBind(); 
        progressBtn.stop(); 
    } 
} 
</script> 
  
For your convenience, we have prepared the sample based on your requirement. Please find the link below. 
  
  
Could you please check the above sample and get back to us whether it fulfills your requirement or need further assistance on this? 
  
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon