Using jQuery to prevent lead form being submitted

  • 28 March 2018
  • 8 replies
  • 523 views
mattyglover

Hi guys,

I want to do some custom validation work (via ajax) before I will allow a lead to be submitted.

For now, as a proof of concept, I am just trying to stop the form being submitted at all. But I can’t work out how.

This is the code I am using. When you click on the button to submit the lead form, it displays the alert, but then the form is submitted anyway even though propagation of the event should have been stopped.

Please help!

Here is the code I am using:

<script>

$(document).ready(function() {

$('#lp-pom-button-17').click(function (e) {
  
  e.preventDefault();
  
  $('#lp-pom-form-16').submit(function() {
    return false;
  });
  alert("hit");
  return false;
});

});

8 replies

leah.ann

Hey @mattyglover!

Have you tried adding e.stopPropagation(); after e.preventDefault();? preventDefault() only removes the default functionality that was added to the on-click event, it doesn’t stop the JS from continuing to run (in this case, running the form’s POST action).

Alternatively, there’s actually a community script for adding custom validation to your forms. 👉 Check it out!

mattyglover

Hey @leah.ann,

Thank you for the link to the script. I’ve implemented that and got it working pretty easily.

My complication is that I’d like to perform an AJAX query to validate a coupon prior to the form being submitted. Obviously being cross-domain that would need to occur asynchronously.

Is there a way to programmatically submit the form? I’m picturing a scenario where we stop the form submission, validate the coupon asynch, then I’d set a hidden form variable value (or some such means) on the success callback and then programmatically submit the form. On the second submission, the coupon would have been validated so we can return true on the custom validation rule.

If you can point me in the direction of being able to programmatically submit an unbounce form, I think I could wire up the rest 😃

Thanks for your help!

Matt

Hristian
Userlevel 7
Badge +3

Hi @mattyglover,

I usually strongly advise against people messing with the submit function of their Unbounce forms. You can inadvertently break things and not even realize it.

Keeping the above in mind, there are hundreds of reasons why one might need to pause their form submit. Your case with checking a coupon code is just one of many.

My agency constantly does this for clients so here is the basic overview:

Write a function that would:

  1. Unbind the ‘keypress’ and binds it to ‘keypress.formSubmit’ for the form (Don’t forget to account for the Enter key)

  2. But also unbind the “click tap touchstart” of your button and bind it to “click.formSubmit”

  3. Run your validation

  4. Don’t forget to submit the form at the end 🙂

Hope this points you in the right direction.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
leah.ann

To supplement everything that @Hristian has said, here’s a quick script to achieve steps 2-4:

<script>
lp.jQuery().ready(function() { 

  // Grabs form submit button
  var id=window.module.lp.form.data.formButtonId; 

  // Unbinds submit button on-click event
  lp.jQuery("#"+id).unbind("click tap touchstart"); 

  // Re-binds on-click event to add your own function
  lp.jQuery("#"+id).bind("click tap touchstart",function(e) { 
  
    // Prevent submit
    e.preventDefault(); 
    e.stopPropagation(); 
    
	/*
	Your custom validation stuff
	Your custom validation stuff
	Your custom validation stuff
	Your custom validation stuff
	*/
    
	// Submit form
    lp.jQuery("form").submit();
  }); 
});
</script>

This doesn’t account for keypress like Hristian mentioned above, just actual clicks (or mobile taps) on the submit button, but hopefully it gives you something to start working with!

Kyle.C
Userlevel 5

@leah.ann

Your script worked for me, very thankful. I’m working on something very similar this week to validate and prevent duplicate leads. I’m grateful @mattyglover for posting the same question I was going to ask.

I’ll keep plugging away and try to post my complete script so others can imitate. Hopefully bind and unbind won’t break anything 😑

Kyle.C
Userlevel 5

So I found this thread in the forum…I was able to add my ajax get to validate and it works 👍
@mattyglover all the script to prevent submissions is included in this thread…

For a simple test I removed where it asks for //ADD CUSTOM CODE, the try, catch, and finally, and used this

$.get("https://api.randomuser.me", function(resp) {
  console.log('validation about to happen...');
    var gender = resp.results[0].gender;
    if (gender === 'male') {
    console.log('Validate found duplicate gender. Form not submitted. ');  
    } else {
      gaForm(e);
      lp.jQuery('.lp-pom-form form').submit();
console.log('Validate Successfull, no duplicate found. Form submitted.');
    }
});

}

L

@leah.ann Has unbounce rolled out a change in the last couple of days? As this how suddenly stopped working across all my sites, even the most basic form, which I’ve setup to test, doesnt stop the form submitting!

http://unbouncepages.com/test-validation/

lp.jQuery().ready(function() { 
	window.ub.page.submitButtonIds = [];
  // Grabs form submit button
  var id=window.module.lp.form.data.formButtonId; 

  // Unbinds submit button on-click event
  lp.jQuery("#"+id).unbind("click tap touchstart"); 

  // Re-binds on-click event to add your own function
  lp.jQuery("#"+id).bind("click tap touchstart",function(e) { 
  
    // Prevent submit
    e.preventDefault(); 
    e.stopPropagation(); 
   
	
  }); 
});
L

I’m experiencing the same issue as Lawrence_Howlett1 above. Any feedback?

Reply


Terms & ConditionsCookie settings