마지막 탭에 도달했을 때 다중 탭 페이지 제출

Question

6 탭이 들어있는 다중 탭 양식이 있습니다. 데이터베이스에 삽입하고 싶지만 어떻게 작성해야할지 모르겠습니다. 사용자가 마지막 탭을 채울 때 제출하기를 원합니다. 또한 마지막 탭이 활성 상태 일 때 버튼을 NEXT에서 제출 버튼으로 변경하려고했습니다. 또한 사용자가 답변을 검토하고 탭간에 이동할 수 있기를 바랍니다. 다음은 입력 필드의 유효성을 검사하고 진행률 막대를 조정하는 jquery입니다.

이

$(document).ready(function() { 
 
    var $validator = $("#wizardForm").validate({ 
 
    rules: { 
 

 
     emp_fname: { 
 
     required: true 
 
     }, 
 
     emp_lname: { 
 
     required: true 
 
     }, 
 

 
     gender: { 
 
     required: true 
 
     }, 
 

 
     CivilStatus: { 
 
     required: true 
 
     }, 
 

 
     citizenship: { 
 
     required: true 
 
     }, 
 

 
    } 
 
    }); 
 

 
    $('#rootwizard').bootstrapWizard({ 
 
    'tabClass': 'nav nav-tabs', 
 
    onTabShow: function(tab, navigation, index) { 
 
     var $total = navigation.find('li').length; 
 
     var $current = index + 1; 
 
     var $percent = ($current/$total) * 100; 
 
     $('#rootwizard').find('.progress-bar').css({ 
 
     width: $percent + '%' 
 
     }); 
 
    }, 
 

 
    'onNext': function(tab, navigation, index) { 
 
     var $valid = $("#wizardForm").valid(); 
 
     if (!$valid) { 
 
     $validator.focusInvalid(); 
 
     return false; 
 
     } 
 
    }, 
 
    'onTabClick': function(tab, navigation, index) { 
 
     var $valid = $("#wizardForm").valid(); 
 
     if (!$valid) { 
 
     $validator.focusInvalid(); 
 
     return false; 
 
     } 
 
    }, 
 
    }); 
 
}); 
 

 

 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<form id="wizardForm" method="POST"> 
 
    <div class="tab-content"> 
 
    <div class="tab-pane active fade in" id="tab1"> 
 
     <div class="row m-b-lg"> 
 
     <div class="col-md-12"> 
 

 
      <div class="row"> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName">First Name</label> 
 
       <input type="text" class="form-control" name="emp_fname" id="exampleInputName" placeholder="First Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="MiddleName">Middle Name</label> 
 
       <input type="text" class="form-control col-md-6" name="emp_mname" id="MiddleName" placeholder="Middle Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName2">Last Name</label> 
 
       <input type="text" class="form-control col-md-6" name="emp_lname" id="exampleInputName2" placeholder="Last Name"> 
 
      </div> 
 
      <div class="form-group col-md-3"> 
 
       <label for="exampleInputName2">Name Extension</label> 
 
       <select id="extension" class="form-control col-md-2 col-xs-12" name="nameExt"> 
 
       <option selected disabled="">---</option> 
 
       <option value="Jr.">Jr.</option> 
 
       <option value="Sr.">Sr.</option> 
 
       </select> 
 
      </div>

다음 탭에서 이동하는 사용자를 가능하게하는 버튼입니다.

<ul class="pager wizard"> 
 
    <li class="previous"><a href="Add_Emp.php#" class="btn btn-default" name="Previous" id="prev">Previous</a> 
 
    </li> 
 
    <li class="next"><a href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</a> 
 
    </li> 
 
</ul>

Answer 1

왜 그냥 마지막 탭에서 양식 제출 '버튼을 배치?

필요에 따라 다음 탭과 이전 버튼을 각 탭 창에 배치 할 수 있습니다.

위의 양식 코드 중 일부가 누락되어 참조하는 단추가 표시되지 않습니다.

Answer 2

변경과 같이 버튼 :

<ul class="pager wizard"> 
 
    <li class="previous"><div class="btn btn-default" name="Previous" id="prev">Previous</div> 
 
    </li> 
 
    <li class="next"><div href="Add_Emp.php#" type="submit" class="btn btn-default" name="Next" id="next">Next</div> 
 
    </li> 
 
    <li class="next"><input type="submit" class="btn btn-default hidden" value="Save" id="btn_save"> 
 
    </li> 
 
</ul>

당신의 CSS에 추가

.hidden { 
    display:none; 
} 

변경 자바 스크립트, 당신은 위 :

$('#rootwizard').bootstrapWizard({ 
    'tabClass': 'nav nav-tabs', 
    onTabShow: function(tab, navigation, index) { 
     var $total = navigation.find('li').length; 
     var $current = index + 1; 
     var $percent = ($current/$total) * 100; 
     $('#rootwizard').find('.progress-bar').css({ 
     width: $percent + '%' 
     }); 
     set_buttons(index); // Set the button enabled and visibility 
    }, 

    'onNext': function(tab, navigation, index) { 
     var $valid = $("#wizardForm").valid(); 
     if (!$valid) { 
     $validator.focusInvalid(); 
     return false; 
     } 
    }, 
    'onTabClick': function(tab, navigation, index) { 
     var $valid = $("#wizardForm").valid(); 
     if (!$valid) { 
     $validator.focusInvalid(); 
     return false; 
     } 
    }, 
    }); 
}); 

// This function sets the buttons enable and visibility based on which tab is active. 
function set_buttons(index) { 
    if(index == 0) { 
     // On first tab, so disable the previous button 
     $('#prev').prop('disabled',true); 
     $('#next').removeClass('hidden');  // Make sure next is visible 
     $('#btn_save').addClass('hidden');  // Make sure save button is hidden. 
    } else if(index == navigation.find('li').length) { 
     // On last tab, so hide the next button, make the save button visible 
     $('#prev').prop('disabled',false);  // Make sure prev is enabled. 
     $('#next').addClass('hidden');   // Make sure next is hidden 
     $('#btn_save').removeClass('hidden'); // Make sure save button is visible. 
    } else { 
     // On a middle tab (not first or last), enable previous and next buttons, hide save button 
     $('#prev').prop('disabled',false);  // Make sure prev is enabled. 
     $('#next').removeClass('hidden');  // Make sure next is visible 
     $('#btn_save').addClass('hidden');  // Make sure save button is hidden. 
    } 
} 

위의 코드를 테스트하지 않았으므로 약간의 오류가있을 수 있지만 꽤 가까워 야합니다. 브라우저의 디버거 (Chrome 또는 FireFox)를 사용하여 오류를 찾으십시오. 마지막 탭 번호를 테스트하기 위해 몇 가지 가정을해야했고 var 인덱스는 탭의 인덱스입니다.

테스트하려면 페이지의 모든 코드가 있어야하지만 주석과 디버거를 사용하여 코드를 찾아 낼 수 있어야합니다.