initialize repeater with multiple repeats?

[clin407]

I'm utilizing your plugin right now and upon form submit, it checks form validation. If the form is invalid, it returns to the page and shows the errors. I wanted to ask, if the user uses the repeater and repeats the item 5 times, is there a function available where I can just have the repeater repeat the item 5 times on load so I can just fill in the old data in the proper spots?

[DubFriend]

The library allows for more than one item to be rendered initially in the html markup, like this

<form class="repeater">
    <div data-repeater-list="group-a">
      <div data-repeater-item>
        <input type="text" name="text-input" value="A"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
      <div data-repeater-item>
        <input type="text" name="text-input" value="B"/>
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

The library also has an option to set the list items programattically, like this

var $repeater = $('.repeater').repeater();
$repeater.setList([
    { 'text-input': 'A' },
    { 'text-input': 'B' }
]);

[maparaschivei]

Hello @DubFriend,

I am trying to achieve a similar result programatically using repeaterVal to grab the form values and then serializing into JSON where I can then save to my database.

The logical method to then re-display the form values is to use setList, however, I can't quite get it to work using the JSON string I've grabbed via repeaterVal.

Could you provide any insight into this?

Here's some sample code:

function setFormJSON()
{
	var myFormObject = $(".repeater").repeaterVal();
	var myFormJson = JSON.stringify(myFormObject);
	
	// this is an example JSON string formatted from myFormObject
	var myFormJsonTest = '{"group-a":[{"input-building":"Animal House","input-unit":"1337"}]}';
	
	var $repeater = $(".repeater").repeater();
	$repeater.setList([myFormJsonTest]);
}

I'm trying to avoid manually re-entering each of the form values. According to your setList documentation something like this should work but I am having trouble.

Thank you for your time.

[maparaschivei]

I managed to get my problem solved and I'm posting a solution here in-case anyone else happens to try and solve a similar issue.

My intended use case is to save my form data and to later be able to re-display the repeated form inputs using my saved data. So for example if you had a grocery list and wanted to save the list and then later re-edit the list to add or delete items.

The operations are broken down into 2 functions. One to save the form data and the other to re-display the data using repeaterVal and setList respectively.

function saveFormJSON()
{
	var myFormObj = $(".repeater").repeaterVal();
	var myFormJson = JSON.stringify(myFormObj));
	
	// you can now post/get your myFormJson to your back-end for CRUD operation
}

function setFormJSON()
{	
	// you would first grab and set your myJson string from the database
	// I've included a sample myJson string for demonstration purposes
	
	var myJson = '{"group-a":[{"input-grocery-list-item":"Apple","input-grocery-list-item-quantity":"3"}]}';
	var myObj = JSON.parse(myJson);
	
	var $repeater = $(".repeater").repeater();
	$repeater.setList(myObj["group-a"]);
}

To recap:

Save form data

1. We collect our form data using repeaterVal()
2. Format the form data into JSON using JSON.stringify()
3. Optionally save the JSON to your database (not shown in the code example)

Set form data

1. Optionally grab the JSON from you database and assign it to your variable (not shown in the code example)
2. Parse the JSON into JavaScript objects using JSON.parse()
3. Use setList to load the form data from our parsed JSON

[fluctusz]

maparaschivei, thank you for your solution to this, it helped me out. one thing i looked for a while, input fields with type='tel' are not working with setList, i had to set it to type=text to make it working. And thank you DubFriend great repeaters.

[ShayanShams]

can you please let me know how to save that data in database???

[maparaschivei]

@ShayanShams What are you using for your back-end? PHP, Python, .NET, etc.

I can help point you in the right direction if I know what you're working with.

[rdlandim]

I have this same issue, in my case tho I'm using select instead of text input, does the setList() method have a overload so that I can populate my select element inside my repeater with pre-existing data?

[chiragdaxini]

Hi

I am using jquery.repeater in accordion along with cf7 forms but it's not working though no errors are fired as i checked in console also.. If i put it outside accordion then it's working fine but in case of accordion it's not working... :(

Can you help me with this ???

[robfrancken]

@rdlandim populating select fields works fine for me. You need to pass it the value attribute of the select field though, not the option value.

<select name="file_type">
    <option selected="selected" value="">Select a type</option>
    <option value="sample">Sample</option>
    <option value="test">Test</option>
</select>

$repeater.setList([
        { 'file_type' : 'sample' }
]);

[rdlandim]

@robfrancken my problem was a little more complicated cause I were using select2 plugin instead of simple select input so just initializing the html with the values were not working properly, what I did was iterate through my list of select2 inputs and render then only with the selected option, the rest worked as usual

[ehsanmusavi]

Thanks @maparaschivei, How about setList for nested repeaters? I can't set the nested repeaters! :(

[bhadresh-laiya]

@maparaschivei @DubFriend

Thanks for the solution and its works but;

What for multiple groups like group-a, group-b, and so on.

function setFormJSON()
{	
	// you would first grab and set your myJson string from the database
	// I've included a sample myJson string for demonstration purposes
	
	var myJson = '{"group-a":[{"input-grocery-list-item":"Apple","input-grocery-list-item-quantity":"3"}],     "group-b":[{"input-grocery-list-item":"Apple","input-grocery-list-item-quantity":"3"}]}';
	var myObj = JSON.parse(myJson);
	
	var $repeater = $(".repeater").repeater();
	$repeater.setList(myObj["group-a"]);
        $repeater.setList(myObj["group-b"]);
}

If i am using same solution for multiple group then its not working for setList. Can you please help me with some solution?

Thanks.

[badrul1329]

@maparaschivei @DubFriend

Thanks for the solution and its works but;

What for multiple groups like group-a, group-b, and so on.

function setFormJSON()
{	
	// you would first grab and set your myJson string from the database
	// I've included a sample myJson string for demonstration purposes
	
	var myJson = '{"group-a":[{"input-grocery-list-item":"Apple","input-grocery-list-item-quantity":"3"}],     "group-b":[{"input-grocery-list-item":"Apple","input-grocery-list-item-quantity":"3"}]}';
	var myObj = JSON.parse(myJson);
	
	var $repeater = $(".repeater").repeater();
	$repeater.setList(myObj["group-a"]);
        $repeater.setList(myObj["group-b"]);
}

If i am using same solution for multiple group then its not working for setList. Can you please help me with some solution?

Thanks.

i am facing the same issue, how can i initialize the form repeater with multiple set values?

[asimp51]

@ShayanShams What are you using for your back-end? PHP, Python, .NET, etc.

I can help point you in the right direction if I know what you're working

@maparaschivei can you please give me an example how to add and edit data with .NET backend

[reytabs]

I have also a problem from multi array repeaters. How can i achieve this array on repeater.

surveys: [{
    id: 1,
    name: 'survey 1',
    groups: [{
        name: 'Group 1',
        items: [{
            name: 'Item 1'
        }],
        name: 'Group2',
        items: [{
            name: 'Item 2'
        }]
    }]
}]