Question

I’m creating some pagination for my website, and want to use an input-element to navigate between pages.

Like the following example:

The input would require the “return” key to be hit for the script to trigger.

If the value entered is not within range and alert would trigger. e.g. If there was 32 pages, “Please enter a value between 1 and 32”

Can this be done using jQuery or javascript, by detecting the value change within the range of pages and redirecting to that page?

I’m trying to create the same device on Getty Images:

http://www.gettyimages.com.au/Search/Search.aspx?contractUrl=2&language=en-US&family=creative&p=ball&assetType=image&clarification=ball%3A60847

Answer 1

You can do this using a get form and html5 without javascript:

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="6" value="1" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​

If you are using php you could fill in the max and current page:

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="[page maximum]" value="[current page]" />
</form>​

You could add jquery validate to validate the form for browsers that do no support html5.

Edit 1:

Or you could add this jquery code to do some simple validation like getty does:

$('.pageNumberForm').submit(function() {
    var pageInput = $(this).children('.pageNumber').first();
    var pageInputValue = pageInput.val();

    if (pageInputValue < pageInput.attr('min') || pageInputValue > pageInput.attr('max') || !pageInputValue.match(/\d+/)) {
        alert('Please enter a value between ' + pageInput.attr('min') + ' and ' + pageInput.attr('max'));
        return false;
    }
});​