Develop Reference

jQuery - Added Input will not allow me to add text

After I create an input it will not allow me to add text. I am working on a project that allows the user to edit their text by clicking on the added text to make a changes.
CodePen example
var $input = $("#change");
var $btn = $("#add");
var $btne = $("#edit");
var $content = $("#content");
$btne.hide();
$btn.click( function(){
var typedInfo = document.getElementById("change").value;
var item = $('<li></li>');
item.append(typedInfo);
$content.append(item);
$content.on("click","li", function(){
});
item.click( function(){
$btne.show();
item.text(" ");
var typeNew = $('<input type="text" id="newInput" value = "edit">')
item.append(typeNew);
$btne.click( function(){
var editedInput = document.getElementById("newInput").value;
item.text(editedInput);
$btne.hide();
});
});
});

As you may be know, when you click on an element, the click event is propagated to the top of the document.
So, when you click on a new input, the click is propagated to his parent <li> and the item.click(function(){...}) is called once again and the code is an other time executed and it rebuild all the current input area.
You have to stop the click event propagation to his parents.
typeNew.click( function(e){
e.stopPropagation();
});
The full code
item.click(function(){
$btne.show();
item.text(" ");
var typeNew = $('<input type="text" id="newInput" value = "edit">')
item.append(typeNew);
// Click on the new input
typeNew.click( function(e){
e.stopPropagation();
});
// Click on button
$btne.click( function(){
var editedInput = document.getElementById("newInput").value;
item.text(editedInput);
$btne.hide();
});
});
stopPropagation documentation

item.click are in loop, always you click in item a new input is created. You can check for only one click with JQuery:
$("some_selector").one("click",function);

Append Text to Textbox on Click

I currently have a selection of buttons and on click of a button I want to add the text from the button into a text-box. Every time I click on the button I want to be able to append on to whatever I have in the input field.
What I currently have
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($(this).text());
});
What I'm Aiming for
$('#js-AddFilterOpenBracket').click(function () {
$(this).text().appendTo($('#js-FilterString'));
});

No need to use appendTo as it should be used for elements. Rather, manually append to the current value then set it
$('#js-AddFilterOpenBracket').click(function () {
var currentVal = $('#js-FilterString').val();
var newVal = currentVal + $(this).text();
$('#js-FilterString').val(newVal);
});

May not be the bast way but you could do this
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($('#js-FilterString').val() + $(this).text());
});

When button is clicked how to get the text from the textbox immediately above it

I have some code like:
<input type="text" class="searchpersontxtbox" />
<input type="button" value="Find" class="findpersonbtn btn" disabled="disabled" />
There is a button click event:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this);
var searchbox = $(this).closest('.searchpersontxtbox');
alert(show the searchbox text here);
});
});
So when the button is clicked I'm trying to get the text in the searchbox and alert it to the screen.
One point to note is that there could be multiple searchboxes on the page with 'searchpersontxtbox' class.
So I'm wanting to get the text from the textbox that is right above the button.
Can anyone help me here?

I think hes looking for something relative... like this..
$(document).ready(function(){
$('.findpersonbtn ').click(function () {
var findpersonbutton = $(this);
//do relative search here...
var searchbox = findpersonbutton.parent().find('.searchpersontxtbox');
alert(searchbox.val());
});
});

This isn't how closest works. Without seeing the rest of your markup, one way to do this would be:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this)
, searchbox = $(this).prev();
alert(searchbox.val());
});
});
You can use prev to get the element right above the clicked .findpersonbtn.

$(function(){
$('button').click(function() {
var text = $('textarea').val();
alert(button);
}
});
something like that? search for getting textarea value with jQuery, then apply that method in a variable and alert out it's text. should work?

You may want to check out .previousSibling(), which should return the previous input.
http://jsfiddle.net/TbYup/

How to create radio buttons dynamically?

i have a problem in creating radio buttons dynamically, i have a text box and a button, i asked the user to input a value in the text field then i retrieve the text box value and use it to create a radio button when he press a button, i tried this code in javaScript but it doesn't create a radio button on clicking the specified button:
<script type="text/javascript" >
function createRadioElement(value, checked) {
var radioHtml = '<input type="radio" value="' + value + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
$( '#admin' ).live( 'pageinit',function(event){
$( "#AddButton" ).bind( "click", function(event, ui) {
var x=document.getElementById('option').value
createRadioElement(x, checked);
});
});
</script>
`

Try the following for the creation of a radio input:
function createRadioElement(elem, value, checked) {
var input = document.createElement('input');
input.type = 'radio';
input.value = value;
if (checked) {
input.checked = 'checked';
}
elem.parentNode.insertBefore(input, elem.nextSibling);
}
JS Fiddle demo.
References:
createElement().
insertBefore().
parentNode.

Here are the problems as I can see them:
In your #AddButton click function, you pass a variable checked which does not exist.
You don't pass the element returned from createRadioElement to anything that will insert it into the DOM
I fixed those by basically changing your #AddButton click function to the following:
$("#AddButton").bind("click", function(event) {
var x = document.getElementById('option').value,
$ra = $('#RadioArea');
$ra.html(createRadioElement(x, true));
});​
You'll probably want to change this so it appends the radio button to the end of whatever your #RadioArea element is instead of replacing the contents completely.
See demo

Set var to .text()

So I would like to set a variable to the text of an element when that element is clicked:
$('.clickme').click(function() {
var selected;
var selected = this.text();
});
I've looked at the documentation and I believe this should work. Any ideas what the issue might be?

Try:
var selected = $(this).text();
If no luck, maybe it's form element so it has value:
var selected = $(this).val();
If still no luck let us know what is clickme (div? span?) and try this as "last resort":
var selected = $(this).html();

if .clickme is input or textarea :
var selected;
$('.clickme').click(function()
{
selected = $(this).val();
});
Other :
var selected;
$('.clickme').click(function()
{
selected = $(this).text();
});

You need to wrap the this with the jQuery object...
var selected = $(this).text();

If your listener is on a button, IE doesn't know the difference between the text and value properties and jQuery doesn't fix it, getAttribute doesn't help either. You need to use getAttributeNode:
<button value="the value"
onclick="alert(this.getAttributeNode('value').value);">The text</button>