CODEWITHSUNDEEP
javascriptformshtml-select
user1427195
user1427195

Reputation: 43

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

Upvotes: 0

Views: 1505

Answers (2)

user1726343
user1726343

Reputation:

You aren't supposed to have tds in a select element. Additionally, you need to set the value attribute of the option elements to your desired IDs. Eg.:

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

Upvotes: 0

mpm
mpm

Reputation: 20155

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

Upvotes: 1

Related Questions