View Full Version : HOWTO? Javascript form to open URL?

06-10-2007, 01:04 AM

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


Then the following window opens:

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

06-10-2007, 01:14 AM
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?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
label {
<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;
<form action="" method="get" onsubmit="return goTo()">
<label for="url">Enter the URL:
<input type="text" name="url" id="url">
<label for="city">Enter the city:
<input type="text" name="city" id="city">
<label for="state">Enter the state:
<input type="state" name="state" id="state">
<input type="submit" value="Submit">

06-10-2007, 01:36 AM
perfect! thank you SO MUCH!

06-10-2007, 04:55 AM
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.

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

03-30-2012, 10:24 PM
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?

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

04-06-2012, 04:58 AM
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.

04-06-2012, 06:05 AM
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.