Select a form created using a PHP array?

0

By array I create forms with php , each form has a input text which is hidden (hidden) , I want to show it by a button in each of those forms.

Similar to the Facebook posts that you have to click on the "Comment" button to see what is going on, and the Text inpux appears

This is my code jquery .

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

"moscom" is the id of the buttons show in each form and "comend" is the id of the hidden text input.

The problem is that all the forms have the same id I was thinking about creating an id with a "moscom1" , "moscom2" , but I wonder how I could select that id in general with jquery and from there show the input text corresponding% of that form.

    
asked by Hans Leo Quiroz Marroquin 21.06.2017 в 07:05
source

2 answers

2

I would use classes for this. Each form would have its class="myForm" eg. Within each form you will have the button class="comment". Therefore, you could do something like:

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();
});

This is an approx, it depends on how you have done your html, but in general you can refer to the parent of the button that has called the action.

    
answered by 21.06.2017 / 07:24
source
1

You could simply use $(selectorBoton).siblings(selectorCampo) that would look for you in all fields that are brothers of the button, then I illustrate a «example» It is obvious that you will have to customize the selectors selectorBot and field selector using either a name of clase filter or through an attribute data-* , since it is not a highly recommended practice to use as general selectors for tasks so specific.

$("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>

I hope it's a useful alternative.

    
answered by 21.06.2017 в 09:24