2

I have looked at a few questions on here and followed them but am still not having any success. I want the form to submit when the select is changed. I have this:

HTML:

<form id="form1_currency" action="/" method="post">
    <select id="form1_currency" name="currency" class="autosubmit"><option value="47">GBP</option><option value="142">USD</option><option value="44">EUR</option></select>
    <input id="form1_submit" name="submit" value="OK!" type="submit" /><input type="hidden" name="cms-form" value="Y3VycmVuY3k6cGVyY2hfc2hvcDovdGVtcGxhdGVzL3Nob3AvY3VycmVuY2llcy9jdXJyZW5jeV9mb3JtLmh0bWw6MTQ2MDk3NDgwNg==" />
</form>

JQUERY:

$('.autosubmit').on('change', function(){
  console.log('Option Changed');
  $(this).parent('form').submit();
});

But the form is not submitting. Pen is here:

http://codepen.io/mikehdesign/pen/ZWomjv

Help greatly appreciated!

Improve this question
5
  • This is so weird!!! The code looks all fine, if I place a event handler for form submit and show a alert it works as well. Except the form is not submitted.. Commented Apr 18, 2016 at 10:41
  • use below code --- $(this).siblings('input[type="submit"]').click(); instaed of $(this).parent('form').submit(); Commented Apr 18, 2016 at 10:43
  • @krishna — Please don't answer questions in the comments. Comments are for comments, answers are for answers. Commented Apr 18, 2016 at 10:44
  • @krishna - that simply triggers a click on the submit button - rather than submitting the form on an onchange event - but if you look at my post - i got the form to autosubmit by removing the submit button - which is therefore redundant if it autosubmits anyway. Commented Apr 18, 2016 at 10:44
  • Try $('#form1_currency').submit(); instead of $(this).parent('form').submit(); Commented Jul 28, 2022 at 21:30

2 Answers 2

Reset to default
2

Change button's "submit" name to something else. That causes the problem.

See the jQuery submit() documentation:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

So just change the name attribute value from submit to anything else.Working Fiddle

Changed part in your above code is this

<input id="form1_submit" name="something" value="OK!" type="submit" />

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

3 Comments

why keep the submit button at all? the point of this was to allow the autosubmit on this form and the only element in the form is the currency selection - therefore the role of the submit button is redundant - I removed it and got the form to work - albeit without your nice description and got downvoted for it - but i say remove the button in totalis and allow the autosubmission to work.
@gavgrif The form works when you remove the submit button only because it had a name="submit" which will conflict with the form submit. The solution is to have the button and also have the jquery submit to work, Which is what this answer does. What if the OP wants both his submit button and the jquery submit to work? your solution was more over a workaround than a solution.
yup - i guess you are right - and I liked your answer / description. Fair point. Post deleted - thanks
-2

You can Try this.

$('form').submit();
Improve this answer

1 Comment

The existing code will already find the form. This is a different, and arguably worse (since it can't cope with multiple forms on the same page), approach but it has the same problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.