CODEWITHSUNDEEP
javascriptjqueryajax
Question User
Question User

Reputation: 2293

how to pass multiple parameter using same function in ajax

Fiddle Link

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. :)

Upvotes: 2

Views: 109

Answers (4)

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

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');
        }
      });

    });

  });

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

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>

Upvotes: 1

Dzhakhar Ukhaev
Dzhakhar Ukhaev

Reputation: 305

I think that array match your needs

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

Upvotes: 1

Ties
Ties

Reputation: 805

Just use an array:

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

Upvotes: 1

Related Questions