how is it possible to send data related to each button to php by using ajax?

Question

I know that a code like this is used for sending data to php file without refreshing by using ajax, but this code only works for one form with some inputs, my problem is: I have a web page that in it there are 5 buttons and each button is related to different input, I want to send data with ajax without refreshing,for example when I click on button 1, it sends its own inputs and when I click button n it sends its own data, how can I do that?

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

    $('form').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'led.php',
        data: $('form').serialize(),
        success: function () {
        }
      });

    });

  });
   </script>
 </head>
 <body>
    <form>
      <input type='hidden' name="key" value="on">
      <input name="key" type="submit" value="ON">
    </form>
  </body>
</html>

possible duplicate of [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — Alex Kulinkovich, Dec 28 '14 at 11:47

score 2 · Accepted Answer · answered Dec 28 '14 at 13:29

" but this code only works for one form with some inputs "

Technically speaking, that will work with any form on the page. (as you are targeting the form tag)

If you want to target mutliple buttons and process them the same way add a class to them.

If you want to target seperate elements individually, add an id.

You then target classes as $('.classname') and ids as $('#id') notice the . and # (as with css selectors)

SEE LIVE EXAMPLE here

$('.submit_to_a').parent('form').on('submit', function(e) {

  e.preventDefault();

  $.ajax({
    type: 'post',
    url: 'a.php',
    data: $(this).serialize(),
    success: function() {}
  });

});


$('#gotob').parent('form').on('submit', function(e) {

  e.preventDefault();

  $.ajax({
    type: 'post',
    url: 'b.php',
    data: $(this).serialize(),
    success: function() {}
  });

});

$('#gotoc').parent('form').on('submit', function(e) {

  e.preventDefault();

  $.ajax({
    type: 'post',
    url: 'c.php',
    data: $(this).serialize(),
    success: function() {}
  });

});

<form action="a.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" class="submit_to_a">goes to a</button>
</form>
<form action="a.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" class="submit_to_a">goes to a</button>
</form>
<form action="b.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" id="gotob">goes to b</button>
</form>
<form action="c.php">
  <input type="text">
  <input type="text">
  <input type="text">
  <button type="submit" id="gotoc">goes to c</button>
</form>

score 1 · Answer 2 · answered Dec 28 '14 at 13:17

I think you have different form and form elements for each buttons. If so then this might help you.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
 $(function () {
    $('form').on('submit', function (e) {

      e.preventDefault();

      var formdata=$(this).serialize();

      $.ajax({
        type: 'post',
        url: 'led.php',
        data: formdata,
        success: function () {
        }
      });
    });
  });
   </script>
 </head>
 <body>
    <form>
      <input type='hidden' name="key" value="on">
      <input name="key" type="submit" value="ON">
    </form>
    <form>
      <input type='hidden' name="anotherkey" value="on">
      <input name="key" type="submit" value="ON">
    </form>
  </body>
</html>

This will serialize the form element which you have clicked and send it to your PHP code.

score 0 · Answer 3 · edited May 23 '17 at 11:50

You can find out what button was clicked and decide which data to send: (this is copied form here)

$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

But, I highly recommend using a different form for each set of data.

score 0 · Answer 4 · answered Dec 28 '14 at 11:46

0

You can give a unique id for each form you have, and your jquery will look like

$('#form_id').submit(function(e) {
    e.preventDefault();
    #your code here
});

answered Dec 28 '14 at 11:46

lolbas

794
1
9
34

score 0 · Answer 5 · answered Dec 28 '14 at 11:49

0

$('form').on('submit', function (e) {

      e.preventDefault();
      $inputs = $(this).serialize(),

      $.ajax({
        type: 'post',
        url: 'led.php',
        data: $inputs,
        success: function () {
        }
      });

    });

answered Dec 28 '14 at 11:49

JC Sama

2,214
1
13
13

Indra Kumar S · Answer 6 · 2014-12-28T11:55:55.447

0

First of all, You have two inputs with same name "key". Always Give it a different names. And input type submit does not require a name

Give an id to each form. Then use it like this

$('#form_id').submit(function(e) {
    e.preventDefault();
   Your code here
});

edited Dec 28 '14 at 11:55

answered Dec 28 '14 at 11:50

Indra Kumar S

2,818
2
16
27

how is it possible to send data related to each button to php by using ajax?

6 Answers6