Wrong loop Avascript

Asked

Viewed 57 times

2

I have the following code:

var contador = 1;
$('.preview-add-button').click(function(){
    var form_data = {};
    //form_data["concept"] = $('.payment-form input[name="concept"]').val();
    //form_data["description"] = $('.payment-form input[name="description"]').val();
    form_data["status"] = $('.payment-form #status option:selected').text();
    form_data["amount"] = parseFloat($('.payment-form input[name="amount[]"]').val()).toFixed(2);
    //form_data["date"] = $('.payment-form input[name="date"]').val();
    form_data["remove-row"] = '<span class="ico-cancel"></span>';
    var row = $('<tr></tr>');
    $.each(form_data, function( type, value ) {
        $('<td class="input-'+type+'"></td>').html(value).appendTo(row);
        $('<input/>').attr("type", "hidden").attr("name", "produto[]").val(form_data["status"]).appendTo(row);
        $('<input/>').attr("type", "hidden").attr("name", "produto[]").val(form_data["amount"]).appendTo(row);
        contador++;
    });
    $('.preview-table > tbody:last').append(row);
    calc_total();
});

The problem is in the counter variable, instead of counting from 1 to 1 as it is in the code, when passing through the loop it was sum 3 instead of 1, that is, it arrives in the loop worth 1 and in the next iteration it is worth 4, in the next 7 and so on, someone can understand why?

javascript

  • form_data has 3 elements, it is normal to add to the counter 3 times, you are inside a foreach. which means it will run that code 3 times

  • And how do I fix it?

  • What do you want the counter for? You cannot simply use a "form_data.length"?

  • I got it, I just took the counter and the inputs from the haha loop, sorry about the Noob question

  • Is that I need to send the data that were selected to PHP and I wanted to separate, product1=>array()...etc.. and since it was inside the loop, it sent the data the triplicate PHP from there, you know?

2 answers

0

form_data contains 3 attributes: status, amount, remove-row
$.each performs the function once for each element of form_data

So he’s counting three times.

If you want to count the number of clicks with contador, need to leave contador++ outside the $.each

0

each is an iteration to the contents of a list; in this case, an iteration to what is within form_data - that you’re talking about three things: status, amount and remove-row; well, a each what it does is pass by one of these properties house to do anything.

The reason for the variable contador be at 4 is because the each perpetuated by 3 properties that the form_data had and added to the initial value of it, which was 1.

Instead of making a each (read "every item in the following list"), I think you want to add what’s inside that object to another element. If that’s it, you don’t need to do the each and you can then directly use the property: 

$('.preview-add-button').click(function(){
    var formData = {};
    var row = $('<tr></tr>');
    formData.form = $('.payment-form');

    formData.status = $('#status option:selected',formData.form).text();
    formData.amount = parseFloat($('input[name="amount[]"]',formData.form).val()).toFixed(2);
    formData.removeRow = '<span class="ico-cancel"></span>';

    row.append('<td class="input-status">' + formData.status + '</td>');
    row.append('<td class="input-amount">' + formData.amount + '</td>');
    row.append('<td class="input-remove-row">' + formData.removeRow + '</td>');

    row.append('<input type="hidden" name="produto[status]" value="' + formData.status + '"');
    row.append('<input type="hidden" name="produto[amount]" value="' + formData.amount + '"');

    $('.preview-table > tbody:last').append(row);

});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.