More in this section

Forums / Developing with Sitefinity / Multiple FORM tags mess-up edit mode

Multiple FORM tags mess-up edit mode

2 posts, 0 answered
  1. Nick Pearce
    Nick Pearce avatar
    8 posts
    Registered:
    22 Apr 2008
    02 Mar 2009
    Link to this post
    We had problems with a very messed-up edit mode, despite the published pages rendering fine.

    After a lot of troubleshooting, we discovered (or assumed) that Sitefinity relies on the FORM tag in the HTML to properly build the editing interface. It seems to inject the HTML for the menu bars (top and right) after the FIRST form tag which works fine for most pages. We had three separate form tags and this seemed to be the culprit.

    Multiple form tags are supported in ASP.NET as long as ONLY ONE has a runat=server attribute. However, the second one was the .NET runat=server tag, not the first. This is not necessarily the best approach, but if you want to post directly to another page without posting back then it works well.

    This is what failed:

     
    <form id="searchForm" method="post" action="http://blahblah.com/search"
    <input type="text" name="keyword" id="searchTerm" /> 
    </form> 
     
    <form runat="server" id="form1"
    <!-- Main ASP.NET page with controls that post back--> 
    </form> 
     
    <form id="searchForm" method="post" action="http://blahblah.com/search"
    <input type="text" name="keyword" id="searchTerm" /> 
    </form> 
     

    This confuses Sitefinity when switching to Edit mode and you end up with an ugly hybrid page where the Sitefinity editor controls seem to be 'IN' the main site as opposed to the other way round.

    Our solution in the end was to use a hidden field and some javascript to do the external posting from a separate form at the end:

    <script> 
         function search(inputId) { 
             var val = document.getElementById(inputId).value; 
             var tgt = document.getElementById('hdnSearchKeyword'); 
             var form = document.forms['searchForm']; 
             tgt.value = val; 
             form.submit(); 
             return false; 
         } 
     </script> 
     
    <form runat="server" id="form1"
    <!-- Main Page --> 
    </form> 
     
    <form id="OurSearchForm" name="searchForm" method="post" action="http://blahblah.com/search">     
    <input type="hidden" name="keyword" id="hdnSearchKeyword"/> 
    </form> 
     

    There may be a better solution - I'd be glad to hear it - but this works.

    We noticed some other posts asking about this and wanted to share our solution. I'd also be interested to know if our assumptions about Sitefinity's use of the FORM tag are correct.

    Thanks for the fantastic product - keep up the good work and keep those developer docs coming!
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    04 Mar 2009
    Link to this post
    Hi Nick,

    We would recommend you remove the <form> tags and use ASP.NET User Controls instead. The idea is that you create a User Control for each logical form you need to display. Another workaround is to use  <IFRAME>.

    You could find useful information on this matter in the following article: http://msdn.microsoft.com/en-us/magazine/cc164151.aspx

    Hope you will find the provided information helpful.

    Sincerely yours,
    Pepi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
2 posts, 0 answered