i have a html form with 3 inputs and steps buttons.

1st step user must put first name and press button 1

2st step user must put last name and press button 2

3st step user must put email and press final button 3

any time where the user press any button then go to next html step.

i want to Handle inputs in my views.py step by step any time where the user press any button and not all together in the final submit .

i try t use this code in views.py to take inputs in django backend and now work i don't take anything in views.py.(if i change button type from button to submit then i take results nut refresh page and i cant go to step 2) views.py 

if request.method == 'POST' and 'first_step' in request.POST:     print '1'     firstname= request.POST.get('firstname')  if request.method == 'POST' and 'second_step' in request.POST:      print '2'      lastname= request.POST.get('lastname')  if request.method == 'POST' and 'final_step' in request.POST:      print '3'      email= request.POST.get('email')

here the html code :

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="utf-8">        <title>Form wizard with circular tabs</title>        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>  </head>  <body>  <div class="container">      <div class="row">          <section>          <div class="wizard">              <div class="wizard-inner">                  <div class="connecting-line"></div>                  <ul class="nav nav-tabs" role="tablist">                        <li role="presentation" class="active">                          <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">                              <span class="round-tab">                                  <i class="glyphicon glyphicon-folder-open"></i>                              </span>                          </a>                      </li>                        <li role="presentation" class="disabled">                          <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">                              <span class="round-tab">                                  <i class="glyphicon glyphicon-pencil"></i>                              </span>                          </a>                      </li>                      <li role="presentation" class="disabled">                          <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">                              <span class="round-tab">                                  <i class="glyphicon glyphicon-picture"></i>                              </span>                          </a>                      </li>                        <li role="presentation" class="disabled">                          <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">                              <span class="round-tab">                                  <i class="glyphicon glyphicon-ok"></i>                              </span>                          </a>                      </li>                  </ul>              </div>                <form role="form">                  <div class="tab-content">                      <div class="tab-pane active" role="tabpanel" id="step1">                          <div class="step1">                              <div class="row">                              <div class="col-md-6">                                  <label for="exampleInputEmail1">First Name</label>                                  <input type="email" name="firstname" class="form-control" id="exampleInputEmail1" placeholder="First Name">                              </div>                            </div>                            </div>                          <ul class="list-inline pull-right">                              <li><button type="button" name="first_step" class="btn btn-primary next-step">Save and continue</button></li>                          </ul>                      </div>                      <div class="tab-pane" role="tabpanel" id="step2">                          <div class="step2">                                <div class="step-22">                                                  <label for="exampleInputEmail1">Last Name</label>                                  <input type="email" name="lastname" class="form-control" id="exampleInputEmail1" placeholder="Last Name">                              </div>                          </div>                          <ul class="list-inline pull-right">                              <li><button type="button" class="btn btn-default prev-step">Previous</button></li>                              <li><button type="button" name="second_step" class="btn btn-primary next-step">Save and continue</button></li>                          </ul>                      </div>                      <div class="tab-pane" role="tabpanel" id="step3">                          <div class="step33">                                                          <label for="exampleInputEmail1">email</label>                                  <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Last Name">                                </div>                          <ul class="list-inline pull-right">                              <li><button type="button" class="btn btn-default prev-step">Previous</button></li>                              <li><button type="button" name="final_step" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>                          </ul>                      </div>                      <div class="tab-pane" role="tabpanel" id="complete">                          <div class="step44">                              <h5>Completed</h5>                              </div>                      </div>                      <div class="clearfix"></div>                  </div>              </form>          </div>      </section>     </div>  </div>  <script type="text/javascript">  $(document).ready(function () {      //Initialize tooltips      $('.nav-tabs > li a[title]').tooltip();        //Wizard      $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {            var $target = $(e.target);            if ($target.parent().hasClass('disabled')) {              return false;          }      });        $(".next-step").click(function (e) {            var $active = $('.wizard .nav-tabs li.active');          $active.next().removeClass('disabled');          nextTab($active);        });      $(".prev-step").click(function (e) {            var $active = $('.wizard .nav-tabs li.active');          prevTab($active);        });  });    function nextTab(elem) {      $(elem).next().find('a[data-toggle="tab"]').click();  }  function prevTab(elem) {      $(elem).prev().find('a[data-toggle="tab"]').click();  }      //according menu    $(document).ready(function()  {      //Add Inactive Class To All Accordion Headers      $('.accordion-header').toggleClass('inactive-header');        //Set The Accordion Content Width      var contentwidth = $('.accordion-header').width();      $('.accordion-content').css({});        //Open The First Accordion Section When Page Loads      $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');      $('.accordion-content').first().slideDown().toggleClass('open-content');        // The Accordion Effect      $('.accordion-header').click(function () {          if($(this).is('.inactive-header')) {              $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');              $(this).toggleClass('active-header').toggleClass('inactive-header');              $(this).next().slideToggle().toggleClass('open-content');          }            else {              $(this).toggleClass('active-header').toggleClass('inactive-header');              $(this).next().slideToggle().toggleClass('open-content');          }      });        return false;  });  </script>  </body>  </html>