Jquery Each Function

Question

I'm trying to use the each function to post multiple fields, What I have is my regular fields, which submit and add to the db fine.

A function that clones the field when the user reaches near the end of filling the form in and one submit button.

I am trying to use $.ajax to submit the from values once each for each form on the page, it only seems to be working for the first form, any duplicated forms data isn't added which has me thinking I probably am using .each wrong could someone explain how I use it in this situation? Here's my attempt

$(function(){
 var i = 0;             var x = 0;
  $.datepicker.setDefaults($.datepicker.regional['']);
  $.datepicker.formatDate( "yy-mm-dd");
  $('#datepicker' ).datepicker();
  $('.vat').each(function(i){
        $(this).click(function(){

        var id = "batchinvoice" + x.toString();
        $('#batchinvoice').clone().attr("name", id).appendTo(".panel-body");
        x++;
                });
});

  $('#submit').click(function(){
    var propid = Array();
    var date = Array();
    var ref= Array();
    var id= Array();
    var desc= Array();
    var vat= Array();
    var net= Array();
$('#batchinvoice[name*="batchinvoice"]').each(function(i){


    propid[i] = $('#sl_propid').val();
    date[i] = $('.sl_date datepicker').val();
    ref[i] = $('#sl_ref').val();
    id[i] = $('#sl_nom_id').val();
    desc[i] = $('#sl_desc').val();
    vat[i] = $('#vat').val();
    net[i] = $('#sl_net').val();
     i++;
 });

$.ajax({
    type: 'POST',
    url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
    data: { propid : propid, date:"date", ref: ref, id: id, desc: desc, vat: vat, net: net},
    sucess: function(e){
        alert(e.error);
        },
    error: function(e){
        alert(e.error);
        }    
    });

    });
});

.vat Is the field that triggers the clone #submit is the one submit button and .batchinvoice is the class of each cloned form (and the original).

Everything I have read regarding this have been basic tutorials, any help appreciated, Cheers for reading :)

JSFiddle

Can you provide us a fiddle for code, including the HTML part — Aditya, Apr 03 '14 at 17:58
Of course, should've done that in the first place, sorry haha, Will sort it now :) — Pheonix2105, Apr 03 '14 at 17:59

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

What you absolutly don't want is an ajax call in a loop. Jquery ajax call within an each loop

What you want is :

    var propid = Array(),
    date = Array(),
    refe= Array(),
    id= Array(),
    desc= Array(),
    vat= Array(),
    net= Array();
    $('.batchinvoice').each(function(i){
        propid[i] = $('#sl_propid').val();
        date[i] = $('#sl_date').val();
        refe[i] = $('#sl_ref').val();
        id[i] = $('#sl_nom_id').val();
        desc[i] = $('#sl_desc').val();
        vat[i] = $('#vat').val();
        net[i] = $('#sl_net').val();
     }
        $.ajax({
        type: 'POST',
        url: '<?php echo base_url(); ?>FinancialInput/addInvoiceToLedger',
        data: { propid : propid, date: date, refe: refe, id: id, desc: desc, vat: vat, net: net},
        sucess: function(e){
            alert(e);
            },
        error: function(e){
            alert(e);
            }    
        });

edited May 23 '17 at 11:52

Community

1
1

answered Apr 03 '14 at 18:00

Su4p

865
10
24

Hey thank you, I see what you mean now, but that code still doesn't work, it has errors, which I corrected but it still only submits once. – Pheonix2105 Apr 03 '14 at 18:19
That's the point you get one submit but with all the datas inside, do a print_r($_POST); you'll see the answer. – Su4p Apr 03 '14 at 18:36
Sorry I don't think I was being clear enough, It's indeed returning an array in which I cycle through it and add them to the databse but it's adding the SAME record (the first form) over and over again, I think this may be something to with selectors? – Pheonix2105 Apr 03 '14 at 19:00
To answer this : "I think this may be something to with selectors" We obviously need the HTML. Still this code is weird why are you using an each and select #ids. Id = identifiant you have can't twice the same id. And my point that you should avoir doing ajax call in a loop is still viable. – Su4p Apr 03 '14 at 19:33
It's been in the initial question for a while now, in the JS Fiddle link. – Pheonix2105 Apr 03 '14 at 19:38
I'm not doing ajax in a loop now, I've added them to arrays before hand like you suggested. The ID's are Unique, for each clone created it has a number on the end of the ID I then find each one with $('#batchinvoice[name*="batchinvoice"]').each. Since they will be batchinvoice1..batchinvoice2 etc. – Pheonix2105 Apr 03 '14 at 19:46
If your point is to submit the form as many time as there are .batchinvoice then it's working with a 404 result. I think the problem is around the ajax in the loop <- you can't. Try to look the code request result with tools like httpfox or with chrome developper tool. – Su4p Apr 03 '14 at 19:48
It's not throwing an error, it's simply adding the .batchinvoice multiple times. So if I have 4 forms, it will submit the values of the first one, four times, I'll update question and JSFiddle. – Pheonix2105 Apr 03 '14 at 19:51
as you clone this $('#batchinvoice').clone().attr("name", id).appendTo(".panel-body"); – Su4p Apr 03 '14 at 20:12

Su4p · Accepted Answer · 2014-04-03T21:49:42.663

0

See comments in the code below the problem is your bad usage of id's.
http://jsfiddle.net/3Dq2A/4/

this :

$('#batchinvoice[name*="batchinvoice"]')

Should return only one record cause it's based on the id.

this can work :

$('form[name*="batchinvoice"]')

But I prefer

$('form.batchinvoice')

use body click to send the ajax-post and "vac" input to add a new form

edited Apr 03 '14 at 21:49

answered Apr 03 '14 at 20:31

Su4p

865
10
24

Now it's only entering the data of the last field into the database, still stuck with the same problem, I've changed the form's class, and tried $('form.batchinvoice') and $('form[name*="batchinvoice"]'), but my problem is with the selectors so 'll start a new question, thank you for your time. – Pheonix2105 Apr 03 '14 at 20:53
You can check your console log to verify that the object is well formed. – Su4p Apr 03 '14 at 21:32

Jquery Each Function

2 Answers2