How to pass multiple values with ajax?

Question

I'm looking to pass multiple values with ajax.

My Code:

$(".ajax-button").change(function(event){

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        $.ajax({
            url:'{{action("WebshopController@refreshCheckout")}}' ,
            data: {
                frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()
            },
            method: 'GET'
        }).done(function(response){
            console.log(response);
        });
    });

As you can see im trying to send a frame and a color:

data: {
                frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()
            },

However it does not combine these 2, when I click the checkbox for frame it only sends the frame: and when I click checkbox for color is only sends the color. as seen in the printscreen below.

I want it to build the URL like: refreshCheckout?color=Silver&frame=h35

How do I achieve this?

Help is appreciated.

Please show the HTML too

mplungjan
– mplungjan

2017-04-24 14:02:02 +00:00
Commented Apr 24, 2017 at 14:02 — mplungjan
– mplungjan, Commented Apr 24, 2017 at 14:02

charlietfl · Accepted Answer · 2017-04-24 14:12:12Z

2

If a value is undefined...jQuery won't include that property. You can't get a value from a selector that doesn't exist (not checked)

You probably want to make sure you have both before submitting:

$(".ajax-button").change(function(event) {

  var $frameInput = $('input.frame:checked'),
    $colorInput = $('input.color:checked');

  if (!($frameInput.length && $colorInput.length)) {

    alert('Need both color and frame');

  } else {

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    });

    $.ajax({
      url: '{{action("WebshopController@refreshCheckout")}}',
      data: {
        frame: $frameInput.val(),
        color: $colorInput.val()
      },
      method: 'GET'
    }).done(function(response) {
      console.log(response);
    });
  }
});

answered Apr 24, 2017 at 14:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:33:15Z

0

EDIT: The answer below should be the accepted one.

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Apr 24, 2017 at 14:06

Felix Haeberle

1,61414 silver badges21 bronze badges

7 Comments

Rubberduck1337106092 Over a year ago

Allright, now it works. but now it doesn't see which value is check for which i used the :checked selector

Felix Haeberle Over a year ago

You normally check it before you specify the values for the ajax data. So on this one you would check if they are set and then for example get the value in two separated steps (var).

Rubberduck1337106092 Over a year ago

Allright i think i have to figure out a different way to check which value is checked. atleast the request is working now. thanks for that. i'll approve your answer.

charlietfl Over a year ago

makes no difference if you assign to variable first or not , nothing wrong with op approach to passing value to object.

charlietfl Over a year ago

now you are checking if($(selector)) which will always be truthy...an object is returned regardless of matching elements or not. Won't work that way

|

Dhaval Pankhaniya · Accepted Answer · 2017-04-24 14:05:19Z

0

you can also send data like

$(".ajax-button").change(function(event){

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });

    $.ajax({
        url:'{{action("WebshopController@refreshCheckout")}}/?frame=$("input.frame:checked").val()&color=$("input.color:checked").val()' ,
        method: 'GET'
    }).done(function(response){
        console.log(response);
    });
});

answered Apr 24, 2017 at 14:05

Dhaval Pankhaniya

1,9961 gold badge16 silver badges29 bronze badges

1 Comment

charlietfl Over a year ago

this won't evaluate $("input.frame:checked").val() inside a string... you have to concatenate to do that

bahek2462774 · Accepted Answer · 2017-04-24 14:10:16Z

0

I suppose following expressions return nothing

frame: $('input.frame:checked').val(),
                color: $('input.color:checked').val()

Check it before the request. It will work if you pass some data there

data: {
                frame: 'foo',
                color: 'bar'
            },

answered Apr 24, 2017 at 14:10

bahek2462774

6647 silver badges12 bronze badges

Comments

Pango · Accepted Answer · 2017-04-24 14:55:39Z

You didn't post your HTML code, so it's hard to tell what exactly is broken. However, simply to illustrate that the current accepted answer is probably not what you are looking for and that your code is correct except that you are likely not triggering the event when you really want to (i.e. when both fields are set) as suggested in the answer by charlietfl.

https://jsfiddle.net/b1g1pmnp/

HTML:

  <p>
  Color
  </p>
  <input type="radio" class="color" value="red" name="color">
  red
  <input type="radio" class="color" value="orange" name="color">
  orange
  <input type="radio" class="color" value="purple" name="color">
  purple
  <input type="radio" class="color" value="green" name="color">
  green

  <p>
  Frame
  </p>
  <input type="radio" class="frame" value="silver" name="frame">
  silver
  <input type="radio" class="frame" value="gold" name="frame">
  gold
  <input type="radio" class="frame" value="tan" name="frame">
  tan
  <input type="radio" class="frame" value="black" name="frame">
  black

  <p><button class="ajax-button">Button</button></p>

JS:

    $(".ajax-button").click(function(event) {
     // OP code         
     var color = $('input.color:checked').val();
     var frame = $('input.frame:checked').val();

     console.log("Current OP Code Results: ");
     console.log(color);
     console.log(frame);

     // Accepted code
      var data1 = $('input.color').val();
      var data2 = $('input.frame').val();

      console.log("Current Accepted Answer Results: ");
      console.log(data1);
      console.log(data2);

      return false;
    });

You can play around with that and see what you get for various cases.

Collectives™ on Stack Overflow

How to pass multiple values with ajax?

5 Answers 5

Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related