redirect url after selecting option in HTML form?

Question

I have a simple form with options that I want to redirect to. In the root of my index.html which has the following code. I have two folders in same level as index.html. foo/index.html and bar/index.html. I want to redirect to sub-index.html upon option selection and submit. NOT onchange event.

<form id='selector'>
      <div class='input'>
        <select id="foobarid" name="foobar">
            <option value="foo/index.html">foo</option>
            <option value="bar/index.html">bar</option>
        </select>
      </div>
      <div class='input'><a id="foobarsubmit" href="#">submit</a></div>
    </form>

NOTE: most posts explains using jquery/javascript. I am trying to see if it is possible to avoid using jquery/javascript event handlers.

Any reason why you don't want to handle it with the onchange event? — Phil-R, Sep 09 '15 at 03:00
@Phil-R: the requirement is to be redirected upon clicking the submit button. not just onchange. — brain storm, Sep 09 '15 at 03:01

score 1 · Accepted Answer · answered Sep 09 '15 at 03:13

Just set the href of the submit element to the option value onchange of the select something like

<form id='selector'>
      <div class='input'>
        <select id="foobarid" name="foobar" 
                onchange="document.getElementById('foobarsubmit').href = this.value;">
            <option value="foo/index.html">foo</option>
            <option value="bar/index.html">bar</option>
        </select>
      </div>
      <div class='input'><a id="foobarsubmit" href="#">submit</a></div>
</form>

redirect url after selecting option in HTML form?

1 Answers1