How to send a object and a variable on Ajax

Question

When I try this it works perfectly:

$.ajax({
  url: 'index.php?route=product/product/quoteProduct',
  type: 'post',
  data: $('#product input[type=\'radio\']:checked, #product select),
  dataType: 'json',
  success: function(json) {
    // ...
  }
});

Now I want to send a variable with the object $('#product input[type=\'radio\']:checked, #product select) . I tried this:

$.ajax({
  url: 'index.php?route=product/product/quote',
  type: 'post',
  data: {
    quantity: quantity, 
    option: $('#product input[type=\'radio\']:checked, #product select')
  },
  dataType: 'json',
  success: function(json) {
    // ...
  }
});

However, my console warns:

TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

Answer 1

The issue is because you're sending jQuery object in an AJAX request. Given the comment under the question you state that you want to send their values only, which can be achieved using map() :

 $.ajax({ url: 'index.php?route=product/product/quote', type: 'post', data: { quantity: quantity, option: $('#product:radio:checked, #product select').map((i, el) => el.value).get(), }, dataType: 'json', success: function(json) { //... } });

Note that you can alternate " and ' quotes in order to avoid having to escape then in a sequence. You can also use :radio in place of input[type="radio"] .