Saving data from multiple ACF forms within foreach loop

• Avramoski

• February 22, 2021 at 4:57 am

Hi guys.
I have an app built with ACF where I list multiple forms in the front-end, where the user need to enter some numbers and save the form.
However I have trouble saving the forms because they are within foreach loop and when the first form is Updated, all other forms get the same numbers from the first form.
Can you please give me some guidelines on how to solve this issue? I want the user to update and save data from each form with different numbers.

Here’s how the app looks on the front-end:
https://prnt.sc/102zabl

Here’s my code so far for this:

<?php if( have_rows('add_zone') ): ?>
<div style="margin-bottom:30px">
  <?php while( have_rows('add_zone') ): the_row(); ?>
  <div class="zone-title"><?php the_sub_field('select_zone'); ?></div>
    <?php $select_collectors = get_sub_field( 'select_collectors' ); ?>
      <?php if ( $select_collectors ) : ?>
        <?php foreach ( $select_collectors as $post_ids ) : ?>
          <button class="accordion"><?php echo get_the_title( $post_ids ); ?> <i class="fa fa-caret-down"></i></button>
          <div class="panel">
            <form id="post" class="acf-tyres-form" action="" method="post" autocomplete="off">
              <?php
              acf_form(array(
              'field_groups' => array(312),
              'form' => true,
               'form_attributes' => array('autocomplete' => "off"),
              ));
              ?>
            </form>
          </div>
          <?php endforeach; ?>
</div>

<?php endif; ?> 
<?php endwhile; ?>
<?php endif; ?>

Here’s the AJAX code for my Update button:

<script>
	acf.add_action('submit', function($form){

            var formdata = new FormData($form[0]);

            $.ajax({
                url: window.location.href,
                method: 'post',
                data: formdata,
                cache: false,
                processData: false,
                contentType: false,
                success: function(data) {
                    acf.validation.toggle($form, 'unlock');
                    $form.prepend('<div class="acf-error-message -success">' + data + '</div>');
                    $('html,body').animate({
                        scrollTop: $form.offset().top - 150
                    }, 500);
                    $('.acf-form button[type="input"]').prop('disabled', false);

                }
            });
        });
</script>

I am missing something in my form code and any help is appreciated.
Thanks

• John Huebner

• March 11, 2021 at 8:43 am

You cannot have multiples of the same forms submitted together. All of the field names used in the forms will be the same. There isn’t any way to do this using acf_form() unless each form has it’s own submit process and is process separately, one form at a time. Maybe you could loop over the forms on the page and perform multiple submissions since you are using AJAX

• John Huebner

• March 11, 2021 at 8:45 am

Also, every form would need to specify the post ID where the data will be saved.