Twitter API Question posted in
The official Twitter API documentation can be found here.

To get the data attribute if a checkbox is checked – Twitter API

I have made a form to get value and data-cat from that form if checkbox is checked. Thanks to stackoverflow, I have achieve to get the values of form but cannot get a satisfying answer to achieve data attribute from jquery.

Html:

<div class="price-col-title-wrap">
                <h4>Immer enthalten</h4>
                <!-- <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3> -->
                  <input type="checkbox" id="c1" class="immer" value="50" data-cat="Installation WordPress" name="cc" onclick="return false" checked/>
                  <label for="c1"><span> </span> Installation WordPress</label> <br/>

                  <input type="checkbox" id="c2" class="immer" value="50" data-cat="Basis SEO und Dynamic Sitemap" name="cc"/>
                  <label for="c2"><span> </span>  Basis SEO und Dynamic Sitemap</label> <br/>

                  <input type="checkbox" id="c3" class="immer" value="50" data-cat="Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil" name="cc"/>
                  <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br/>

                  <input type="checkbox" id="c4" class="immer" value="50" data-cat="Seite für Datenschutz und Impressum" name="cc"/>
                  <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br/>

                  <input type="checkbox" id="c5" class="immer" value="50" data-cat="Social Media Follow (FB, G+, Twitter)" name="cc"/>
                  <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br/>

                  <input type="checkbox" id="c6" class="immer" value="50" data-cat="Kontaktformular + Google Map API" name="cc"/>
                  <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br/>
                  <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3>
                    <input id="input" type="text" value="0"/>
                    <textarea id="t"></textarea>
          </div>

I have a jquery to achieve the values from every checkbox but there’s another attribute data-cat which contain a unique name for each checkbox.
My problem is to list the checked data-cat in the textarea whose id=t

upto now the js I am using is:

var inputs = document.getElementsByClassName('immer'),
        total  = document.getElementById('immer-total');
 for (var i=0; i < inputs.length; i++) {
        inputs[i].onchange = function() {
      var add = this.value * (this.checked ? 1 : -1);
           total.innerHTML = parseFloat(total.innerHTML) + add
             var new_total = parseFloat(document.getElementById('input').value);
  console.log(new_total);
    document.getElementById('input').value=new_total + add

        }
    }

This is used to get the values from every checkbox

And after lots of query in stackoverflow I get a js to get the attribute

function updateTextArea() {     
     var cats = $('.immer').map(function(){
return this.dataset.cat
// or $(this).attr('data-cat')
}).get()
 }


 $(function() {
   $('#price-col-title-wrap input').click(updateTextArea);
   updateTextArea();
  });

But it didn’t help me. How can I get the data-cat in that textarea.

you can view it on my fiddle

Tags:

2

Answers


  1. 0

    You can simply do:-

    function updateTextArea() {
  var cats = $('.immer').map(function() {
    return $(this).data('cat');
  }).get();

  console.log(cats);
}

    Returns in console:-

    ["Installation WordPress", "Basis SEO und Dynamic Sitemap", "Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil", "Seite für Datenschutz und Impressum", "Social Media Follow (FB, G+, Twitter)", "Kontaktformular + Google Map API"]

    To get the checked checbox data in textarea, you can do:

    $('.immer').change(function() {
  $('#t').val(this.checked ? $(this).data('cat') : '');
});
    Login or Signup to reply.
  2. 0

    As defined at jQuery data docs, data- attribute is not retrieved, nut you can get it with .data() function

    Ex.

    $(this).data('cat')

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search