Why Form doesn't submit with javascript if an input field's name is submit

Question

Why Form doesn't submit on event if input field name is submit. I already know it won't based on recent experience, but why not.

http://jsfiddle.net/btm5j599/1/

Edited Code

$('#btn1').click(function() {
  $('#form1').attr('action', '');
  $('#form1').submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<form action="http://mytestsite.com/test/" method="post" id='form1'>
  <span>This is a form content</span>
  <input type="submit" name="submit" value="Submit" />
</form>

<hr>

<button id="btn1">Submit form on same page</button>

Possible duplicate of How send a form with Javascript when input name is "submit"? — Scott
– Scott, Commented Nov 18, 2015 at 14:49
The question is why is the form not submitting, when the button is clicked, if the name of the submit input is 'submit'. — Karl Gjertsen
– Karl Gjertsen, Commented Nov 18, 2015 at 15:20

RiccardoC · Accepted Answer · 2015-11-18 14:53:19Z

3

You can try to put an hidden button (input type="submit") and trigger a "click" event on it instead of a "submit" event on the form

answered Nov 18, 2015 at 14:53

RiccardoC

8665 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdul Rehman Over a year ago

This is a nice idea and i'll remember this. I was looking for the reason why it does so. updated my question. Thanks

Abdul Rehman · Accepted Answer · 2015-11-18 16:11:40Z

2

The problem is that the submit button has the name submit and this clash is overriding the form's submit() function.

If you remove the name="submit" attribute, this will work.

Here is some more information on conflicts:

http://jibbering.com/faq/names

http://paulsec.github.io/blog/2014/03/09/dealing-with-html-submits-conflict

edited Nov 18, 2015 at 16:11

Abdul Rehman

1,7923 gold badges23 silver badges38 bronze badges

answered Nov 18, 2015 at 15:04

Karl Gjertsen

4,9588 gold badges43 silver badges64 bronze badges

5 Comments

Abdul Rehman Over a year ago

this is some legacy code, it had the names as is. the form actually have an action, for a reason i'm setting action to empty and post it to same page. but i didn't know the reason for not submitting the form when there is an input with name submit

Karl Gjertsen Over a year ago

It will work ok if you submit the form by pressing the submit button, but because of the name clash, you cannot post it by calling $('form').submit();

Abdul Rehman Over a year ago

+1, very strange for me a variable scope is conflicting with a function name. i get it is conflicting but why this behavior is still mysterious to me.

Karl Gjertsen Over a year ago

Yes, I agree it is strange. I know it is legacy code, but if the name is not being used by the code, can you not remove it. Names of submit buttons were usually given like this out of habit.

Abdul Rehman Over a year ago

Yes, can & will change the code. actually already did before posting the question. After banging my head for 2 hours, i wanted to know the reason of this behavior. Can you point me to the reason for such a conflict which in my opinion is stupid.

Sundaze · Accepted Answer · 2015-11-18 14:57:50Z

1

Why do you need the js when you have an action that goes to www.google.com ? What are you trying to do ?

If it's just a sample, I still don't understand why you need an input with the type submit? You can have the button without a form and then run the js. But you can't run both because when you klick the input, it will bring you to google.com without running the js. But you could open it in a new tab and then the js would run.

edited Nov 18, 2015 at 14:57

answered Nov 18, 2015 at 14:52

Sundaze

3051 gold badge4 silver badges11 bronze badges

3 Comments

Daan Over a year ago

This is something you want to write as a comment, not as an answer.

Sundaze Over a year ago

Thanks for downvoting, now it takes even longer to be able to comment

Karl Gjertsen Over a year ago

@Sundaze It's a Catch 22 situation!

wolfhammer · Accepted Answer · 2015-11-18 15:23:15Z

Run the following modified submit along with a javascript console. There is a cross-origin policy error and also you were missing http://.

  $('#form1').submit(function(event) {
    console.log(this.action);
    var action = this.action
    $.post(this.action, $(this).serialize()).done(function(data, status, xhr) {
      alert(action + "\n\n" + status);
    }).fail(function(xhr, status, err){
      alert(action + "\n\n" + status);
    });
  });

  $('h3').click(function() {
    $('#form1').submit();
  });

https://code.jquery.com/jquery-1.11.3.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.google.com" method="post" id='form1'>
  <input type="submit" name="submit" value="Submit" />
</form>

<h3>click</h3>

Collectives™ on Stack Overflow

Why Form doesn't submit with javascript if an input field's name is submit

4 Answers 4

1 Comment

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related