e.prevent default deligation issue

[Evil_genius82]

Dear all,

I have a very strange problem I cant seem to make sense of.

Here is the story... I created a product page which when visited performs an ajax request to a json file to obtain product data, I then have a js script while dynamically appends html to create my checkout forms for each product.

Therefore, there are multiple dynamically created forms on one page.

My issue is this....

Everything works on my local server as when a form is submitted, 'e.preventdefault' stops any submission of forms with no selected items.

As soon as I build with grunt and pass to live server, e.preventdefault does not seem to work and forms are submitted....

Its been 3 hours now and I cant seem to figure our where I am going wrong.

$(".initial-cont").on("submit", ".payment-form", function(e){

var size2 = $(this).find(".size").val();
var style2 = $(this).find(".style").val();
var postage2 = $(this).find(".postage").val();

if ( (size2 == 777) || (size2 == null) ) {

  BootstrapDialog.alert({
    title: 'Error',
    message: 'Please select artwork size.',
    type: BootstrapDialog.TYPE_WARNING
});
 e.preventDefault(); 
 return; 
 }

/more validation similar to above

Notes:
.initial container already exists on page. (Not dynamic)
.payment-form is class name of form

Please let me know if I was not clear or need more info.

Thanks is advance.

Ryan

[gabrielcastillo]

Have you tried putting the function above all other code.. I usally set e.preventDefault(); before any other code. Can we see the full code for your ajax and html form?

[Evil_genius82]

Hi all,

Just in case anyone else runs into this issue, ensure 'e.preventDefault' is the first line of code after your event, as its possible it will not trigger and continue to submit the form. I say the word 'possible', as it was working fine on my local server, although when built with grunt and uploaded to live server, the form was still submitting.

So the solution is prevent default submition of form by adding 'e.preventDefault' at the beginning of your script. Then manually call the submit when validation has passed. (JQuery's .submit() function worked well.)

Thanks to Gabriel.

Ryan

Interesting - I always put it as the first thing as it seems logical to do so, but this article says you can place it anywhere:

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Therefore, it should have worked. Possibly you needed to clear the browser cache.