JavaScript URL Redirection based on a text box

Question

I need to create a redirect system based on a code entered. Currently I have:

<form id="form1" name="form1" method="post" action=""> 
  <pre>     <input type="text" name="meow" id="meow" /> <input type="submit" name="submit" id="submit" value="Submit" onclick="javascript:window.location.href('http://foo.exaple.com/bar/' + document.getElementById("meow").value + '.zip')"/>

Basically, I need the above script to download a zip file in foo.example.com/bar/, based on a code entered in text box "meow".

When I enter code "ugh" into text box "meow" and click submit, I want to download the file at http‍://foo.example.com/bar/ugh.zip

How can I do this?

Just asking people to write code for you is a bad call... At least show what you have tried so far. This isn't a free programming outsource website. — Kansha
– Kansha, Commented Jan 21, 2013 at 22:13
Looks like you built your url fine, now just try using example: [how-to-download-a-file-from-a-url-with-javascript][1] [1]: stackoverflow.com/questions/4309009/… — Hank
– Hank, Commented Jan 21, 2013 at 22:18

Fabrício Matté · Accepted Answer · 2013-01-21 22:24:39Z

5

.href is not a function/method, it is a property which you assign a valid URI string to:

location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';

See MDN: window.location Object

Side-notes: If you don't want to submit the form, use an input type="button" instead of submit then.

Also mixing structure and behavior (HTML and JS) is usually frowned upon in our Web 2.0 times, so:

<input type="button" name="submit" id="submit" value="Submit">
<script>
document.getElementById('submit').onclick = function() {
    location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';
};
</script>

This works nicely in all browsers since IE6 as well and you save some headaches such as mixing up quotes inside the markup. =]
It is also easier to maintain and later you can even move your page's JS into a separate .js file for caching and separation of structure and behavior.

edited Jan 21, 2013 at 22:24

answered Jan 21, 2013 at 22:13

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaz Wolfe Over a year ago

Now, how to check if the file entered exists?

Fabrício Matté Over a year ago

@user1817097 you mean if it exists on the server? The easiest way is sending an ajax request I guess, see stackoverflow.com/q/3646914/1331430

Collectives™ on Stack Overflow

JavaScript URL Redirection based on a text box

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related