CODEWITHSUNDEEP
htmlhiddenhtml-select
Andy Birchall
Andy Birchall

Reputation: 311

Passing hidden input fields in HTML Select option

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

Answers (5)

Nick Weimer
Nick Weimer

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

Foram Shah
Foram Shah

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

That Realty Programmer Guy
That Realty Programmer Guy

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

Jeff Widmer
Jeff Widmer

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

Dave Anderson
Dave Anderson

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

Related Questions