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?

Answer 1

.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.