0

Mediante un array creo formularios con php, cada formulario tiene un input text el cual esta oculto (hidden) , quiero mostrarlo mediante un botón en cada uno de esos formularios.

Parecido a las publicaciones de facebook que para poder comentar tienes que darle click al botón "Comentar" y te aparece el inpux Text

Este es mi código jquery.

$("#mosCom").click(function(){
    $("#comend").show();
});

"moscom" es el id de los botones mostrar en cada formulario y "comend" es el id del input text oculto.

El problema es que todos los formularios tienen mismo id pensaba en crear un id con un contador "moscom1", "moscom2", pero me pregunto como podría seleccionar ese id en general con jquery y de ahí mostrar el input text correspondiente de ese formulario.

2 respuestas 2

1

yo utilizaría clases para esto. Cada formulario tendría su class="myForm" por ej. Dentro de cada formulario tendrás el botón class="comentar". Por lo tanto, podrías hacer algo como:

html:

<form class="myForm" action="...">
    <textarea name="comentario" class="hidden"></textarea>
    <button class="comentar">Comentar</a>
</form>

Javascript:

$(".comentar").on("click", function(){
    $(this).parentsUntil('textarea.comentario').show();
});

Esto es una aprox, depende de como tengas hecho tu html, pero en general podrás hacer referencia al parent del botón que ha llamado a la acción.

1
  • Gracias me ayudo mucho tu codigo , este fue el resultado: $("[id*=mosCom]").click(function(){ $(this).parent().siblings('div#comend').show(); });
    – user7116
    el 21 jun. 2017 a las 5:55
0

Podrías usar simplemente $(selectorBoton).siblings(selectorCampo) que te buscaría a todos campos que son hermanos del botón, a continuación te ilustro un «ejemplo» es obvio que deberás personalizar los selectores selectorBoton y selectorCampo usando ya sea un nombre de clase filtro o a través de un atributo data-*, puesto que no es una practica muy recomendable usar selectores tan generales para tareas tan especificas.

$("textarea").hide();

$("button").on("click", function(){
    $(this).siblings('textarea').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<form action="...">
    <textarea name="comentario"></textarea>
    <button type="button">Comentar</button>
</form>
<form action="...">
    <textarea name="comentario"></textarea>
    <button type="button">Comentar</button>
</form>
<form action="...">
    <textarea name="comentario"></textarea>
    <button type="button">Comentar</button>
</form>
<form action="...">
    <textarea name="comentario"></textarea>
    <button type="button">Comentar</button>
</form>
<form action="...">
    <textarea name="comentario"></textarea>
    <button type="button">Comentar</button>
</form>

Espero te sea una alternativa de utilidad.

Tu Respuesta

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