Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    redirect with text box

    I need a weird browser redirect. I need a text box, we will call it variable "A", and a submit button on a form. when the person types in a number such as 51225 into the text box and clicks submit it will redirect them to the page yourdomain.com/51225.php. What is the best way in doing this?

    Code:
    <html>
    <head>
    <script type="text/JavaScript">
    <!--
    
    A=document.form.ID.value
    
    function onclick(event)
    {
    window.location = http://yourdomain.com/document.write(A).php"
    }
    //-->
    </script>
    </head>
    <body>
    
    <form name="form">
    ID: <input type="text" name="ID" size="6" value="">
    <input type="submit"> 
    </form>
    
    </body>
    </html>
    I know this is not correct but it is a start. I can't figure out how to place the variable into the url.

  • #2
    New Coder
    Join Date
    Aug 2008
    Posts
    60
    Thanks
    6
    Thanked 6 Times in 6 Posts
    Try this...
    Code:
    <html>
    <head>
    <script type="text/JavaScript">
    <!--
    function redirect(num)
    {
    var newurl="http://yourdomain.com/"+num+".php";
    window.location.href = newurl;
    }
    //-->
    </script>
    </head>
    <body>
    
    <form name="form">
    ID: <input type="text" name="ID" size="6" value="" id="redir">
    <input type="button" value="Go!" onclick="redirect(document.getElementById('redir').value);"> 
    </form>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thought it would work but no such luck...

    it just puts the variable that you inserted into the text box into the url as a sufix. example if you were to put 1 into the box and hit go it would read this in the url: http://www.yourdomain.com/file.php?ID=1

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Fixed

    Here is the code but there is one small glitch. if you click the enter key it does not activate javascript but clears the text field. Any ideas? maybe due to my command onclick.

    Code:
    <html>
    <head>
    <script type="text/javascript"
    <!--
    function redirect(num)
    {
    window.location = "http://yourdomain.com"+num+""
    }
    -->
    </script>
    </head>
    
    <body>
    <form>
    <input type="text" value="" id="number">
    <input type="button" value="Go!" onclick="redirect(document.getElementById('number').value);">
    </form>
    </body>
    </html>
    This is the final code and if you have an idea on how to fix code to allow for someone who clicks enter rather than Go! I would really appreciate your input. Thanks!

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Remove the form tags if you don't mean to submit it:
    Code:
    <form>
    .
    .
    .
    </form>
    ...and for the "Enter" functionality (add highlighted):
    Code:
    <input type="text" value="" id="number" onkeypress="var keyCode=event.keyCode?event.keyCode:event.which?event.which:event.charCode;
    if(keyCode==13) redirect(this.value);">
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    IF you want to disable Enter key in a form with only 1 text field and a button, you don't need javascript. You can do the trick using HTML and CSS by adding a CSS hidden text field in the form.

    Code:
    <form>
    <input type="text" name="dummy" style="display:none" />
    <input type="text" value="" id="number">
    <input type="button" value="Go!" onclick="redirect(document.getElementById('number').value);">
    </form>
    Try it!

    See explanation of technique from my post at http://www.codingforums.com/showthre...207#post263207

  • #7
    New Coder
    Join Date
    Oct 2008
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    rangana: your code works great!

    one more problem I think it is with unrocks code. This javascript works great in Firefox but does not work in IE7. It says object expected on the line that reads

    Code:
    <input type="button" value="Go!" onclick="redirect(document.getElementById('number').value);">
    Any ideas on how to get this working across all browsers? Thanks!

  • #8
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    If you want solid cross-browser code go back to using a form. Instead of using the onclick for the button, use the onsubmit inside the form element, and return false so it doesn't reload the page.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <script type="text/javascript">
    <!--
    function handleThis(formElm)
    	{
    	window.location="http://yourdomain.com/"+formElm.number.value+".php";
    	return false;
    	}
    // -->
    </script>
    </head>
    <body>
    
    <form onsubmit="return handleThis(this)">
    	<input type="text" name="number" />
    	<input type="submit" value="Submit" />
    </form>
    
    </body>
    </html>
    This way the enter key works as expected, without having to use any event handling. You might also want to add a line of code that checks to make sure the text box isn't empty.
    Last edited by itsallkizza; 10-31-2008 at 07:41 AM.

  • #9
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to necrobump this thread, but itsallkizza's solution really helped me on a project I'm working on.

    My question is, is there a modification I can make to this code to make the redirect launch in a new window or tab?

    I've been trying to Google this answer, but I'm afraid I've come up with nothing. Thanks in advance for any help.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Use window.open() instead of window.location


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •