Submitting a form withing an active Tab ASPX View

Question

i have an issue with my form which contain a tab, each tab contain a form inputs, the problem is when i click 'submit' it post even values from other tabs that are not active.

code HTML in the ASPX Page :

<section class="content-wrapper main-content clear-fix">
       <form id="form1" method="post" runat="server">
           <input id="Submit" type="submit" onclick="noPostBack('AfficherRapport.aspx')" name="Filtrer" value="Filtrer"/> 
           <asp:HiddenField ID="position" Value='$("ul.tabs li.active").index()' runat="server"/>
           <nav>
              <ul runat="server" id="myTab" class="tabs">
                      <li class="active">
                           <a href="#tab1">enseign_site</a>
                      </li>
                      <li class="">
                           <a href="#tab2">iwaHadaMakan</a>
                      </li>     
              </ul>
           </nav>

           <!-- Tab panels -->
           <div runat="server" id="myRapports" class="tabContainer">
               <div id="tab1" class="tabContent" style="display: block;">
                   <input type="text" name="STAMP1" placeholder="STAMP1"/>
               </div>
               <div id="tab2" class="tabContent" style="display: none;">
                   <input type="text" name="STAMP1" placeholder="STAMP1"/>
               </div>
           </div>

       </form>
   </section>

code Tab Jquery :

   $(document).ready(function () {
   //hiding tab content except first one
   $(".tabContent").not(":first").hide();
   // adding Active class to first selected tab and show
   $("ul.tabs li:first").addClass("active").show();

   // Click event on tab
   $("ul.tabs li").click(function () {
           // Removing class of Active tab
           $("ul.tabs li.active").removeClass("active");
           // Adding Active class to Clicked tab
           $(this).addClass("active");
           // hiding all the tab contents
           $(".tabContent").hide();
           // showing the clicked tab's content using fading effect
           $($('a', this).attr("href")).fadeIn('slow');

           return false;
       });
   });

**/!** : Tabs are fulfilled in the class behid of the view if you need some extra informations, you just ask for it. Thanks a lot

score 0 · Answer 1 · answered Jun 02 '14 at 14:11

Because all of your "tabs" are in the same form element. When a form is submitted, all form elements within it are included in the submit. Notice you have a single form element:

<form id="form1" method="post" runat="server">
    <!-- other markup -->
    <!-- Tab panels -->
    <div runat="server" id="myRapports" class="tabContainer">
        <div id="tab1" class="tabContent" style="display: block;">
            <input type="text" name="STAMP1" placeholder="STAMP1"/>
        </div>
        <div id="tab2" class="tabContent" style="display: none;">
            <input type="text" name="STAMP1" placeholder="STAMP1"/>
        </div>
    </div>
</form>

If you want separate form posts, you need separate form tags. (Likely one in each "tab" in this case.) Each one with its own form elements. Otherwise, with a single form tag, you'd need to discern in server-side code which elements are relevant and which are not.

Thanks for your replay, I'm going to test that ASAP and give you some feedBacks — Marouan N., Jun 02 '14 at 14:45

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

I am assuming you use ASP.NET Web Forms.

To separate each tab to do its own post, you need multiple <form> tags.

By nature of ASP.NET Web Forms - there is only one <form> tag. So what you are asking can only be done using AJAX requests.

Read more here: Can we use multiple forms in a web page?

edited May 23 '17 at 10:32

Community

1
1

answered Jun 02 '14 at 14:12

Simcha Khabinsky

1,970
2
19
34

score 0 · Answer 3 · answered Jun 02 '14 at 20:47

0

That works like a sharme thanks everybody. All the three answers were right, just to highlight that in a single page we can use as many as runat="server" we want. thanks for all of you.

answered Jun 02 '14 at 20:47

Marouan N.

23
5

Submitting a form withing an active Tab ASPX View

3 Answers3