Javascript – Append a parameter of an option to URL retrieved by a dropdown menu

I have a drop down menu. I use it to select a particular Tea.

<form name="barcode" onSubmit="return OnSubmitForm();" method="post">

    <select name="entry_id" id="entry_id">
        <option selected="selected">Select a tea</option>
        <td><option entry_id="865"> Black Tea</option></td>
        <td><option entry_id="123"> Green Tea</option></td>
    </select>

    <input type="submit" value="Tea story">
</form>

Then I want to use javascript to retrieve entry_id of the selected Tea and append the it to end of the URL, e.g. /myshop/tea/865 <– 865 is the entry id for Black Tea

My Javascript code:

<SCRIPT language="JavaScript">
    function OnSubmitForm()
    {
        alert('inside');
        var eid = document.getElementById('entry_id').value;
        alert(eid);
        document.barcode.action ="https://www.myshop.ca/tea/" + eid;
    }
</SCRIPT>

But every time it append “Black Tea” or “Green Tea” names, e.g, /myshop/tea/Black Tea or /myshop/tea/Green Tea. Is there a way to append entry_id at the end of the URL, e.g. /myshop/tea/865 or /myshop/tea/123

Answer

<form name="barcode" onSubmit="return OnSubmitForm();" method="post">

    <select name="entry_id" id="entry_id">
       <option selected="selected">Select a tea</option>
       <option value="865">Black Tea</option>
       <option value="123">Green Tea</option>
    </select>

    <input type="submit" value="Tea story">
    </form>

makes more sens. use the form widgets as they are supposed to be used.