Passing hidden input fields in HTML Select option

Question

Does anyone know if it's possible to pass a hidden request parameter in with a <select> <option> element in a HTML form?

So for example, if the user selected <option value="foo">foo</option> from a <select> list of options, could I somehow pass a hidden value in, as well as the "foo" value, and retrieve that as a request parameter? E.g. <input type="hidden" name="x" value="bar"/> would enable me to get the values "foo" and "bar" from the request when the user selected the foo option.

Thanks

I've clarified my question. Sorry the incorrectly formatted HTML code elements weren't being displayed before. Thanks — Andy Birchall
– Andy Birchall, Commented Mar 21, 2012 at 13:46

Jeff Widmer · Accepted Answer · 2009-07-23 08:38:51Z

19

A select list has both a value that is displayed to the user and a value that is passed back to the server in the form post. So you could use some sort of delimiter in the posted value to get both values sent back and then parse them at that point:

        <select id="myselectlist" >
            <option value="foo|bar">foo</option>
            <option value="foo2|bar2">foo2</option>
        </select>

But better yet would be to pass back an ID value which you could then use to know which item was selected from a database and also use it to look up the second related item:

        <select id="myselectlist" >
            <option value="123">foo</option>
            <option value="124">foo2</option>
        </select>

Your database might look like this:

ID   DisplayValue   OtherData   
123  foo            bar     
124  foo2           bar2

answered Jul 23, 2009 at 8:38

Jeff Widmer

4,8966 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Birchall Over a year ago

Thanks for that. I am actually using the parsing method at the moment but wondered if there was a slightly nicer way by posting back two values with the selection. I can't use the ID value solution because the second value isn't stored in the database. By the way my HTML code that I included in my question didn't get displayed, probably because I didn't format it correctly, so that's why it reads badly, sorry!

h3n Over a year ago

try storing otherdata to the option id

Pierre-Olivier Vares Over a year ago

When you generate your page, you know that foo should send you back foo and bar. What keeps you from doing the same at the treatment instead ? Rather than "when outputting, I write foo and bar", just do "if foo then also bar" at treatment Or did I miss something ?

Dave Anderson · Accepted Answer · 2009-07-23 08:26:32Z

3

There is the form input type='hidden' which you could update using the onchange event of the select drop down then it would be posted with the form. I suspect you would want to create an array of the possible values for the hidden input in the same order as their equivalents in the select drop down and then access the value in the array by index using the selectedIndex property of the select element.

answered Jul 23, 2009 at 8:26

Dave Anderson

12.4k4 gold badges60 silver badges80 bronze badges

1 Comment

Andy Birchall Over a year ago

Thanks Dave, I considered Javascript but decided against it in the end. I want to use a purely HTML solution.

That Realty Programmer Guy · Accepted Answer · 2014-03-31 16:11:24Z

Here's an alternative solution assuming jQuery is available. If you use a js utility library other than jQuery, or no library at all, this is still possible. Its just binding a function to the select's onchange event and parsing the json from a custom data-attribute.

<form>
<select name="AnySelect">
 <option value="primary-value0" data-support='["test",128,2014,"blackberry"]' />
 <option value="primary-value1" data-support='["test1",39,2013,"apricot"]' />
 <option value="primary-value2" data-support='["test2",42,2012,"peach"]' />
 <option value="primary-value3" data-support='[null,null]' />
 <option value="primary-value4" data-support='[30,28,null]' />
</select>
.
.
.
<span style="visibility: hidden" id="Support_AnySelect-container"><span>
</form>

^ Markup ------- JavaScript v

//bind onchange once document is loaded and ready
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); });

function UpdateHidden(event)
{
  //Create a base name for grouping dynamic values; ex: Support_AnySelect
  Name='Support_'+SelectField.attr('name');

  //Check if container was made for us already
  Contain=$(this.parent).find('#'+Name+'-container');

  if(Container.length===0)  //make the container if missing
  {
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>');
    Contain=$(this.parent).children('#'+Name+'-container');
  }

  //get our special multi-values, jQuery will auto decode the JSON
  SupportValues = this.data('support');

  Contain.empty(); //get rid of last select options
  $.each(SupportValues,function(i,val)
  {
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>');
  });
}

Main benefit of this is that it should, in theory, let you post a 'variable amount of variables' from the form. You could also adjust the script to account for certain nested objects. As long as you pass in valid JSON to the data-attribute of your choice.

If anyone tries this out before I do, please let me know. I will test this later on but may have some minor errors.You should be able to use this on any select element and have hidden inputs automatically populate inside another element; script should also guarantee these to be in the same form tag for you and having unique but grouped names via HTTP array.

I think that your solution is much more powerful and more lightweight than creating a new table in the database to store the values. However, you use a lot of shortcuts in your code (like '#TheSelector') that aren't obvious to understand for newbies. And since it's not working, I couldn't even try it in a fiddle to figure out things by myself. Anyway, these are minor things, and I still got my code working thanks to your indications that pointed me in the right direction. Upvoted!

Foram Shah · Accepted Answer · 2019-11-27 12:04:45Z

2

If you need to use a hidden field for each options of the select dropdown, you can set that value in your own attribute in tag, instead of setting it into hidden field.

<option value="foo" fooData="foo|bar">foo</option>
<option value="foo2" fooData="foo2|bar2">foo2</option>

answered Nov 27, 2019 at 12:04

Foram Shah

1151 silver badge4 bronze badges

Comments

Nick Weimer · Accepted Answer · 2020-03-16 22:38:41Z

0

I'd like to just add, that if you are willing to use radio buttons instead of a dropdown selection, the following worked for me:

<label>Email:</label>


 {% for email in emails %}
 <input type="radio" id="{{ email.email_address }}" name="emaildata" value="{{ email.email_address }}">
 <label for="{{ email.email_address }}">{{ email.email_address }} </label>
 {% empty %}
 {% endfor %}

Then in your views, you still retrieve data same as above:

email = request.POST.get("emaildata","")

Good Luck!

answered Mar 16, 2020 at 22:38

Nick Weimer

6377 silver badges8 bronze badges

Collectives™ on Stack Overflow

Passing hidden input fields in HTML Select option

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related