Как установить кнопку отправки Все вкладки с функциональностью в JQuery? - PullRequest
0 голосов
/ 15 октября 2019

Я создал 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>

Примечание: отдельные вкладки, отдельные кнопки отправки (на каждой вкладке есть кнопки отправки)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...