How To Create Dynamic Form

Hi everyone,

I’m trying to create a dynamic form for a profile page. So what I’d like to achieve is the following:

You visit your profile and see your information

You decide you want to edit it and click the edit button

All of the text fields change into input fields that can be edited

You make your changes and click save

The appropriate table is updated and the input fields change back to static text fields

I have not been able to think of a clever way to do this in view given that ActiveForm uses PHP. I was thinking of using javascript, but I’m not sure how I would change an html element (like <p> for example) to an active form element.

So how can I change this:


<p> Some random text here</p>

To this


<?= $form->field($model, 'location') ?>

Without reloading the whole page and filling the input field with "Some random text here" when it changes over?

And of course, back again, updating the appropriate tables.

Thanks in advance!

Hello QuPsi,

You can do it like this show a popup link on the system main menu, when a user click the link, user profile shows

in this form all text fields will be read only for that in that view add a class to all the input fields eg.- input-readonly then from jquery select


$(".input-readonly").attr("readonly", true)

when user click the edit button for button click function


$(".input-readonly").attr("readonly", false)

and show the save button too, hide it too when the form loads.

or in the form you’ve both cdetail view and the profile form in different divs. form div always hidden when only the edit button clicked cdetail view hidden form shown

Hmm, is there a way to achieve this without a popup though?

Hmm, is there a way to achieve this without a popup though?