Reputation: 311
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
Upvotes: 14
Views: 88076
Reputation: 637
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!
Upvotes: 0
Reputation: 115
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>
Upvotes: 2
Reputation: 1599
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.
Upvotes: 3
Reputation: 4876
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
Upvotes: 19
Reputation: 12324
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.
Upvotes: 3