Сосредоточение внимания на требуемом вводе на другой вкладке в одной форме - PullRequest
Новая
       19

Сосредоточение внимания на требуемом вводе на другой вкладке в одной форме

0 голосов
/ 21 октября 2019

Я хотел бы сосредоточиться на необходимом <input> при нажатии на кнопку отправки, но, поскольку у меня есть несколько вкладок, я не уверен, как это сделать. Прямо сейчас, когда я нажимаю "Отправить", он просто остается на текущей вкладке и не показывает, что требуемый <input> находится на другой вкладке.

HTML: 

<form name="myForm" action="/action_page.php">
  <script src="myScript.js"></script>

  <button type="button" class="tablink" onclick="openPage('general1', this, '#E5E5E5')" id="defaultOpen" style="background-color:#E5E5E5;">General 1</button>
  <button type="button" class="tablink" onclick="openPage('general2', this, '#E5E5E5')" >General 2</button>

  <div id="general1" class="tabcontent"  style="display:block;">
    <div  class="my-columns my-columns-3" id="general1" style="background-color:#EEEEEE;">

      <div class="column">
        <div id="groove">
          <h class="textcolor" style="text-decoration: underline;">Company Name:</h><br><br>
          <span style="display:block;text-align:left;"><input class="next"  type="text" name="Branch_name" autofocus required></span>
          <br>
        </div>  
      </div>
    </div>

    <div id="general2" class="tabcontent">
      <div  class="my-columns my-columns-4" id="general2" style="background-color:#EEEEEE;">
        <div class="column">

          <input class="next"  type="number" name="ReOrderLevel" min="0" max="100" value="0" 
                 required></span>
        <input class="next" list="browsers" name="browser" required>
      </div>
    </div>
  </div>    

  <input type="submit" value="Submit">
</form>

JavaScript: 


function openPage(pageName, elmnt, color) {
  // Hide all elements with class="tabcontent" by default */
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the background color of all tablinks/buttons
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }

  // Show the specific tab content
  document.getElementById(pageName).style.display = "block";

  // Add the specific color to the button used to open the tab content
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
...