Question

I have a form with several submit buttons.
I’m trying to use jQuery so it could take values on “submit” function and operate them.

i’m not good at jQuery ..so for now i only come to this…

<form id="buttons">
    <input type="submit" id="light1" value="OFF" />
    <input type="submit" id="light2" value="ON" />
    <input type="submit" id="light3" value="ON" />
    <input type="submit" id="light4" value="OFF" />
</form>

<script>
$('#buttons').submit(function() {
 $.get("data.php", { light1: "ON"} );
  return false;
});
</script>

So the thing is how can i instead of this

  $.get("data.php", { light1: "ON"} );

some how on submit take the id of button and a value ?
So it could be like

 $.get("data.php", { *ID OF A BUTTON*: "*VALUE OF BUTTON*"} );

…and operate it?

Thanks!

P.S the values of buttons are refreshing with php and jQuery, so no worry about this part ;]

Answer 1

I would think the easiest solution would be to catch the event on the button elements, rather than on the form.

$('#buttons').on('click', 'input[type="submit"]', function(e) {
     e.preventDefault(); // for safety's sake
     var data = {};
     data[this.id] = this.value;
     $.get("data.php", data);
});