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 7 of 7
  1. #1
    edt
    edt is offline
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HOWTO? Javascript form to open URL?

    Hello!

    I am trying to make a form, with different options and, upon hitting submit, a new page will open with the created URL.

    for example:


    1) Enter the URL:
    user enters: http://www.supertown.com

    2) Enter the city:
    user enters: Chico

    3) Enter the state:
    user enters: CA

    [SUBMIT]

    Then the following window opens:
    http://www.supertown.com?city=Chico&state=CA


    Ive been trying to figure this out for over an hour...AHH!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    So I'm guessing the url won't always the the same. This would be so much easier with a server side language like PHP. Are you able to use PHP?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    label {
    display:block;
    }
    </style>
    <script type="text/javascript">
    function goTo()
    {
    	var url = document.forms[0].url.value;
    	var city = document.forms[0].city.value;
    	var state = document.forms[0].state.value;
    	window.location = url+'?city='+city+'&state='+state;
    	return false;
    }
    </script>
    </head>
    <body>
    <form action="" method="get" onsubmit="return goTo()">
    	<label for="url">Enter the URL:
    	<input type="text" name="url" id="url">
    	</label>
    	<label for="city">Enter the city:
    	<input type="text" name="city" id="city">
    	</label>
    	<label for="state">Enter the state:
    	<input type="state" name="state" id="state">
    	</label>
    	<input type="submit" value="Submit">
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    edt
    edt is offline
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perfect! thank you SO MUCH!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You can just set the form action to the value of the URL field and let the form do the what it's supposed to do in a GET request which is to append the field values in the URL querystring on form submission. The extra url value in the querystring can be ignored by the server the page is submitted to.

    Code:
    <form action="" method="get" onsubmit="this.action=this.url.value;">
    That's the only code you need.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is exactly what I was looking for, however I'm just curious how you can get this open up in a new window?

    I tried setting the target="_blank" in the form action tag, this didn't seem to work. The closest I've come to getting this work was adding the following, however the problem is that both the popup and the form page now redirect to this address.

    I'm only wanting the popup page to open this URL. Any ideas?

    Code:
    myRef = window.open(test,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No need for javascript. target="_blank" on the opening form tag will work fine however the target attribute isn't valid when it comes to using strict doctypes.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,630
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by dial8 View Post
    This is exactly what I was looking for, however I'm just curious how you can get this open up in a new window?
    Your visitor is supposed to be the one deciding what opens where - that's why the target attribute was made obsolete in 1997. It was only valid in HTML 3.2.

    Most people don't want new browser windows opening any more and prefer either to have them open in a new tab or as an overlay on the current page.

    There never has been any way to specify a new tab in HTML or JavaScript since tabbed browsers were introduced long after 1997.

    An overlay would be generated using JavaScript - a search for lightbox script should find lots of examples.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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