bootstrap stepy tabs not working in html begin form() - mvc5

Question

I am working on a view where user enters his/her information in step....

Step are actually tabs you all know...

I am posting data to action, so i need to wrap all html code in Html.Beginform()...but wrapped code consists tabs which not works in html.beginform()

When i remove the Html.Beginform, the tabs work fine.....

My html

@using (Html.BeginForm(FormMethod.Post))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
        <section id="main-content">
            <section class="wrapper site-min-height">
                <!-- page start-->
                <div class="row">
     <section class="panel">
    <header class="panel-heading">
        Registration
    </header>
    <div class="panel-body">
        <div class="stepy-tab">
            <ul id="default-titles" class="stepy-titles clearfix">
                <li id="default-title-0" class="current-step">
                    <div>Step 1</div>
                </li>
                <li id="default-title-1" class="disabled">
                    <div>Step 2</div>
                </li>
            </ul>
        </div>
        <form class="form-horizontal" id="default" name="myform">
            <fieldset title="Step1" class="step" id="default-step-0">
                <legend> </legend>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Company Name</label>
                    <div class="col-lg-10">
                 <input type="text" class="form-control" id="Name" name="Name">
                    </div>
                </div>
            </fieldset>
            <fieldset title="Step 2" class="step" id="default-step-1">
                <legend> </legend>
           <div class="form-group">
            <label class="col-lg-2 control-label">Card Key</label>
           <div class="col-lg-10">
          <input type="text" class="form-control" id="CardKey" name="CardKey">
            </div>
           </div>
            </fieldset>
          <input type="submit" class="finish" value="Save" id="Free" />
        </form>
    </div>
</section>
                    </div>
                <!-- page end-->
            </section>
        </section>

Js function

<script>
    //step wizard
    $(function () {
        $('#default').stepy({
            backLabel: 'Previous',
            block: true,
            nextLabel: 'Next',
            titleClick: true,
            titleTarget: '.stepy-tab'
        });
    });
</script>

What can be probable causes, please if someone help....any kind of help or reference will be appreciated.....thanks for your time

Any console errors you are getting? what plugin is that?? Any links to that? — Guruprasad J Rao, Jul 01 '15 at 03:25
@GuruprasadRao thanks for reply, its jquery wizzard plugin stepy i am using — Suhail Mumtaz Awan, Jul 01 '15 at 03:28
surprisingly i doesnt have console error except nicescroll.js..... — Suhail Mumtaz Awan, Jul 01 '15 at 03:34
http://www.jqueryscript.net/form/jQuery-Wizard-Plugin-Stepy.html — Suhail Mumtaz Awan, Jul 01 '15 at 03:54

score 3 · Accepted Answer · edited May 23 '17 at 11:44

I see that you are creating a form inside form!! I hope you know that Html.BeginForm will create one more form and inside that you are placing one more form for stepy. Nesting Forms are not allowed in HTML. I don't think you need form at top where you've written @Html.BeginForm instead you can use the same below where your other form exists like one below:

@using(Html.BeginForm("actionname","controllername",FormMethod.Post,new{@class="form-horizontal",id="default",name="myform"}))
{ 
   <fieldset title="Step1" class="step" id="default-step-0">
      <legend> </legend>
      <div class="form-group">
         <label class="col-lg-2 control-label">Company Name</label>
         <div class="col-lg-10">
            <input type="text" class="form-control" id="Name" name="Name">
         </div>
      </div>
   </fieldset>
   <fieldset title="Step 2" class="step" id="default-step-1">
      <legend> </legend>
      <div class="form-group">
         <label class="col-lg-2 control-label">Card Key</label>
         <div class="col-lg-10">
            <input type="text" class="form-control" id="CardKey" name="CardKey">
         </div>
      </div>
   </fieldset>
   <input type="submit" class="finish" value="Save" id="Free" />
}

The above Html.BeginForm helper will create the below code

<form action="/cname/ac" class="form-horizontal" id="default" method="post" name="myform">

I am assuming that you only need only steps data to post and believe me above approach works!

thanks for answer, yes i realized, although i have solved this tye of problem before, i am doing this mistake again and again, +1 for effort and accept...you are the man...cheers — Suhail Mumtaz Awan, Jul 01 '15 at 04:49

bootstrap stepy tabs not working in html begin form() - mvc5

1 Answers1