CODEWITHSUNDEEP
javascriptphpjqueryforms
MazeyMazey
MazeyMazey

Reputation: 303

Submit a specific dynamically generated form amongst other forms

I have a page that generates a number of forms - in HTML when parsed looks like this:

<form action="" method="post" name="form">
    <input name="varenummer" type="hidden" value="1234"> 
    <input class="form-control-inline" name="antal" size="1" type="text" value="5"><br>
    <button class="btn btn-primary btn-sm myFavoriteClass" id="updateantal-1234" type="button">Opdater</button>
</form>

<form action="" method="post" name="form">
    <input name="varenummer" type="hidden" value="5678"> 
    <input class="form-control-inline" name="antal" size="1" type="text" value="13"><br>
    <button class="btn btn-primary btn-sm myFavoriteClass" id="updateantal-5678" type="button">Opdater</button>
</form>

What I want is for the javascript only to submit the form from where the button is pressed.

This is the javascript:

$(document).ready(function() {
    $(document).on("click", ".myFavoriteClass", function() {
        function a() {
            $.ajax({
                url: "/pages/s_updateantal.php",
                type: "POST",
                dataType: "html",
                async: !0,
                cache: !1,
                data: t,
                success: function(a) {
                    $("#result").html(a), $("#updateantal").attr("disabled", !1)
                }
            })
        }
        var t = $("form").serialize();
        $(".bs-example-modal-sm").modal("show"),
            $("#updateantal").attr("disabled", !0), 
            setTimeout(a, 1e3)
    })
});

Unfortunately I am no pro in javascript - When the /pages/s_updateantal.php file is parsed I can see that no matter which button I press it is the last form that is submitted. I have tried to name the buttons with an unique id, but it still just "submits" the last form.

Is there a way where you in the OnClick function can point to the form only where the button within has been pressed?

Thanks in advance.

Upvotes: 0

Views: 805

Answers (2)

feeela
feeela

Reputation: 29932

Don't use JavaScript for tasks that the browser can handle better than you!

If you use a <button type="submit"> inside each form, it will submit exactly the form it belongs to.

Now, if you want to send the forms using AJAX, don't listen to a click-event, but to the form submit-event:

$(document).on('submit', 'form', function(event) {
    event.preventDefault();

    var theSubmittedForm = $(event.target);

    /* your AJAX code here */
})

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You simply need to find the form that contains the button that raised the event using closest(). Try this:

$(document).on("click", ".myFavoriteClass", function() {
    function a() {
        $.ajax({
            url: "/pages/s_updateantal.php",
            type: "POST",
            dataType: "html",
            async: !0,
            cache: !1,
            data: t,
            success: function(a) {
                $("#result").html(a), $("#updateantal").attr("disabled", !1)
            }
        })
    }
    var t = $(this).c.losest('form').serialize(); // <- closest() here
    $(".bs-example-modal-sm").modal("show"); 
    $("#updateantal").attr("disabled", !0);
    setTimeout(a, 1e3)
})

Your use of !0 and !1 is a little odd - it's better practice to use the true and false keywords.

Upvotes: 1

Related Questions