How to separate php generated buttons

Question

I'm generating tables of buttons with php

echo ' <td">
<form action="test.php" method="POST">
<input type="hidden" id="node" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" id="service" name="service" value="'.$flavor.'">
<input type="hidden" id="running" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';

I want to send the values without reloading via jquery ajax and I'm using this code for it:

$(".button").click(function() { $('.error').hide();

    var dataString = 'node='+ document.getElementById('node').value + '&service=' + document.getElementById('service').value + '&running=' + document.getElementById('running').value;

    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        success: function() {
            alert ("Success");
        }
    });
    return false;
});

Code works so far - it just always sends the data from the first form. What is the best way to distinguish between all the buttons. I could use a counter in the form, but how would I exactly write the js "ifs". Is there a more elegant way to do this. Number of forms is dynamic.

Answer 1

You can grab the parent form of the button clicked easily enough, but youll also probably want to have a unique ID on the form for other things. Also you need to either remove the ids on the inputs or make them unique.

echo ' <td">
<form action="test.php" method="POST" id="form_node_' . $fnode->{'name'} . '>
<input type="hidden" name="node" value="'.$fnode->{'name'}.'">
<input type="hidden" name="service" value="'.$flavor.'">
<input type="hidden" name="running" value="false">
<input type="submit" value="OFF" class="button">
</form>
</td>';


$(".button").click(function(e) {
    e.preventDefault(); 
    $('.error').hide();
    var $form = $(this).closest('form'), // the closest parent form
        dataString = $form.closest('form').serialize(); // serialize the values instead of manually encoding
    $.ajax({
        type: "POST",
        url: "test.php",
        data: dataString,
        success: function() {
            alert ("Success submitting form ID " + $form.attr('id'));
            // you can now modify the form you submitted
        }
    });
    return false;
});

Answer 2

The best way is to use unique IDs for form elements. Another way is to set classes to multiple elements with the same name.

However, the following approach is much preferable:

$("form").on("submit", function() {
    $.ajax({
        type: "POST",
        url: "test.php",
        data: $(this).serialize(),
        success: function() {
            alert ("Success");
        }
    });
    return false;
});

(But anyway don't forget to remove duplicating id attributes from the form elements.)

Answer 3

You can give each submit buttons an id:

<input id="button-1" type="submit" value="OFF" class="button">

and then trigger the event on click of a specific button:

$("#button-1").click(function() { ... });