Submit form only once

[marcielo]

I'm having an issue with my Web to lead form. If a user clicks on the submit button several time then I get x number of leads by the same user
I would guess that this could be prevented by inserting a simple javascript into the code, but unfortunately I don't have such skills. Is there someone who has solved this issue?

I noticed that this only happens with internet explorer (in my case IE8) and not Firefox.

My form looks like this:

<p><link rel="stylesheet" type="text/css" media="all" href="?c=1" mce_href="?c=1"><mce:script type="text/javascript" language="Javascript" 
 mce_src="http://mysite.com/sugar/include/javascript/sugar_grp1.js?">
 </mce:script>
 <mce:script type="text/javascript" src="http://mysite.com/sugar/jscalendar/lang/calendar-en.js?" 
 mce_src="http://mysite.com/sugar/jscalendar/lang/calendar-en.js?c=1"></mce:script></p>
 
 <form action="http://sugar.energibolig.dk/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" method="POST" id="WebToLeadForm"><table class="mceItemTable" style="border-top: 1px solid; border-bottom: 1px solid; padding: 10px 6px 12px 10px; background-color: rgb(233, 243, 255); font-size: 12px; background-repeat: repeat-x; background-position: center top;" mce_style="border-top: 1px solid;
border-bottom: 1px solid;
padding: 10px 6px 12px 10px;
background-color: #e9f3ff;
font-size: 12px;
background-repeat: repeat-x;
background-position: center top;" width="100%"><tbody><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="4"><b><h2>test</h2></b></td></tr><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 2px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 2px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="4">&nbsp;</td></tr><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 12px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 12px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" align="left"><td colspan="4">tset</td></tr><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 8px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 8px; font-weight: normal; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="4">&nbsp;</td></tr><tr><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Last Name: </span><span class="required" style="color: rgb(255, 0, 0);" mce_style="color: #ff0000;">*</span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;" width="35%"><span sugar="slot"><input id="last_name" name="last_name" type="text"></span></td><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">&nbsp;</span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;" width="35%"><span sugar="slot">&nbsp;</span></td></tr><tr><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Email Address: </span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;" width="35%"><span sugar="slot"><input id="webtolead_email1" name="webtolead_email1" onchange="validateEmailAdd();" type="text"></span></td><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">&nbsp;</span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;" width="35%"><span sugar="slot">&nbsp;</span></td></tr><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="4">&nbsp;</td></tr><tr align="center"><td colspan="10"><input onclick="submit_form();" class="button" name="Submit" value="Submit" type="button"></td></tr><tr><td style="display: none;" mce_style="display: none"><input id="campaign_id" name="campaign_id" value="aed87ec0-3892-d9ec-b28b-4c3ede2108ea" type="hidden"></td></tr><tr><td style="display: none;" mce_style="display: none"><input id="assigned_user_id" name="assigned_user_id" value="1" type="hidden"></td></tr><tr><td style="display: none;" mce_style="display: none"><input id="req_id" name="req_id" value="last_name;" type="hidden"></td></tr></tbody></table></form>


<p>
<script type="text/javascript">
 function submit_form(){
 	if(typeof(validateCaptchaAndSubmit)!='undefined'){
 		validateCaptchaAndSubmit();
 	}else{
 		check_webtolead_fields();
 	}
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
	if(document.getElementById('webtolead_email1').value.length >0) {
		if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
	if(document.getElementById('webtolead_email2').value.length >0) {
		if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
}
</script></p>

I use SugarCRM 5.5.4 CE

[marcielo]

I tried with a script that disables the submit button after clicking on it. I know it works with a non-sugar form, but can someone see what is wrong or what I should do? Cause its not working with sugar form.

See the code below I highlighted the inserted script in green.

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Web Site:  http://dynamicdrive.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function disableForm(theform) {
if (document.all || document.getElementById) {
for (i = 0; i < theform.length; i++) {
var tempobj = theform.elements[i];
if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
tempobj.disabled = true;
}
setTimeout('alert("Your form has been submitted.  Notice how the submit and reset buttons were disabled upon submission.")', 2000);
return true;
}
else {
alert("The form has been submitted.  But, since you're not using IE 4+ or NS 6, the submit button was not disabled on form submission.");
return false;
   }
}
//  End -->
</script>
<script type="text/javascript" language="Javascript" 
 src="http://energibolig.dk/sugar/include/javascript/sugar_grp1.js?">
 </script>
 <script type="text/javascript" 
 src="http://energibolig.dk/sugar/jscalendar/lang/calendar-en.js?">  </script>
  <script type="text/javascript" 
  src="http://energibolig.dk/sugar/jscalendar/lang/calendar-en.js?c=1">
   </script>
</HEAD>
<body>

<p><link rel="stylesheet" type="text/css" media="all" href="?c=1" mce_href="?c=1">
 
 

 
<form action="http://sugar.energibolig.dk/index.php?entryPoint=WebToLeadCapture" name="WebToLeadForm" method="POST" id="WebToLeadForm"
 onSubmit="return disableForm(this);"><table class="mceItemTable" style="border-top: 1px solid; border-bottom: 1px solid; padding: 10px 6px 12px 10px; background-color: rgb(233, 243, 255); font-size: 12px; background-repeat: repeat-x; background-position: center top;" mce_style="border-top: 1px solid;
border-bottom: 1px solid;
padding: 10px 6px 12px 10px;
background-color: #e9f3ff;
font-size: 12px;
background-repeat: repeat-x;
background-position: center top;" width="100%"><tbody><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="2"><b><h2>test</h2></b></td></tr><tr><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Last Name: </span><span class="required" style="color: rgb(255, 0, 0);" mce_style="color: #ff0000;">*</span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;"><span sugar="slot"><input id="last_name" name="last_name" type="text">
</span></td></tr><tr><td style="text-align: left; font-size: 12px; font-weight: normal;" mce_style="text-align: left; font-size: 12px; font-weight: normal;" width="15%"><span sugar="slot">Email Address: </span></td><td style="font-size: 12px; font-weight: normal;" mce_style="font-size: 12px; font-weight: normal;"><span sugar="slot"><input id="webtolead_email1" name="webtolead_email1" onchange="validateEmailAdd();" type="text"></span><span sugar="slot">&nbsp;</span><span sugar="slot">&nbsp;</span></td></tr><tr style="color: rgb(0, 105, 225); font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" mce_style="color: #0069e1; font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 18px; font-weight: bold; margin-bottom: 0px; margin-top: 0px;" align="center"><td colspan="2">&nbsp;</td></tr><tr align="center"><td colspan="4">
<input onclick="submit_form();" class="button" name="Submit" value="Submit" type="button">
<input type=reset></td></tr><tr><td>
<input id="campaign_id" name="campaign_id" value="aed87ec0-3892-d9ec-b28b-4c3ede2108ea" type="hidden"></td></tr><tr><td>
<input id="assigned_user_id" name="assigned_user_id" value="1" type="hidden"></td></tr><tr><td>
<input id="req_id" name="req_id" value="last_name;" type="hidden"></td></tr></tbody></table>
</form>

<script type="text/javascript">
 function submit_form(){
 	if(typeof(validateCaptchaAndSubmit)!='undefined'){
 		validateCaptchaAndSubmit();
 	}else{
 		check_webtolead_fields();
 	}
 }
 function check_webtolead_fields(){
     if(document.getElementById('bool_id') != null){
        var reqs=document.getElementById('bool_id').value;
        bools = reqs.substring(0,reqs.lastIndexOf(';'));
        var bool_fields = new Array();
        var bool_fields = bools.split(';');
        nbr_fields = bool_fields.length;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(bool_fields[i]).value == 'on'){
             document.getElementById(bool_fields[i]).value = 1;
          }
          else{
             document.getElementById(bool_fields[i]).value = 0;
          }
        }
      }
    if(document.getElementById('req_id') != null){
        var reqs=document.getElementById('req_id').value;
        reqs = reqs.substring(0,reqs.lastIndexOf(';'));
        var req_fields = new Array();
        var req_fields = reqs.split(';');
        nbr_fields = req_fields.length;
        var req = true;
        for(var i=0;i<nbr_fields;i++){
          if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
           req = false;
           break;
          }
        }
        if(req){
            document.WebToLeadForm.submit();
            return true;
        }
        else{
          alert('Please provide all the required fields');
          return false;
         }
        return false
   }
   else{
    document.WebToLeadForm.submit();
   }
}
function validateEmailAdd(){
	if(document.getElementById('webtolead_email1').value.length >0) {
		if(document.getElementById('webtolead_email1').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
	if(document.getElementById('webtolead_email2').value.length >0) {
		if(document.getElementById('webtolead_email2').value.match(/^\w+(['\.\-\+]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
		  alert('Not a valid email address');
		}
	}
}
</script>
</body>

[marcielo]

Isn't there anybody having issues with users clicking the submit button several times?

For us its important that the leads are not repeated in sugar. Cause every lead is assigned an automated number that we use for our bookkeeping. Also an email is automated to the user and it does not look good spamming our users with mails.
It's not the end of the world if it can't be done, but it would be nice if it could :-)

[robertbmirth]

I don't know about the javascript, but there are other ways to fix this. One is to modify the leadCapture.php page so that it looks up any existing records with the same information. If a record is found, skip the add. If you don't have access to leadCapture.php (i.e. you're on Sugar On Demand) then you can still do the same thing by having the form direct to an external php page, use the SOAP interface to look up existing records, and then have that page submit the form to leadCapture.php only if there is no matching record. I'm currently using this second implementation and its working fine for the most part.