ProgressButton + Spinner control on a Submit button

[Ben Smith]

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]

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. 

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/144056/ze/sample-1974827888 

  

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