how to pass multiple parameter using same function in ajax

Question

Here is my function I need to pass the multiple parameter dynamically with using same function. Is that possible to send the multiple parameter in ajax ?

function search_filter(getsearch){

    var headercolumn = getsearch.id;
    var columnvalue = getsearch.value;

      $.ajax({
      url: 'some_ajax.php',
      type: 'POST',
      dataType: 'html',
      data: {
          'headercolumn': headercolumn,
          'columnvalue': columnvalue
      },
      success: function(data, textStatus, xhr) {
          console.log('success');
      }
  });
}

For now parameters are sending something like this, I mean one by one.

data: {
    'headercolumn': server,
    'columnvalue': givenvlue
},

Expected Output

I need to pass multiple parameters while calling the same function "search_filter"

data: {
    'headercolumn': server,media_server,eact_server
    'columnvalue': servervalue,media_servevalue,eact_servervalue
},

Hope you understand my needs. :)

You can pass an array i.e. 'headercolumn': [server,media_server,eact_server] — Satpal
– Satpal, Commented Dec 21, 2016 at 9:49
headercolumn and columnvalue are called parameters... Even in your expected output you are passing 2 parameters itself.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 21, 2016 at 9:49
how to do that . Im using keyup function for all text box. can you pls give ne a demo ? @Satpal — Question User
– Question User, Commented Dec 21, 2016 at 9:49

Ties · Accepted Answer · 2016-12-21 09:50:03Z

1

Just use an array:

data: {
    'headercolumn': [server,media_server,eact_server]
    'columnvalue': [servervalue,media_servevalue,eact_servervalue]
}

answered Dec 21, 2016 at 9:50

Ties

8157 silver badges14 bronze badges

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

Comments

keerti · Accepted Answer · 2016-12-21 09:53:40Z

1

I think that array match your needs

 data: {
        'headercolumn': [server, media_server, eact_server],
        'columnvalue': [servervalue, media_servevalue, eact_servervalue]
    }

edited Dec 21, 2016 at 9:53

keerti

4652 silver badges13 bronze badges

answered Dec 21, 2016 at 9:51

Dzhakhar Ukhaev

3051 silver badge12 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-12-21 10:03:11Z

1

Looks like you are trying to post all your input element's id and value when ever one of the input value changes..

I would recommend you to remove the onkeypress event handlers in the HTML elements, But rather add the even listener using Jquery. Keeping the code separate helps in better maintenance. Having said this you can use the below code.

  $(function() { // wait for document ready event
    $('input').on('keyup', function() {  // bind keyup event to all inputs
      var headerArray = []; //have empty arrays
      var columnArray = [];

      $('input').each(function() {  //fill array values by looping all input elements
        headerArray.push($(this).attr('id')); //fill id's for header
        columnArray.push($(this).val());      //fill values for columns
      });

      //demo purpose
      console.log(headerArray);
      console.log(columnArray);
      //demo ends 
 
      $.ajax({
        url: 'some_ajax.php',
        type: 'POST',
        dataType: 'html',
        data: {
          'headercolumn': headerArray,
          'columnvalue': columnArray
        },
        success: function(data, textStatus, xhr) {
          console.log('success');
        }
      });

    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input type="text" name="server" class="search_server" style="width: 94%" id="search_server">
</p>

<p>
  <input type="text" name="media_server" class="media_server" style="width: 94%" id="media_server">
</p>

<p>
  <input type="text" name="eact_server" class="eact_server" style="width: 94%" id="eact_server">
</p>

edited Dec 21, 2016 at 10:03

answered Dec 21, 2016 at 10:01

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

2 Comments

Rajshekar Reddy Over a year ago

@QuestionUser didn't get you

Rajshekar Reddy Over a year ago

@QuestionUser what I gave you was a suggestion, If you want to use your function search_filter itself then just call this function inside of $('input').on('keyup', function() { also move all the code within this event handler to your function.

Mir Gulam Sarwar · Accepted Answer · 2016-12-21 10:22:11Z

0

Fiddle I think your are trying to do something like

 $(function() {
    $('input').on('change', function() {
      var dataToSend={};
      $('input').each(function() {  
      dataToSend[$(this).attr('id')]=$(this).val();// create your object
      });

      $.ajax({
        url: 'some_ajax.php',
        type: 'POST',
        dataType: 'html',
        data:dataToSend,
        success: function(data, textStatus, xhr) {
          console.log('success');
        }
      });

    });

  });

edited Dec 21, 2016 at 10:22

answered Dec 21, 2016 at 10:06

Mir Gulam Sarwar

2,6482 gold badges27 silver badges39 bronze badges

Collectives™ on Stack Overflow

how to pass multiple parameter using same function in ajax

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related