Form Submit jQuery does not work

Question

I have that form   lt form action  deletprofil php  id  form id  method  post  gt               lt div data-role  controlgroup  data-filter  true  data-input   filterControlgroup-input  gt                   lt button type  submit  name  submit  value  1  class  ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Anlegen lt  button gt                   lt button type  submit  name  submit  value  2  class  ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Bnlegen lt  button gt               lt  div gt           lt  form gt     and that Popup from jQuery Mobile   lt div class  ui-popup-container pop in ui-popup-active  id  popupDialog-popup  tabindex  0  style  max-width  1570px  top  2239 5px  left  599px   gt       lt div data-role  popup  id  popupDialog  data-overlay-theme  b  data-theme  b  data-dismissible  false  style  max-width 400px   class  ui-popup ui-body-b ui-overlay-shadow ui-corner-all  gt           lt div data-role  header  data-theme  a  role  banner  class  ui-header ui-bar-a  gt               lt h1 class  ui-title  role  heading  aria-level  1  gt Delete Page  lt  h1 gt           lt  div gt           lt div role  main  class  ui-content  gt               lt h3 class  ui-title  gt Sicher dass Sie das Profil l  schen wollen  lt  h3 gt               lt p gt Es kann nicht mehr r  ckg  ngig gemacht werden  lt  p gt               lt a href     id  NOlink  class  ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b  gt Abbrechen lt  a gt               lt a href     id  OKlink  class  ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b  gt OK lt  a gt           lt  div gt       lt  div gt     lt  div gt    with my jQuery Code   lt script language  javascript  type  text javascript  gt    function            form id   bind  submit   function evt            form   this          evt preventDefault                popupDialog   popup  open                NOlink   bind   click   function                     popupDialog   popup  close                            OKlink   bind   click   function                                   popupDialog   popup  close                        form id    submit                                                       lt  script gt    The popup shows up but the form submit does not work  Does someone have any ideas

User · Answer

Some time you have to give all the form element into a same div.

example:-

If you are using ajax submit with modal.

So all the elements are in modal body.

Some time we put submit button in modal footer.

User · Answer

Since every control element gets referenced with its name on the form element  see forms specs   controls with name  submit  will override the build-in submit function   Which leads to the error mentioned in comments above      Uncaught TypeError  Property  submit  of object   lt HTMLFormElement gt  is not a function   As in the accepted answer above the simplest solution would be to change the name of that control element   However another solution could be to use dispatchEvent method on form element       form id   0  dispatchEvent new Event  submit

User · Answer

You can use jQuery like this    function            quot  form quot   submit function event               do some validation  for example          username      quot  username quot   val            if  username length  gt   8              return     valid         event preventDefault       invalidates the form              In your HTML   lt form id  quot form quot  method  quot post quot  gt       lt input type  quot text quot  name  quot username quot  required id  quot username quot  gt       lt button type  quot submit quot  gt Submit lt  button gt   lt  form gt   References  https   developer mozilla org en-US docs Web API HTMLFormElement submit event https   api jquery com submit

User · Answer

if there is one error in the the submit function the submit function will be execute  in other sentences prevent default or return false  does not work when one error exist in submit function

User · Answer

The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME  in  your form   If you plan to call  submit   on the form AND the form has submit as id or name on any form element  then you need to rename that form element  since the form   s submit method handler is shadowed by the name id attribute     Several other things   As mentioned  you need to submit the form using a simpler event than the jQuery one  BUT you also need to cancel the clicks on the links  Why  by the way  do you have two buttons  Since you use jQuery to submit the form  you will never know which of the two buttons were clicked unless you set a hidden field on click    lt form action  deletprofil php  id  form id  method  post  gt     lt div data-role  controlgroup  data-filter  true  data-input   filterControlgroup-input  gt     lt button type  submit  value  1  class  ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Anlegen lt  button gt     lt button type  submit  value  2  class  ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Bnlegen lt  button gt     lt  div gt   lt  form gt       function            NOlink   OKlink   on  click   function e            e preventDefault       cancel default action             popupDialog   popup  close            if  this id   OKlink                document getElementById  form id   submit       or     form id   0  submit                               form id   on  submit   function e         e preventDefault              popupDialog   popup  open                      Judging from your comments  I think you really want to do this    lt form action  deletprofil php  id  form id  method  post  gt     lt input type  hidden  id  whichdelete  name  whichdelete  value      gt     lt div data-role  controlgroup  data-filter  true  data-input   filterControlgroup-input  gt     lt button type  button  value  1  class  delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Anlegen lt  button gt     lt button type  button  value  2  class  delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right  data-icon  delete  aria-disabled  false  gt Bnlegen lt  button gt     lt  div gt   lt  form gt       function            NOlink   OKlink   on  click   function e            e preventDefault       cancel default action             popupDialog   popup  close            if  this id   OKlink                   trigger the submit event  not the event handler           document getElementById  form id   submit       or     form id   0  submit                              delete   on  click   function e                whichdelete   val this value                   form id   on  submit   function e         e preventDefault              popupDialog   popup  open

User · Answer

Don t forget to close your form with a  lt  form gt   That stopped submit   working for me

User · Answer

Alright  this doesn t apply to the OP s exact situation  but for anyone like myself who comes here facing a similar issue  figure I should throw this out there-- maybe save a headache or two    If you re using an non-standard  button  to ensure the submit event isn t called    lt form gt     lt input type  hidden  name  hide  value  1  gt     lt a href     onclick  submitWithChecked this form   gt Hide Selected lt  a gt    lt  form gt    Then  when you try to access this form in the script  it s going to come up undefined  As I discovered  apparently anchor elements don t have same access to a parent form element the way your standard form elements do   In such cases   again  assuming you are intentionally avoiding the submit event for the time-being   you can use a button with type  button    lt form gt     lt input type  hidden  name  hide  value  1  gt     lt button type  button  onclick  submitWithChecked this form   gt Hide Selected lt  a gt    lt  form gt       Addendum 2020  All these years later  I think the more important lesson to take away from this is to check your input  If my function had bothered to check that the argument it received was actually a form element  the problem would have been much easier to catch

User · Answer

If you are doing form validation such as  type  submit  onsubmit  return validateForm this    validateForm   function form    if     input company   val                input company   val        Company                 input company   val  Company   css  color   red    finalReturn   false              input company   on  mouseover   function                     input company   val     css  color   black                    input company   off  mouseover                finalReturn   true                            return finalReturn       Double check you are returning true  This seems simple but I had  var finalReturn   false    When the form was correct it was not being corrected by validateForm and  so not being submitted as finalReturn was still initialized to false instead of true  By the way  above code works nicely with address  city  state and so on

User · Answer

According to http   api jquery com submit      The submit event is sent to an element when the user is attempting to   submit a form  It can only be attached to  elements  Forms can   be submitted either by clicking an explicit  lt input type  submit  gt      lt input type  image  gt   or  lt button type  submit  gt   or by pressing Enter   when certain form elements have focus    So basically   submit is a binding function  to submit the form you can use simple Javascript   document formName submit

User · Answer

Because when you call      form id    submit    it triggers the external submit handler which prevents the default action  instead use       form id    0  submit             or   form submit     declare   form as a local variable by using var  form   this    When you call the dom element s submit method programatically  it won t trigger the submit handlers attached to the element

[jquery] Form Submit jQuery does not work

Examples related to jquery

Examples related to jquery-ui