Reply To: Add new repeater row on front-end form with Javascript

• bkjproductions

• June 17, 2018 at 4:05 am

I think I have part of it figured out, but I have reached the limits of what I know about with jQuery. I have a repeater row set up with various inputs, including a WYSIWYG editor. I would like to add a copy/paste button so I can just duplicate that row’s contents, or even go to another Post and paste a row.

So far, I have figured out how to add a copy button, and how to add a paste button (which basically creates a row).

Here is what I have so far; can someone review and help me figure out how to access each of the fields in a repeater row via Javascript?

// first make some buttons that we are adding dynamically:
var acf_paste_button = '<a class="acf-button button" id="acf_paste_row" href="#" data-event="paste-row">Paste Row</a>';
// TODO: Give the copy button a FA of acf-font icon
var acf_copy_button = '<a class="small acf_copy_row" href="#" data-event="copy-row" title="Click to copy this row">C</a>';
// global: Keep track of button-pasted state:
var acf_button_pasted = false;
// add a button to the bottom of the actions area:
$('.acf-actions').prepend(acf_paste_button);
// add some copy buttons to each row in the ACF:
$('td.acf-row-handle').append(acf_copy_button)
//when you click the paste row button, send a click to the "add row" button
$('body').on('click','#acf_paste_row', function() {
	$('.acf-button.button.button-primary').click();
	acf_button_pasted = true;
});

// when you click the coyp row, put it into a cookie
$('body').on('click','.acf_copy_row', function() {
	alert('todo: COPY the inputs of this row into a cookie');
});

// listen for pasting events:
acf.add_action('append', function( $el ){
	// $el will be equivalent to the new element being appended $('tr.row')	
	if (	acf_button_pasted ) {
		// so we just added a row; now we need to add a copy button for it:
		$el.find('td.acf-row-handle').append(acf_copy_button);		

		// find a specific field
		console.log($el);
		var $field = $el.find('#my-wrapper-id');
		var $field = $el.find('.acf-row');
		console.log($field);
		console.log('now it is time to paste the stuff');
		// set the flag back to false in case you want to paste again.
		acf_button_pasted = false;
		// .acf-input-wrap 
		// do something to $field
		// TODO: Paste values into each of the inputs.
		$el.find('input').val('fish');
		// how to access a WYSIWYG editor?
		//tinymce.activeEditor.execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		$('.tmce-active').execCommand('mceInsertContent', false, " <b>bolded text</b> ");
		// TODO: run through each element
		$el.each( 'input', function(el) {
			console.log(el);
		});
	}
});