Bruce Bruce - 3 months ago 26
PHP Question

submitting looping forms with jquery/ajax?

I have forms being created in a foreach loop with php.

Each form has a lpformnum that increases

<form lpformnum="1"><button class="update" /></form>
<form lpformnum="2"><button class="update" /></form>
<form lpformnum="3"><button class="update" /></form>
etc.


I am using jquery/ajax to prevent the default action of the forms so I can submit the forms via ajax.

<script>
$(document).ready(function(){
$('.alert').on('click', 'button[class=update]', function(e) {
e.preventDefault();
e.stopPropagation();
var checkValues = $("#update").val();
var checkCred = $("#ucredits").val();
var checkPost = $("textarea").text();
var checkType = $("i").text();
$.ajax({
type: "POST",
url: "update_social_cred.php",
data: { id: checkValues, credits: checkCred, text: checkPost, type: checkType },
success:function(result) {
alert (checkCred);
}
});
});
});
</script>


The problem is, every button submits the first form drawn on the page. How would I do this so each button is set to each form keeping in mind there are an unknown number of forms being drawn?

Answer

I suppose you should clarify what data you want to submit with find() method.

$('.alert').on('click', 'button[class=update]', function(e) {
    e.preventDefault();
    e.stopPropagation();

    // find parent form of a button
    var form = $(this).closest( "form" );

    // I suppose these are unique fields.
    var checkValues = $("#update").val();
    var checkCred = $("#ucredits").val();
    var checkPost = $("textarea").text();
    // if they are not you should use classes instead:
    // something like:
    // var checkCred = form.find(".ucredits").val();

    // find values in a `form` with `find` method
    var checkType = form.find("i").text();

    // pass your data to ajax.
Comments