Я создал 4 вкладки с помощью начальной загрузки, каждая вкладка имеет отдельные формы, и на каждой вкладке также есть кнопка отправки. Теперь, как отправить форму по отдельности.
Например, я заполнил 1-ю форму вкладки и нажал кнопку отправки иперейдите на 2-ю вкладку, заполните форму, нажмите кнопку отправки и перейдите на 3-ю вкладку, заполните форму, нажмите кнопку отправить вот так ..
Fiddle here ..
FIDDLE HERE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12" id="contactForm">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-bank-tab" data-toggle="tab" href="#nav-bank" role="tab" aria-controls="nav-bank" aria-selected="true">Bank</a>
<a class="nav-item nav-link" id="nav-cash-tab" data-toggle="tab" href="#nav-cash" role="tab" aria-controls="nav-cash" aria-selected="false">Cash</a>
<a class="nav-item nav-link" id="nav-pnl-tab" data-toggle="tab" href="#nav-pnl" role="tab" aria-controls="nav-pnl" aria-selected="false">P&L</a>
<a class="nav-item nav-link" id="nav-tds-tab" data-toggle="tab" href="#nav-tds" role="tab" aria-controls="nav-tds" aria-selected="false">TDS Creations</a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show tabContent active" id="nav-bank" role="tabpanel" aria-labelledby="nav-bank-tab">
<form role="form" method="post" action="" id="contactForm">
<div class="selectContainer" id="bankTab">
<select multiple="multiple" name="">
<option name="opt1" value="AB">Allahabad Bank</option>
<option name="opt2" value="AN">Andhra Bank</option>
<option name="opt3" value="BI">Bank of India</option>
<option name="opt4" name="opt3" value="BB">Bank of Baroda</option>
<option name="opt5" value="BM">Bank of Maharashtra</option>
<option name="opt6" value="CB">Canara Bank</option>
<option name="opt7" value="CBI">Central Bank of India</option>
<option name="opt8" value="COB">Corporation Bank</option>
<option name="opt9" value="DB">Dena Bank</option>
<option name="opt10" value="IB">Indian Bank</option>
<option name="opt11" value="IOB">Indian Overseas Bank</option>
<option name="opt12" value="OBC">Oriental Bank of Commerce</option>
<option name="opt13" value="PSB">Punjab & Sindh Bank</option>
<option name="opt14" value="PNB">Punjab National Bank</option>
<option name="opt15" value="SB">Syndicate Bank</option>
<option name="opt16" value="UCO">UCO Bank</option>
<option name="opt17" value="UBI">Union Bank of India</option>
<option name="opt18" value="UBOI">United Bank of India</option>
<option name="opt19" value="VB">Vijaya Bank</option>
<option name="opt20" value="SBI">State Bank of India</option>
<option name="opt21" value="IDBI">IDBI Bank</option>
<option name="opt22" value="ICBC">Industrial and Commercial Bank of China</option>
<option name="opt23" value="CSB">China Construction Bank Corporation</option>
<option name="opt24" value="ABC">Agricultural Bank of China</option>
<option name="opt25" value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option name="opt26" value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- First tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" name="submit" id="tabFirst">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetFirst">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-cash" role="tabpanel" aria-labelledby="nav-cash-tab">
<form role="form" method="post" action="" id="scndTab">
<div class="cashContainer" id="cashTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<button type="submit" class="btn submit-control tab_sub" id="tabSecond" name="">Submit</button>
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetSecond">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-pnl" role="tabpanel" aria-labelledby="nav-pnl-tab">
<form role="form" method="post" action="" id="thirdtab_form">
<div class="row">
<div class="form-group col-12">
<label class="control-label p-sm-0 thirdTab" style="left: 35%">Please Select P&L* :</label>
<select class="form-control pnl_slet thirdTab" name="pnlTab" id="pnlTab" required>
<option value="">Choose an items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
<option value="3">Joe3</option>
<option value="4">Joe4</option>
<option value="5">Joe5</option>
</select>
</div>
</div>
</form>
<!-- Third tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabThird" value="Submit" name="tabThird">
<button type="reset" class="btn btn-default tab_sub reset-btn" id="resetThird" value="Reset">Reset</button>
</div>
</div>
</div>
<div class="tab-pane fade tabContent" id="nav-tds" role="tabpanel" aria-labelledby="nav-tds-tab">
<form role="form" method="post" action="" id="forthtab_form">
<div class="tdsContainer" id="tdsTab">
<select multiple="multiple" name="">
<option value="AB">Allahabad Bank</option>
<option value="AN">Andhra Bank</option>
<option value="BI">Bank of India</option>
<option value="BB">Bank of Baroda</option>
<option value="BM">Bank of Maharashtra</option>
<option value="CB">Canara Bank</option>
<option value="CBI">Central Bank of India</option>
<option value="COB">Corporation Bank</option>
<option value="DB">Dena Bank</option>
<option value="IB">Indian Bank</option>
<option value="IOB">Indian Overseas Bank</option>
<option value="OBC">Oriental Bank of Commerce</option>
<option value="PSB">Punjab & Sindh Bank</option>
<option value="PNB">Punjab National Bank</option>
<option value="SB">Syndicate Bank</option>
<option value="UCO">UCO Bank</option>
<option value="UBI">Union Bank of India</option>
<option value="UBOI">United Bank of India</option>
<option value="VB">Vijaya Bank</option>
<option value="SBI">State Bank of India</option>
<option value="IDBI">IDBI Bank</option>
<option value="ICBC">Industrial and Commercial Bank of China</option>
<option value="CSB">China Construction Bank Corporation</option>
<option value="ABC">Agricultural Bank of China</option>
<option value="MUFG">Mitsubishi UFJ Financial Group (Mitsubishi)</option>
<option value="BOC">Bank of China</option>
</select>
</div>
</form>
<!-- Second tab SUBMIT BUTTON -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12">
<input type="submit" class="btn submit-control tab_sub" id="tabForth" value="Submit">
<button type="reset" class="btn btn-default reset-btn tab_sub" value="Reset" id="resetForth">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
Примечание: отдельные вкладки, отдельные кнопки отправки (на каждой вкладке есть кнопки отправки)