14

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

2
  • 1
    Clarify. Give an example of what you want.
    – EFraim
    Jul 23, 2009 at 8:27
  • I've clarified my question. Sorry the incorrectly formatted HTML code elements weren't being displayed before. Thanks Mar 21, 2012 at 13:46

5 Answers 5

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    
3
  • 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! Jul 23, 2009 at 16:17
  • try storing otherdata to the option id
    – h3n
    Dec 15, 2009 at 2:04
  • 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 ? May 4, 2016 at 9:11
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.

1
  • Thanks Dave, I considered Javascript but decided against it in the end. I want to use a purely HTML solution. Jul 23, 2009 at 16:11
3

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.

1
  • 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! Aug 25, 2014 at 13:55
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>

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.