Jquery function BEFORE form submission

Question

I am trying to fire a function using Jquery when the form submit button is clicked  but the function needs to fire BEFORE the form is actually submitted  I am trying to copy some div tag attributes into hidden text fields upon submission  and then submit the form  I have managed to get this to work using the mouseover function  when the submit button is hovered over   but this will not work on mobile devices using touch     quot  create-card-process design  submit quot   on  quot mouseover quot   function          var textStyleCSS      quot  cover-text quot   attr  style        var textbackgroundCSS      quot  cover-text-wrapper quot   attr  style           quot  cover text css quot   val textStyleCSS          quot  cover text background css quot   val textbackgroundCSS        I have played around with the submit function  but the values are not saved within the fields as the function fires when the form is submitted and not before  Many thanks

User · Answer

You can use some div or span instead of button and then on click call some function which submits form at he end    lt form id  my form  gt      lt span onclick  submit    gt submit lt  span gt   lt  form gt    lt script gt     function submit                    do something            my form   submit          lt  script gt

User · Answer

Based on Wakas Bukhary answer  you could make it async by puting the last line in the response scope       myform   submit function event       event preventDefault      this will prevent the default submit   var  this     this     store form so it can be accessed later      ajax  GET    url   then function resp            your code here       this unbind  submit   submit       continue the submit unbind preventDefault

User · Answer

You can use the onsubmit function   If you return false the form won t get submitted  Read up about it here       myform   submit function          your code here

User · Answer

Aghhh    i was missing some code when i first tried the  submit function       This works       create-card-process design   submit function         var textStyleCSS       cover-text   attr  style        var textbackgroundCSS       cover-text-wrapper   attr  style            cover text css   val textStyleCSS           cover text background css   val textbackgroundCSS         Thanks for all the comments

User · Answer

myform   submit function          your code here     The above is NOT working in Firefox  The form will just simply submit without running your code first  Also  similar issues are mentioned elsewhere    such as this question  The workaround will be     myform   submit function event      event preventDefault      this will prevent the default submit       your code here  But not asynchronous code such as Ajax because it does not wait for a response and move to the next line         this  unbind  submit   submit       continue the submit unbind preventDefault

User · Answer

You can do something like the following  these days by referencing the  beforeSubmit  jquery form event  I m disabling and enabling the submit button to avoid duplicate requests  submitting via ajax  returning a message that s a json array and displaying the information in a pNotify   jQuery  body   on  beforeSubmit     formID   function             submitter   prop  disabled   true       var form       formID          ajax           url      form attr  action            type      post           data     form serialize            success  function  response                        response   jQuery parseJSON response               new PNotify                   text  response message                  type  response status                  styling   bootstrap3                   delay  2000                                  submitter   prop  disabled   false                      error    function                          console log  internal server error

User · Answer

Just because I made this mistake every time when using the submit function   This is the full code you need    Add the id  yourid  to the HTML form tag     lt form id  yourid  action  XXX  name  form  method  POST  accept-charset  UTF-8  enctype  multipart form-data  gt    the jQuery code        yourid   submit function          do something

[jquery] Jquery function BEFORE form submission

Examples related to jquery

Examples related to forms

Examples related to form-submit