We Keep Coding

How to create a jQuery click handler based on a matching pattern?

I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/

Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});

Closest() in jQuery doesn't work when at the same level

Problem:
I want (after clicking on a button - this part is OK) to select the closest element with a class .my-textarea, but the using of prev() is not always possible, because the code is dynamic. Could you help?
Details:
I have this HTML code:
<div class="row">
<div class="label">Description:</div>
<textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
<button type="button" class="my-submit" name="my-submit">Save</button>
</div>
And my JS code (in on button with class "my-submit" click event) is:
var text = $(this).closest('.my-textarea').val();
But it's not working. I am getting undefined.
If I tried:-
var text = $(this).prev().val();
I will get the text of the text-area, but as I've mentioned, my code is dynamic and the order and number of elements will change. So, prev() is out of option.
Any idea how to make closest() work?

I always select parent and than search for child with class. That way your element can be placed virtually anywhere in parent.
$(this).parent().find('.my-textarea').val();

Need to Use siblings() instead of closest():-
$('.my-submit').click(function(e){
e.preventDefault();
var text = $(this).siblings('textarea').val();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="label">Description:</div>
<textarea class="my-textarea" name="my-textarea" rows="8" cols="40"></textarea>
<button type="button" class="my-submit" name="my-submit">Save</button>
</div>

You need to refer it using class
closest will traverse up the DOM tree to look for the element, while in this case textarea is sibling of the button.
$('.my-submit').click(function(){
var text = $(this).siblings('.my-textarea').val();
alert(text)
})
DEMO

change visibility of span using jquery

I work on a durandal project.
I have span and button elements in html.
The span elements are hidden and I want to show these on button click.
My problem is that when I hide the span from html- it can't show it from javascript.
I saw this question (on link change visibility of label tag using jquery) and I tried all of the answers- nothing helped me.
(I tried using:
in html:
<span id="mySpan" hidden = "hidden">aaa</span>
or:
<span id="mySpan" style= "visibility:collapse">aaa</span>
or:
<span id="mySpan" style= "display:none">aaa</span>
in javascript:
$("#mySpan").show();
or:
$("#mySpan").css('visibility', 'visible');
I tried all of the optional combinations
)
Note: I want you to know that when I'm not hiding the span from the HTML, and try using toggle(), hide(), show() - it works well.
Example that does not work:
on html page:
<span id="mySpan" hidden = "hidden">aaa</span>
on javascript page:
$("#mySpan").show();

Your HTML is not OK!
Remember, spans are closed <span></span> this way, and not the way you are closing them! That way, only self-closing elements such as: input, img etc are closed!
Try to write this:
<span id="mySpan">Some text!</span>
The CSS would be:
#mySpan {
display: none; // you're using diaplay!
}
Now using jQuery either use this:
$('#mySpan').show()
Or this:
$('#mySpan').css('display', 'block');

Well, your code is all wrong.
The id attribute should only be used once per page. It is meant to be unique so that you can refer to it as a single point in the document. You should change it to class="mySpan" and then select them using $(".mySpan").
visible:collapse is invalid CSS. You probably meant to use visibility, yes?
diaplay:none is also invalid CSS. Probably a typo of display, yes?
There is a hidden attribute in the newest HTML spec (usually called HTML5). I am not sure if you are aware of it; if you are, and you are trying to use it, then you should put the following in your CSS file so that it works in browsers that have not yet implemented it:
*[hidden] {
display: none;
}
Follow-up:
Okay, you want to be able to toggle a span on and off by clicking on a button. This will do it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="myButton">Show/hide the span</button><br>
<span id="mySpan" style="display:none">This is a span with some text in it</span>
<script>
$(function() {
$("#myButton").click(function() {
$("#mySpan").toggle();
});
});
</script>

Seems to be an error in "diaplay"? Try to change:
<span id="mySpan" style="diaplay:none"/>
to:
<span id="mySpan" style="display:none"/>

jQuery update form element

I have a form that I create a checkbox on a click of a button. I am using https://github.com/pixelmatrix/uniform which provides an update function to style dynamically create elements which does not work. I got a work around but my problem is that it also reset the already created elements so they double, triple etc.
They are wrapped in a div with a class of checker. Is there a way to check if the div is around it first before applying my $('.table').find('input:checkbox').uniform(). I have tried different examples but they dont seem to work with my code and my jQuery is still limit.
Thanks
<div class="checker" id="uniform-160">
<span>
<input type="checkbox" name="chbox" id="160" style="opacity: 0;">
</span>
</div>
jQuery:
$(".fg-button").live("click", function(){
$('.table').find('input:checkbox').uniform()
});

Try this:
$('.table input:checkbox').not('div.checker input').uniform()

HTML form creation upon click

What is the correct syntax for creating a form when a div is clicked with javascript? I've made a picture button, and I just want this form to appear in place of the button when clicked, but I can't get how it should look. I only want to use some basic javascript and HTML if possible.
Thanks.

The best way would be to have the form already built in your html and then just use javascript or jquery to change the display style when the button is clicked.

I would recommend using an <a> tag. But a div would work too.
HTML
<a class="myLink">Button</a>
<div class="form">
<form>
...
</form>
</div>
CSS
.form {display:none;}
jQuery
$(function(){
$(".myLink").live("click", function(){
if(!$(".form").is(":visible"))
{
$(".form").show();
}
});
});