CODEWITHSUNDEEP
javascriptjquery
Lelly
Lelly

Reputation: 968

jquery - add/remove/change part of the value of an input text

I'm using this plugin: http://loopj.com/jquery-tokeninput/ to do a suggestion field, where the user can start typing, choose the item they want, and they can add multiple suggestion.

this plugin have a onAdd and a onDelete callback.

What I want to do is, onAdd, I want to store the element id inside the value of an hidden input. They can add multiple item, so the input value end up like: 123,145,875,968

This is ok. Now where I need help, is with the OnDelete event. I need to update the input value to reflect the fact that they deleted an item.

Here's the code 

onAdd: function (item) {
   var value = $("#itemID").val();
   $("#itemID").val(value + item.id + ',');
},
onDelete: function (item) {
   ???? In word: Remove that specific ID from the input value, but keep the other value
}

PS. Im storing these IDs in an input to be able to easily get a list of my values for an ajax call later. Now, Im not sure if that's the best way of doing it, but yeah, that's what I thought about as a "new" programmer :)

Thanks in advance

Upvotes: 1

Views: 2070

Answers (3)

Austin Greco
Austin Greco

Reputation: 33544

Updated

Looking at that plugins documentation:

selector.tokenInput("get"); Gets the array of selected tokens from the tokeninput (each item being an object of the kind {id: x, name: y}).

try something like this:

// do this at time of submit()
var tokens = $('#your-plugin-element-id').tokenInput( 'get' );
var output = [];
$.each( tokens, function( i, el ) {
  output.push( el.id );
});
var outputString = output.join( ',' );

Then you won't have to keep track in a separate hidden input.

Even cleaner, but maybe harder to understand using map()

var tokens = $('#your-plugin-element-id').tokenInput( 'get' );
var outputString = $.map( tokens, function( el ) { return el.id; } ).join( ',' );

-

Old

this should work:

var itemList = $('#itemID').val().split(',');
for( var i=0 ; i<itemList.length ; i++ ) {
  if( itemList[i] == item.id ) {
    itemList.splice( i, 1 );
    break;
  }
}
$('#itemID').val( itemList.join( ',' ) );

Edit: this was a quick fix to your existing code, but serializing at submission time would be better as said in the other comment

Upvotes: 1

Osama Ahmad
Osama Ahmad

Reputation: 235

check this code 

                onDelete: function (item) {
                var idd  = item.id;
                alert (idd);
                var value = $("#itemID").val();  
                var x = value.replace( idd+ ',', "" );
                $("#itemID").val(x);
                }

itemID is the hidden input

Upvotes: 1

JonTheNerd
JonTheNerd

Reputation: 81

I don't believe you need to be storing the overall value of the suggestion field as items are added or removed. Whenever you're ready to do you ajax call, get the current value of the suggestion field by using:

selector.tokenInput("get");

This is documented on the jQuery Tokeninput page you referenced in the "Methods" section. This will get you the JSON representation of the values, which will look something like this:

[{id: 0, name: "something"},{id: 1, name: "something else"}]

Then you can just loop through it, grab the ids (if that's all you want), and concatenate them into a string and submit them via AJAX.

Serialize when you have to. If you're going to do additional work on data, keep it in the format that is easiest to do the work until you need to serialize it.

Upvotes: 1

Related Questions