Materialize: Cannot get data from the chips input tag

[msrshahrukh100]

I am unable to get data from the chips autocomplete text box. Earlier when I used materialize css, it used to send me a comma separated values of the chips.

I have included the input tags as stated in the docs as -

<div class="chips chips-autocomplete col s4 offset-s3">
    <input placeholder="You Emotions" id="emotiontags" type="text" name="emotiontags">
</div>

I used a simple jquery function to verify this
Below I have just entered the text "my values here" to the input tag and getting the value of the input tag shows its value as expected.

But when I insert the text in the form of chips and then do the same thing it shows me null values.

I cannot get the data I expect.

[acburst]

This is on 1.0 alpha?

[msrshahrukh100]

it is on 1.0.0-alpha.2.

[acburst]

How exactly are you getting the data? Can you post a more complete code example?

[msrshahrukh100]

in my html I have added

<div class="chips chips-autocomplete col s4 offset-s3">
    <input placeholder="You Emotions" id="emotiontags" type="text" 
    name="emotiontags">
</div>

<button class="btn waves-effect waves-light" id="showvalues">
   Show values
   <i class="material-icons right">send</i>
</button>

I am sending the data via submitting it in a form i.e a post request. But the data isn't coming through. I verified it using jquery as

$('#showvalues').on('click', function(){
    alert($('#emotiontags').val())   
})

But when I entered normal text the value was there in the alert dialogue box, but once I added it as chips, it was null, whose screenshot I have attached above

[ppottiez]

Hi @msrshahrukh100
if you want to get value of a chips element in materializecss, you have to use the method .material_chip('data') and not val()
You can try on the exemple below :
https://jsfiddle.net/ppottiez/k1eL8jmn/

[msrshahrukh100]

Hi @ppottiez
thanks for your answer, Ok we can access it using .material_chip('data'), but my main objective was to submit the data through a form. How should I do this?

[acburst]

material_chip is not the latest version. In the latest alpha version, you can do:

var instance = M.Carousel.getInstance(elem);
instance.chipsData

that will return an array of the current chips data.

[inchrvndr]

@acburst : This still did not work.

var elem = document.getElementsByClassName('attributes'); var instance = M.Carousel.getInstance(elem); console.log(instance.chipsData);

index.js:178 Uncaught TypeError: Cannot read property 'chipsData' of undefined
at HTMLSelectElement. (index.js:178)
at HTMLSelectElement.dispatch (jquery.min.js:2)
at HTMLSelectElement.y.handle (jquery.min.js:2)
at HTMLSelectElement. (materialize.min.js:6)
at o (materialize.min.js:6)
at n.each (materialize.min.js:6)
at n.trigger (materialize.min.js:6)
at n.value (materialize.min.js:6)

[aarmel-sw]

var elems = document.querySelectorAll('.chips')
    var instances = M.Chips.init(elems, {
         placeholder: 'Enter burgers',
         name: 'burgers',
         autocompleteOptions: {
           data: {
             'cheese': null,
             'bacon': null,
             'chicken': null,
             'frog': null,
             'croc': null,
             'rat': null,
             'snail': null,
             'earth worm': null
           },
           limit: 5,
           minLength: 1
         }
    });`

  document.getElementById("gogogadget").addEventListener("click", function(event){
      event.preventDefault()
      console.error(instances[0].chipsData)
    });

<form>
<div class="row">
    <div class="col s10">
      <div class="chips chips-autocomplete"></div>
    </div>
    <div class="col s2">
      <button id="gogogadget" class="btn waves-effect waves-light" type="submit" name="action">Burgers</button>
    </div>
  </div>
</form>

[inchrvndr]

@aarmel-sw : Hi,
I don't see the instance return the chipsData in this case

<div class="chips chips-autocomplete">
  <div class="chip" tabindex="0">a<i class="material-icons close">close</i></div>
  <div class="chip" tabindex="0">b<i class="material-icons close">close</i></div>
  <div class="chip" tabindex="0">c<i class="material-icons close">close</i></div>
  <div class="chip" tabindex="0">g<i class="material-icons close">close</i></div>
  <div class="chip" tabindex="0">d<i class="material-icons close">close</i></div>
  <div class="chip" tabindex="0">z<i class="material-icons close">close</i></div>
</div>

[garvitpatel196]

To get data from Materializecss chips use below code.

$('#button').click(function(){
     alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});

[Ri-Dearg]

I can confirm this last comment did the trick, prints key: value pairs