Using form tags within channel tags

I want to add that what I’m trying to do is when I display any channel post I want to allow the user to click an “edit” button and up pops a modal window that includes the edit form for the post. In order to pull this off the modal window code that includes the channel form has to be within a channel tag pair. I would rather not direct the user to a completely new page and edit from there. A modal window would make more sense to the user. Maybe there’s a better way to do it that someone can recommend? It seems like what I’m trying to achieve is something that’s commonly done, so I would hope that there’s an easy way to do it.

I think I know how to make this work. After sleeping on it I realized that I can place my modal window code outside of the channel tag pair, and when I want to edit one of the displayed posts I click its corresponding “edit” button and that opens the modal. Meanwhile, the edit form I want to appear in the modal is located at another url on my site. I bring the form into my modal window by passing the url (with the entry_id value appended) to a jquery $get() method call. It returns the html of the form with the fields populated with the data that corresponds to the entry_id value that I passed to the form. Then I use a $(selector).html() method to place the html inside a div block in the modal window. The form appears in the modal window with fields filled in, I edit the fields, click submit, and viola! It should work. I’ll follow up with another post once I’ve tested this approach.

I’ve tested it and it works well. Below is a simplified version of my code.

The first code block shows the code that is within my channel tag pair. For each channel loop it renders a button and some javascript variables that are each made unique using the {count} tag. At the bottom of the block, the div block with id=”my_modal” is where the form html gets inserted. Notice that it is outside of the channel loop. When one of the buttons is clicked the javascript code gets the html data from the location determined by “(my domain)/template_group/template/” + “{entry_id}”.

The second block of code shows the forms html that is located at a different url. It reads the entry_id from {segment_3} and fills in the form fields according to that entry, all of which is passed through the “data” variable in the first block of code into the “my_modal” div block and the form appears ready for editing, and submitting the form no longer throws errors. It works beautifully! After weeks of trying to find a way to do this, I’m stoked! (that’s old folks talk for happy). Maybe what I did should be a no-brainer for me but I’ve done little web programming for almost a decade and have been brushing up on it again since Thanksgiving, learning some of the new things like jQuery, Bootstrap, ajax, and comet.

{exp:channel:entries channel="user_tasks" limit="4" dynamic="no"}

<button id="b{count}">EDIT</button>

 (opening javascript tag)
  var url{count} = "(my domain)/template_group/template/" + "{entry_id}"
  $(document).ready(function(){
   $("#b{count}").click(function(){
    $.get(url{count}, function(data){
     $('#my_modal').html(data);
    });
   });
  });
 (closing javascript tag)

{/exp:channel:entries}

<div id="my_modal">The Modal</div>

{exp:channel:form channel="user_tasks" entry_id="{segment_3}"}

 <input name="title" type="text" value="{title}">
 <textarea name="description" >{description}</textarea>
  <button type="submit">Save changes</button>

{/exp:channel:form}

Hello thats great Idea but you might use embed method like what I’ve done. You can pass some variables to the embedded template too.

{exp:channel_entries}
   {if logged_in AND author_id != logged_in_member_id} 
   <!-- offer form -->
    {embed='forms/add_offer' quantity="{request_shipment_quantity}"}
   <!-- offer form -->
   {/if}
{/exp:channel_entries}