Pass value of multiple input fields in jQuery ajax?

Question

I have multiple input fields, like

  <p>Filter by gender</p>
  <select class="filter-users">
     <option value="female">Female</option>
     <option value="male">Male</option>
   </select>
   <p>Filter by city</p>
      <input class="filter-users" type="text" name="city">

How to create GET request url with these one or all of these inputs

$.ajax({
  url: "/users/filter",
  type: "get", 
  data: { 
    city: city, 
    gender: gender
  },
  success: function(response) {

  }
});

How to make ajax request every time on of the filter inputs changed? For example send new request when on option change, or text input was entered? So what I am trying to explain is, there is no submit button. Requests needs to be made everytime one of these fields changes

I don't get the question, you're already passing in both of your input values — DNKROZ
– DNKROZ, Commented Aug 22, 2017 at 15:49
do you want to get the value from your "ddl", and then pass it? — Jephren Naicker
– Jephren Naicker, Commented Aug 22, 2017 at 15:50

cn0047 · Accepted Answer · 2017-08-23 05:39:15Z

1

You can use serializeArray, like this:

$.ajax({
  url: "/users/filter",
  type: "get", 
  data: $("form").serializeArray(),
  success: function(response) {
  }
});

Or you also can use serialize in case you don't need JSON but URL-encoded parameters.

edited Aug 23, 2017 at 5:39

answered Aug 22, 2017 at 15:51

cn0047

17.2k7 gold badges61 silver badges75 bronze badges

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

Comments

Gautam Rai · Accepted Answer · 2017-08-23 05:46:34Z

0

for this "How to make ajax request every time on of the filter inputs changed"-

$('input.filter-users').on('change', function(){
   $.ajax({
     url: "/users/filter",
     type: "get", 
    data: $("form").serializeArray(),
    success: function(response) {
       }
   });
});

answered Aug 23, 2017 at 5:46

Gautam Rai

2,5152 gold badges23 silver badges33 bronze badges

1 Comment

Gautam Rai Over a year ago

@Amit for select use as $('.filter-users').on('change', function(){., the above answer for input type field,

Collectives™ on Stack Overflow

Pass value of multiple input fields in jQuery ajax?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related