Ajax submit two pieces of information to php file

Question

<button id='0' value="23" name='process'>Click 0</button>
<button id='1' value="45" name='process'>Click 1</button>
<button id='2' value="66" name='process'>Click 2</button>
<button id='3' value="88" name='process'>Click 3</button>
<button id='4' value="92" name='process'>Click 4</button>

$('#id').click(function(){
    $.ajax({
      url: "test.php",
      data: {0:123},
      processData: false,
      contentType: 'application/json'
    });
});

I'm not very familiar with ajax but I want to use it to avoid reloading the page which is currently what is happening with the php I'm using. I need to send the data through ajax upon clicking one of the buttons. Each button needs to send a unique key (the id) and also a simple numeric value.

Not sure how this is done with Ajax exactly with respect to sending through unique pieces of information per click and how to trigger different results for different buttons.

Answer 1

Try something like this:

<button data-id='0' value="23" name='process'>Click 0</button>
<button data-id='1' value="45" name='process'>Click 1</button>
<button data-id='2' value="66" name='process'>Click 2</button>
<button data-id='3' value="88" name='process'>Click 3</button>
<button data-id='4' value="92" name='process'>Click 4</button>

$('button').on("click", function() {
    $btn = $(this),
    id = $btn.data("id"),
    value = $btn.val();

    $.ajax({
      url: "test.php",
      data: {
          id: id,
          value: value
      },
      processData: false,
      contentType: 'application/json',
      success: function(data) {
          console.log('Request successfull!', data);
      }
    });
});

1. $('button').on("click" this will set the event to all buttons. Use on() instead of click(). You can also set a class for those buttons and select them by it, in case you have other buttons in your document that doens't have to perform this action;

2. Use data- attributes to store any custom data into your elements, don't use default or unexistent attributes for that. Then you can get them with data();

3. Send them to as an object in the ajax request as made in data parameter.

4. Add success, error or complete callbacks to get the result of your request as soon it finishes.

Update: Final Ajax request

$.ajax({
    type: "post",
    url: "test.php",
    data: {
        id: id,
        value: value
    },
    processData: false,
    success: function(data) {
        console.log('Request successfull!', data);
    }
});

Answer 2

See the code below. I've commented out the ajax call so that you can see the console log without error. Uncomment it when you use it and remove the console.log() if you do not need it.

$('button').on('click', function(){
  
  // First we get the values from the button that's clicked
  var val1 = $(this).attr('id');
  var val2 = $(this).val();
  
  //We then convert the values into JSON format
  var data = {"id":val1, "val":val2};
  
   console.log(data);

  //$.ajax({    
    //url: "test.php",
    //data: data,
    //dataType: "json",
    //processData: false,
    //contentType: 'application/json'
  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='0' value="23" name='process'>Click 0</button>
<button id='1' value="45" name='process'>Click 1</button>
<button id='2' value="66" name='process'>Click 2</button>
<button id='3' value="88" name='process'>Click 3</button>
<button id='4' value="92" name='process'>Click 4</button>

Answer 3

    <button id='23' class='process' name='process'>Click 0</button>
    <button id='45' class='process'  name='process'>Click 1</button>
    <button id='66' class='process'  name='process'>Click 2</button>
    <button id='88' class='process' name='process'>Click 3</button>
    <button id='92' class='process'  name='process'>Click 4</button>

    $('.process').click(function(){
        var uniqueVal = $(this).attr('id');
        $.ajax({
          url: "test.php",
          data: {'inputName':uniqueVal},
          type: 'POST',
           contentType: 'application/json; charset=utf-8',
          success: function (response) {
            //do what ever you want here
        },
        error: function () {
            alert("error");
        }

        });
    });

   In test.php

    <?php
       //access as follows
        echo $_POST['inputName'];

    ?>