CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Bruce
Bruce

Reputation: 1071

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?

Upvotes: 0

Views: 865

Answers (1)

u_mulder
u_mulder

Reputation: 54831

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.

Upvotes: 2

Related Questions