Ajax post multiple data

Question

How to post multiple data using ajax? i want to post input value and attr both. Here is an example :

$('.input[type=\'text\']').keyup(function(){        
  $.ajax({
    type: 'POST',
    url: 'index.php',
    data: $('.input[type=\'text\']'),
    dataType: 'json',
    success: function(json) {
      alert('done');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" attr="yes" />

score 1 · Accepted Answer · answered Aug 02 '16 at 09:01

As documented, "data" has mixed type (Type: PlainObject or String or Array). So you can assign array or object to data property.

Try following;

$('.input[type=\'text\']').keyup(function(){       
    var dataToPost = {
                    value: $(this).attr('attr'),
                    attr: $(this).val()
                  }; 
            $.ajax({
                  type: 'POST',
                  url: 'index.php',
                  data: dataToPost,
                  dataType: 'json',
                  success: function(json) {
                              alert('done');
                    }
            });
  });

score 0 · Answer 2 · answered Aug 02 '16 at 09:00

 $('.input[type=\'text\']').keyup(function(){
 var obj = {};
 obj.val = $(this).val();
 obj.attr = $(this).attr('attr');
 $.ajax({
              type: 'POST',
              url: 'index.php',
              data: obj,
              dataType: 'json',
              success: function(json) {
                          alert('done');
                }
        });
});

score 0 · Answer 3 · answered Aug 02 '16 at 09:01

$('.input[type=\'text\']').keyup(function(){
            var data = new FormData();
            $el = $('.input[type=\'text\']');
            data.append('value', $el.val());
            data.append('attr', $el.attr('attr'));
            $.ajax({
            type: 'POST',
            url: 'index.php',
            data: data,
            dataType: 'json',
         success: function(json) {
                              alert('done');
                    }
            });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" attr="yes" />

Ajax post multiple data

3 Answers3