CODEWITHSUNDEEP
jqueryautocomplete
Ros
Ros

Reputation: 634

Jquery Autocomplete - add selected values to hidden field

I'm using Jquery Autocomplete based on: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/. I am able to select a value from the textbox and add it to a list as in the example. Is it possible to add the selected value to a hidden field? For example <input type='hidden' value='value 1,value 2, value 3' name="SelectedValue" id="SelectedValue"/>

Upvotes: 1

Views: 7462

Answers (3)

bart
bart

Reputation: 15298

Don't re-invent the wheel. Just use this piece of jQuery. For each autocomplete input field it creates a hidden field using the original input field's name. In that hidden field the autocompleted key is stored. On submit the keys will be submitted. You don't have to change anything to your backend.

http://www.petefreitag.com/item/756.cfm

$('input.YourClassName').each(function() {
    var autoCompelteElement = this;
    var formElementName = $(this).attr('name');
    var hiddenElementID  = formElementName + '_autocomplete_hidden';
    /* change name of orig input */
    $(this).attr('name', formElementName + '_autocomplete_label');
    /* create new hidden input with name of orig input */
    $(this).after("<input type=\"hidden\" name=\"" + formElementName + "\" id=\"" + hiddenElementID + "\" />");
    $(this).autocomplete({source:'employee-search-json.cfm', 
        select: function(event, ui) {
            var selectedObj = ui.item;
            $(autoCompelteElement).val(selectedObj.label);
            $('#'+hiddenElementID).val(selectedObj.value);
            return false;
        }
    });
});

Upvotes: 0

cofiem
cofiem

Reputation: 1414

To add more than one value to a hidden field:

var hdnValue = $('hdnFieldName').val();
$('hdnFieldName').val(hdnValue +','+selectedValue);

Have a look at string.join as well.

Upvotes: 1

vikmalhotra
vikmalhotra

Reputation: 10071

$('input#suggest').result(function(event, data, formatted) {
   $("#SelectedValue").val( $("#SelectedValue").val() + "," data );
});

Look over autocomplete documentation for details

Upvotes: 1

Related Questions