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. Image for the cookie policy date

ProgressButton + Spinner control on a Submit button

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

1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team April 17, 2019 09:26 AM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon