Home Forums ACF PRO Add new repeater row on front-end form with Javascript Reply To: Add new repeater row on front-end form with Javascript

  • 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:
    // add some copy buttons to each row in the ACF:
    //when you click the paste row button, send a click to the "add row" button
    $('body').on('click','#acf_paste_row', function() {
    	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:
    		// find a specific field
    		var $field = $el.find('#my-wrapper-id');
    		var $field = $el.find('.acf-row');
    		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.
    		// 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) {