Better to Javascript redirect OR form submit?

Question

I'm doing a select box navigator and wondering if it's better to do a javascript redirect or submit a form and redirect from there. Pros and cons of each?

Answer 1

If you mean something like navigating by selecting an item of a list, you could do both:

• Have the form configured with a GET, that points directly to the target page.
• If js is supported, have the "submit" be called when selecting the value. If no js is supported, a select/go/open button should be displayed, allowing the user to still work with the application

Note: The approach above goes directly to the target page. This is different than sending a redirect from the server, which incurs in an extra request to be handled, adds extra delay to the operation and more requests to be handled by the server. This is a navigate scenario, there is no need to go server side for this (at least not without additional specific requirements).

Answer 2

HTTP redirect:

• Pros: you can log user's activity.
• Cons: one extra turnaround cycle until the user gets effectively redirected.

JavaScript redirect:

• Pros: user gets redirected immediately
• Cons: you cannot log user's activity, unless you use AJAX; if user has JavaScript disabled he won't get redirected.

In this case, I tend to use Unobtrusive JavaScript to solve this issue: code as if no JavaScript is enabled (i.e. a "Go" button that posts the form); then, after the page loads, Javascript would hide that button, add change functionality to the select box and send an AJAX request to log the activity.

That way you get the best of the two worlds :)

Answer 3

Be careful when doing something like this:

<select id="test" onchange="doAction();">
  <option value='http://...'&gt;...&lt;/option&gt;
  <option value='http://...'&gt;...&lt;/option&gt;
  <option value='http://...'&gt;...&lt;/option&gt;
  <option value='http://...'&gt;...&lt;/option&gt;
</select>

<script type="text/javascript">
function doACtion() {
    window.location = document.getElementById('test');
}
</script>

This has very poor accessibility as IE users trying to navigate the select with their keyboard will trigger the action inadvertently. This is especially troublesome for users with disabilities as if you're trying to redirect them they simply won't be able to access anything other than the first option.