CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
samuk
samuk

Reputation: 167

How to separate php generated buttons

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.

Upvotes: 0

Views: 85

Answers (3)

prodigitalson
prodigitalson

Reputation: 60413

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

Upvotes: 1

Sean Powell
Sean Powell

Reputation: 1437

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() { ... });

Upvotes: 0

VisioN
VisioN

Reputation: 145408

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.)

Upvotes: 0

Related Questions