HTML Form Submission with JQuery in a Django Application

Question

I use the following pieces of HTML and JQuery code to navigate pages in a website (I am also using Django; hence, the double curly braces). My code works fine only in Safari, but not in Firefox, Chrome, and Opera, even though it seems logically and syntactically correct. Any ideas why it doesn't work? Thank you for your help in advance.

Some more information: I am using the Django development server for now. My OS is macOS High Sierra (10.13.6).

<form id="myform" action="..." method="get">
    <a class="pg-nav" data-nav-value="-1" href="">Previous</a>
    <span id="pg-cur">{{ pageNumber }} / {{ totalNumPages }}</span>
    <a class="pg-nav" data-nav-value="1" href="">Next</a>

    <input id="pg" type="hidden" name="pg" value="0">
</form>


$('.pg-nav').click(function() {
    var curPage = parseInt($('#pg-cur').text());
    var navVal = parseInt($(this).data('nav-value'));
    var newVal = curPage + navVal;
    $('#pg').val(newVal);
    $('#myform').submit();
});

When you say it doesn't work - does that mean "submits the form but with the wrong values", "does not submit the form", "submits the form but the server doesn't seem to give the right results" or something else? If the form is not submitted, do you see any browser console errors? — manassehkatz-Moving 2 Codidact
– manassehkatz-Moving 2 Codidact, Commented Aug 8, 2018 at 23:52
Great question. I should have explained what happens. In Firefox, the same page is reloaded. In other words, the value of the pg input does not get changed. It remains the same. — Casper
– Casper, Commented Aug 9, 2018 at 22:22

Selcuk · Accepted Answer · 2018-08-09 01:08:04Z

1

Your links still try to reload the page because you allow the default behaviour of the a tag to be processed. You can prevent it using the .preventDefault() method:

$('.pg-nav').click(function(e) {
    ...
    $('#myform').submit();
    e.preventDefault();
});

answered Aug 9, 2018 at 1:08

Selcuk

60.1k12 gold badges114 silver badges119 bronze badges

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

Collectives™ on Stack Overflow

HTML Form Submission with JQuery in a Django Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related