simbada simbada - 6 months ago 10
Javascript Question

submitting multiple forms on single click via Ajax

I am

submitting multiple forms
on
single button
click.

e.g. suppose i have two forms. On button click, i can see
$('form[id^=buyerForm]').length gives 2.


The
first iteration
picks
first form data
and make ajax call but
second iteration
also
picks the first form data
.
This is the problem.


Can anyone please explain why iteration always picks first form data?

<script type="text/javascript">
$("#jPdetails").on('click', function() {
$('form[id^=buyerForm]').each(function() {
post_form_data($(this).serialize());
});
});

function post_form_data(data) {
var jsellerAddress = $("#jsellerAddress").val();
var jagentId = $("#jagentId").val();
var jbuilding = $("#jbuilding").val();
var junitId = $('#junitId option:selected').val();
var jpropertyAed = $("#jppropertyAed").val();
var jparkingBaysAt = $("#jparkingBaysAt").val();
var jtotalAed = $("#jtotalAed").val();
var dataString =
'jsellerAddress=' + jsellerAddress +
'&jagentId=' + jagentId +
'&jbuilding=' + jbuilding +
'&junitId=' + junitId +
'&jpropertyAed=' + jpropertyAed +
'&jparkingBaysAt=' + jparkingBaysAt +
'&jtotalAed=' + jtotalAed;
$.ajax({
type: 'POST',
url: 'jointpurchasehandller.php',
data: dataString,
success: function(result) {
alert(result);
},
error: function(error) {
alert(error);
}
});
};
</script>


html
my html structure

<div id="jointBuyer" class="JointBuyerDive" style="display:none">
<div id="jBuyer">
<div id="inner"class="col-lg-6">
<form id="buyerForm" role="form" method="POST" enctype="multipart/form-data">
</div>
</div>
<div>


and i'm adding
multiple forms
the following way

<script
function addBuyer() {
$("#addBuyer").click(function() {
$("#buyerForm").clone().appendTo("#jointBuyer");
});
}
</script>

Answer

Never ever use ids in loops NEVER:

 $("#jPdetails").on('click', function() {
        $('form[id^=buyerForm]').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find("#jsellerAddress").val();
            var jagentId = $(el).find("#jagentId").val();
            var jbuilding = $(el).find("#jbuilding").val();
            var junitId = $(el).find('#junitId option:selected').val();
            var jpropertyAed = $(el).find("#jppropertyAed").val();
            var jparkingBaysAt = $(el).find("#jparkingBaysAt").val();
            var jtotalAed = $(el).find("#jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

or change all the ids to classes

 $("#jPdetails").on('click', function() {
        $('.buyerForm').each(function(i,v) {
            post_form_data($(v).serialize(),v);
        });
    });

        function post_form_data(data,el) {
            var jsellerAddress = $(el).find(".jsellerAddress").val();
            var jagentId = $(el).find(".jagentId").val();
            var jbuilding = $(el).find(".jbuilding").val();
            var junitId = $(el).find('.junitId option:selected').val();
            var jpropertyAed = $(el).find(".jppropertyAed").val();
            var jparkingBaysAt = $(el).find(".jparkingBaysAt").val();
            var jtotalAed = $(el).find(".jtotalAed").val();
            var dataString =
                'jsellerAddress=' + jsellerAddress +
                '&jagentId=' + jagentId +
                '&jbuilding=' + jbuilding +
                '&junitId=' + junitId +
                '&jpropertyAed=' + jpropertyAed +
                '&jparkingBaysAt=' + jparkingBaysAt +
                '&jtotalAed=' + jtotalAed;
            $.ajax({
                type: 'POST',
                url: 'jointpurchasehandller.php',
                data: dataString,
                success: function(result) {
                    alert(result);
                },
                error: function(error) {
                    alert(error);
                }
            });
        };

or:

$("#jPdetails").on('click', function() {
    $('form[id^=buyerForm]').each(function(i,v) {

        $.ajax({
            type: 'POST',
            url: 'jointpurchasehandller.php',
            data:$(v).serialize(),
            success: function(result) {
                alert(result);
            },
            error: function(error) {
                alert(error);
            }
        });

    });
});