Submit on change() not working

Question

I have a form with a field which lets the user change the number of results on the page, the plan is that the form is submitted to update the results if they change the page size.

<form id="js-selectionForm" class="simple_form" method="get" action="/knowledge/contaminants.php">
<div class="pad-5">
...
</div>

<div class="pad-5">
...
</div>

<div class="pad-5">
...
</div>

<div class="pad-5">
...
</div>

<div class="pad-5">
    <input class="button pad-2" id="submit" type="submit" name="submit" value="Search"/>
    <h3 class="text-purple inline-block margin-10-left">
        Please select search criteria above                    </h3>
    <label class="right">Page size:
        <input class="refreshPage" type="number" name="pageSize" min="1" max="100"
               title="The number of results per page - 1 to 100"
               value="25"/>
    </label>
</div>

My jQuery includes the following;

$('.refreshPage').change(function () {
    $("#js-selectionForm").submit();
});

I know this selection works because I have put in console.log statements to check but the form is never submitted. I have used similar code before and it has always worked so I must be doing something wrong here, can anybody help me spot my mistake?

You cannot have any element with the `name` or `id` "submit". — Ivar, Apr 20 '17 at 10:08
@Ivar seems to be correct: http://stackoverflow.com/questions/9765695/why-cant-i-manually-submit-this-form#answer-9766435 — jeremiah.trein, Apr 20 '17 at 10:12
@Kris Is there a reason why should the method be post? GET seems to work except for this submission problem — Mark_1, Apr 20 '17 at 10:17
OK thanks, it looks like @Ivar is correct but now the value of the submit button isn't being passed as a parameter — Mark_1, Apr 20 '17 at 10:21
check here https://jsfiddle.net/teL2fe8f/1/ I have fix this by changing the name and id of submit button — Narayan, Apr 20 '17 at 10:23
@Mark_1 You can add a hidden input field with a name and value of your choice to fix that. — Ivar, Apr 20 '17 at 10:24
That does it; thanks @Ivar would you like to post it as an answer so I can accept the final version? — Mark_1, Apr 20 '17 at 10:35

jeremiah.trein · Answer 1 · 2017-04-20T10:05:55.300

0

You don't necessarily need to .submit(); see:

$('.refreshPage').change(function () { $("#submit").click(); });

PS - you're missing a <form /> at the end. This could be why it's not working. Your code seems correct to me.

edited Apr 20 '17 at 10:05

answered Apr 20 '17 at 10:04

jeremiah.trein

776
6
6

That doesn't explain why the `.submit()` isn't working. – Ivar Apr 20 '17 at 10:05
broken form tag – jeremiah.trein Apr 20 '17 at 10:06
That is not the problem. – Ivar Apr 20 '17 at 10:10
@jtrein The is there but for some reason not displaying on the stackoverflow page – Mark_1 Apr 20 '17 at 10:32

score 0 · Answer 2 · answered Apr 20 '17 at 10:18

As per @Ivar's suggestion, change name and id of the submit input

$('.refreshPage').change(function () {
    $("#js-selectionForm").submit();
});

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

<form id="js-selectionForm" class="simple_form" method="get" action="/knowledge/contaminants.php">

<div class="pad-5">
    <input class="button pad-2" id="submitMe" type="submit" name="submitMe" value="Search" />
    <h3 class="text-purple inline-block margin-10-left">
        Please select search criteria above                    </h3>
    <label class="right">Page size:
        <input class="refreshPage" type="number" name="pageSize" min="1" max="100"
               title="The number of results per page - 1 to 100"
               value="25" />
    </label>
</div>
</form>

Submit on change() not working

2 Answers2