Disable Submit Button While Sending Form

Have a read through this: Preventing multiple submissions — why this is a terrible idea.

Hi @takayukister

You right but I need disable this button. Because I send random link to for one user. When users click submit button again, they can get many random links.

I want when submit is clicked and spinner is working, button must be disable. When progress is finish it will be enable again.

How I can do this with CF7?

Thank you.

I found the solution

If someone need:

<script type=”text/javascript”>
$ (document). ready (function() {
var myinter2 = setInterval(function(){
var el = $(document.getElementsByClassName(“fusion-slider-loading”));
if ($(el).css(“display”) !== ‘none’)
{
$(“.wpcf7-submit”).prop(“disabled”,true);
}
else{
$(“.wpcf7-submit”).prop(“disabled”,false);
}

},100);
});
</script>

Hi, where I have to put this code?

Hi @bredaportoni

You can add this code under the shortcode of CF7 on your webpage.

My theme is Avada so I use this code :

var el = $(document.getElementsByClassName(“fusion-slider-loading”));

but you can check your loader at console. It can be this too :

var el = $(document.getElementsByClassName(“ajax-loader”));

Good luck!

Hi there,
Mine website using the “prop(“disabled”,false)” cause the form not able to be submit data, it just stop right there and do nothing. even if i add a setTimeOut to prevent this issue.
And I solve this issue by add a fake button switch showing in between the real one.
And I and my own control logic

<script language="javascript">
	var realBtn=document.getElementsByClassName('wpcf7-submit').item(0),
		fT=0,
		flagF=false,
		fS="";
document.getElementById('qt').style.display="";
document.getElementById('fakeBtn').style.display="none";
realBtn.setAttribute("onclick","subchecking();");
function subchecking(){document.getElementById('qt').style.display="none";
					   document.getElementById('fakeBtn').style.display="";
					   if(fT<5 && !flagF){window.setTimeout(cS,500);}}
function cS(){fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status;
			  if(fS == 'sent' || fS == 'resetting'){
				  document.getElementsByClassName('mainform').item(0).classList.add('hidden');
document.getElementsByClassName('sentform').item(0).classList.remove('hidden');
alert('Great success');
				  flagF=true;
			  }else if(fS == 'submitting'){
				  window.setInterval(rcs,100);
			  }else if( fS == 'invalid' || fS== 'init'){
				  if(fS=='invalid'){
					  fT++;
					  document.getElementById('fakeBtn').style.display="none";
					  document.getElementById('qt').style.display="";
			  }else{
				  document.getElementById('fakeBtn').style.display="none";
				  document.getElementById('qt').style.display="";}
			  }else{
				  alert('Try later');
				  document.getElementById('fakeBtn').getElementsByTagName('p').item(0).innerHTML="You sent too many times"}}
function rcs(){
	fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status;
	if(fS==""){fS = document.getElementsByClassName('wpcf7-form').item(0).dataset.status
			  }else if(fS=='submitting'){fS=""}else{clearInterval(rcs);cS();}}
</script>

First step: Make your own fake button in first and give it id=”fakeBtn”.
Second: check there only one submit button and only only one CF7 form.
The javascript doing the reset:
1.Add the onclick property to the real submit button.
2.Set fake Button disapear (you should do this in advance in case u forget)
3.If the user click the “real submit” trigger event=>
hide real button and show the fake button
=>wait 500ms and check the submit status is submittng? invalid data? or just sent success?
if it is subbmiting or checking =>wait every 100ms to check again
(I feel this speed is cool not overly wait or short)=> status changed stop “rechecking”
if it is invalid give the real button to user and hide the other one.
if it is success alert “great success” (you can change it into active something else)
if click the real button over 5 times (change at “if(fT<5 && !flagF)”)
Only show the fake button and change the fake button html text as”You sent too many times”

Plugin Author is right. Make sure your form is total correct in setting. Then think about hiding button things