Support

Account

Home Forums General Issues Saving data from multiple ACF forms within foreach loop

Unread

Saving data from multiple ACF forms within foreach loop

  • 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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.