Member Avatar for 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

  • 3 Contributors
  • 3 Replies
  • 277 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for 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?

commented: Hi Gabriel, this was infact the issue! It seems its best to use e.preventDefault before any other code or you get any unwanted results. Thanks! +3
Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.