CODEWITHSUNDEEP
javascriptphpjqueryajax
Ali
Ali

Reputation: 632

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

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>

Upvotes: 1

Views: 781

Answers (6)

Kiee
Kiee

Reputation: 10771

" 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>

Upvotes: 2

Prasad G K
Prasad G K

Reputation: 136

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.

Upvotes: 1

Indra Kumar S
Indra Kumar S

Reputation: 2934

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

Upvotes: 0

JC Sama
JC Sama

Reputation: 2204

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

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

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

    });

Upvotes: 0

lolbas
lolbas

Reputation: 794

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

Upvotes: 0

nima
nima

Reputation: 6733

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.

Upvotes: 0

Related Questions