1

Tengo la siguiente situación. Estoy usando pestañas para manejar distintos contenidos dentro de mi página web, en donde existe en cada una de ella un formulario.

Lo que me esta sucediendo, es que cuando quiero capturar el id del formulario de la pestaña activa, siempre me toma el de la primera pestaña. El id lo capturo al realizar un evento onChange en un input file. A continuación les dejo el código para ver si me pueden ayudar.

Gracias.

Html de la pestaña 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 de la pestaña 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> 

Código Javascript

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

El resultado de idFormula es siempre idfrom

0

3 respuestas 3

2

Hicee un pequeño ejemplo con tab que proporciona 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>

El evento change sobre el campo tipo file seria así:

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

Lo mas probable es que la librería que usas para pestañas solo oculte y no remueva el contenido html cuando cambias de pestaña. Entonces este es el problema:

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

Aquí el selector elige el primer <form> que encuentra, que es siempre el de la pestaña 1.

Intenta esto:

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

El selector elige al <form> padre del <input> cuyo evento se acaba de disparar.

0

esto te podria ayudar!

$(":file").on("change","form",function(){
    var idFormula =  $(this).attr('id');
});
1
  • Esta respuesta se encuentra dentro de las publicaciones de baja calidad. Para evitar esto, por favor agregue una descripción clara de qué hace este código y cómo le puede ayudar al usuario que hizo la pregunta. Commented el 29 oct. 2018 a las 18:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.