views:

23

answers:

2

How can I make a form that allows users to enter a number and then goes to example.com/page/# where # is what the user typed in? I want this for a pagination "jump to" option.

I can only use HTML and JavaScript

A: 
<script type="text/javascript">
    function goToPage(){
        var page=document.getElementById('in').value; // value of input box
        page=page*1; // ensures page is numeric only
        location.href='http://www.example.com/page/'+page; // redirect to new url
    }
</script>
<input type="text" id="in"/>
<input type="button" onclick="goToPage();"/>
Christian Sciberras
subsequently get attacked with command injection :(
Woot4Moo
@Woot4Moo - what?! page*1 exactly prevents that from happening.
Christian Sciberras
A: 
<form id="jump" method="get" action="">
    <input type="text" id="jump-page"/>
    <input type="submit" value="Go"/>
</form>

<script type="text/javascript">
    document.getElementById('jump').onsubmit= function() {
        location.hash= document.getElementById('jump-page').value;
        return false;
    };
</script>

For page numbers you should probably prefix them like id="page-2" (to make a valid identifier) and then do location.hash= '#page-'+....

bobince
The # was just an example, I'm pretty sure he didn't mean using a number after the hash or anything like it.
Christian Sciberras
Hmm. I dunno. “Jump to” sounds like scroll-to-fragment to me. You may be right though, the question's not clear.
bobince