1

I was just adding using the JQuery .submit() to send off a HTML form to the server. I noticed that when I set name="submit" it fails to send the form. When I change the name to something other than "submit", it sends!

This does not work:

<form class="edit_a_leaver" action="editLeaver" method="post" hidden>
    <input class="leaver_id" name="leaver_id" type="text">
    <input name="submit" type="submit" value="submit">
</form>

This does work:

<form class="edit_a_leaver" action="editLeaver" method="post" hidden>
    <input class="leaver_id" name="leaver_id" type="text">
    <input name="submit_button" type="submit" value="Send">
</form>

JQuery:

$(".edit_a_leaver").submit();

Can someone explain to me why? I have tried searching.

jonhopkins
  • 3,844
  • 3
  • 27
  • 39
DarrenW
  • 108
  • 1
  • 2
  • 13

3 Answers3

4

You're having issues because the name being submit is overriding the form.submit() function reference for that <form>, instead submit_button.submit refers to that button, rather than the DOM submit() function.

Read this post for more and also this doesn't work even when dhe id is submit .

Read here for this also

Edison Biba
  • 4,384
  • 3
  • 17
  • 33
1

This is 'intentional'

When you have a form, you can select an element of the form through 

<form id="form" action="url">
    <input type="text" id="inputId" name="textboxname">
</form>

// Grabbing the input
form.inputId; // that's the input, you can use it in JS

But the issue is that this conflicts when the id or name is "action" or "submit", since you'd use form.submit();

If you still want to keep the id "submit", you can use the form prototype as such :

HTMLFormElement.prototype.submit.call(form);

Source : https://www.joezimjs.com/javascript/dont-name-inputs-action-submit/

G.P.
  • 75
  • 7
  • Thanks for sharing the prototype workaround. Just spent a few hours debugging this issue, complex form and of course the button at end was the last thing I checked! Only happened when trying to submit a **clone** of the form. Lesson to when in doubt, steer clear of reserved words. – ficuscr May 01 '19 at 05:32
0

Try this code

$(".edit_a_leaver").submit((function(e) { 
  e.preventDefault();
});
Parithiban
  • 1,656
  • 11
  • 16