Dynamic form generation and auto save Ajax?

Yii 2.0 General Discussions
1

Hey guys,

I’ve searched the internet about generation of ‘dynamic’ forms, It seems to me many want this but theres no or hard to find info about it.

I really need this for my new project and want to do it the propper way. let me first explain the situation:

Currently i have an GII generated _form consists of 3 input fields and an hidden _crfs hidden auth key, its linked with a simple and 1 modelA.

ModelA has an foreignkey constraint to many modelB’s (modelA is connected to many modelB’s).

Now when i get to my problem,

When i come to the create page of modelA i fill in the 3 input fields… BUT i also want to be able to create ‘dynamicly’ many (not known quantity(add one on button.click for instance)) of modelB’s.

I should use javascript/ajax/jquery to generate new fields that are needed to make an new modelB, i guess, but Is there a propper way to solve this?

For instance is it secure to just add fields and add them to the $_POST? and how should i validate the results? I dont want to make for all modelB form elements (in the modelA create page) to have an submit button, i also would like to do some auto saving (ajax?), Is this possible? are there any propper ways to do this? where can i find the documentation?

Thanks in advance!

Bart Jan

2

Hi,

I have the same problem.

I need to add dynamically fields into ActiveForm via ajax including validation on client side.

Unfortunatelly, this feature is not currently supported, or more precisely does not bind into ActiveForm.

See issues here:

3

allright enough inspiration! Thnx!

4

Hi, I solved the issue by splitting form into multiple forms, so each ajax request would load separate ActiveForm.

Then it binds validators correctly.

Then when I submit and I want to include also all previous forms (e.g. steps 1-3), I would go:




var data = $("form[id*=form-step-]").serialize();

$.ajax({

	url : window.handlers.url_ajax,

	type : 'POST',

	data : {

		StepsData : data,

	},

	success : function(response){

		window.handlers.handleResponse(response);

	},

	error : function(){

		alert("Connection error!");

	}

});

Since all forms share the same model, it would correctly submit attributes from all forms for the same model.