Home / Questions / 208938
Accepted
Yoel Rodriguez
Asked: 2020-10-30 08:39:45 +0800 CST 2020-10-30 08:39:45 +0800 CST

How to read the id of a form when changing from one tab to another within the same page

  • 772

I have the following situation. I am using tabs to manage different contents within my web page, where there is a form in each one of them.

What is happening to me is that when I want to capture the form id of the active tab, it always takes the one of the first tab. I capture the id when performing an onChange event on an input file . Here is the code to see if you can help me.

Thanks.

Html from tab 1

<form class="form-signin" id="idfrom" method="post" action=""> 
      <label><strong>Subir Documentos (Solo JPG, JPGE, DOC, PDF XLS)</strong></label>
      <input type="file" name="uploadfile" id="uploadfile">
</form>

html from tab 2 

<form class="form-signin" id="fidcoment" method="post" action=""> 
      <label><strong>Subir Documentos (Solo JPG, JPGE, DOC, PDF XLS)</strong></label>
      <input type="file" name="uploadfile" id="uploadfile">
</form>

JavaScript code

$(":file").change(function(){
    var idFormula =  $("form").attr('id');
});

The result of idFormula is always idfrom

javascript

3 Answers

  1. Best Answer

    I made a little example with tab which provides bootstrap:

    $(":file").on("change",function(){
  var idFormularioActivo = $(".tab-pane.active").find("form").attr('id');
  alert("El id del form es "+idFormularioActivo);
});
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Formulario1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Formulario2</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <form class="form-signin" id="idfrom" method="post" action=""> 
      <label><strong>Subir Documentos (Solo JPG, JPGE, DOC, PDF XLS)</strong></label>
      <input type="file" name="uploadfile" id="uploadfile">
     </form> 
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <form class="form-signin" id="fidcoment" method="post" action=""> 
      <label><strong>Subir Documentos (Solo JPG, JPGE, DOC, PDF XLS)</strong></label>
      <input type="file" name="uploadfile" id="uploadfile">
    </form> 
  </div>
</div>

<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>

    The change event on the file type field would be like this:

    $(":file").on("change",function(){
  var idFormularioActivo = $(".tab-pane.active").find("form").attr('id');
  alert(idFormularioActivo);
});
    • 2

  2. Most likely the library you use for tabs only hides and does not remove the html content when you switch tabs. So this is the problem:

    var idFormula = $("form").attr('id');

    Here the selector chooses the first <form>one it finds, which is always the one from tab 1.

    Try this:

    var idFormula = $(this).parent('form').attr('id');

    The selector chooses the <form>parent <input>whose event was just fired.

    • 0

  3. this could help you!

    $(":file").on("change","form",function(){
    var idFormula =  $(this).attr('id');
});
    • 0