We Keep Coding

Add live text from input field to another div with Checkbox

I have an input field with Add button below it. Also have another Div class named .new-option-content
What I am trying to do is if anyone type something in the input filed and click the +ADD button this text of the input filed will append with a Check box inside .new-option-content div.
Here is the Fiddle
I tried with this but I guess with this process I can't get the result.
$( ".checklist-new-item-text" )
.keyup(function() {
var value = $( this ).val();
$( ".new-option-content" ).text( value );
})
.keyup();
I am not good with advance jquery. I did tried to find something similar but failed. I am not sure if this can be done with jquery.
Any help or suggestion will be appreciated.

$("#add").click(function(){
var newLabel = $("#optionInput").val();
if (!newLabel) return; //avoid adding empty checkboxes
var newOption = '<div class="checkbox"><label><input type="checkbox">' + newLabel +'</label></div>';
$(".new-option-content").append(newOption);
$("#optionInput").val(''); //clearing value
})
Fiddle: http://jsfiddle.net/has9L9Lh/8/
If you want to use it in multiple places on your page, you can try this modified version:
$(".new-option-add").click(function(){
var labelInput = $(this).parent().parent().find(".checklist-new-item-text")
var newLabel = labelInput.val()
if (!newLabel) return; //avoid adding empty checkboxes
var newOption = '<div class="checkbox"><label><input type="checkbox">' + newLabel +'</label></div>';
// where to append?
var listToAppend = $(this).attr("data")
$("." + listToAppend).append(newOption);
labelInput.val(''); //clearing value
})
We are using data attribute value on the button, to assign class name of the list, which need to be updated.
Fiddle: http://jsfiddle.net/has9L9Lh/18/

Here is how you can do it:
$(function() {
$('.new-option-add').on('click',function() {
var noc = $('.new-option-content'),
val = $('.checklist-new-item-text');
!val.val() || noc.append(
$('<div/>',{class:'checkbox'}).html(
$('<label/>').html( $('<input/>', {type:'checkbox'}) )
.append( ' ' )
.append( val.val() )
)
);
val.val('');
});
});
DEMO
And this should work for multiple sections:
$(function() {
$('.new-option-add').on('click',function() {
var section = $(this).closest('section'),
noc = $('.new-option-content', section),
val = $('.checklist-new-item-text', section);
!val.val() || noc.append(
$('<div/>',{class:'checkbox'}).html(
$('<label/>').html( $('<input/>', {type:'checkbox'}) )
.append( ' ' )
.append( val.val() )
)
);
val.val('');
});
});
DEMO

Many have answered, yet another option is to use .clone(), cause otherwise you can end up in a maintainence nightmare, so something like
$(".new-option-add").click(function() {
var checkbox = $(".checkbox:first").clone(), value;
value = $(".checklist-new-item-text").val();
checkbox.html(checkbox.html().replace('Sample 1', value));
checkbox.appendTo($(".new-option-content"));
})
http://jsfiddle.net/has9L9Lh/19/

you can do this by adding this code
on click event
$('#yourDiv').append(' <label><input id="chkbox" type="checkbox"> "+$('#yourText').val() +" </label>');

How to add image next to comment text JQuery

I want to be able when I press button "Submit" to add dynamically image. Something like the image below.
I have researched by my self, but couldn't find any solution. Any kind of help will be helpful :)
Live Demo
HTML:
<textarea id ="comments" cols="30" rows="3"></textarea>
<input type="submit" value="Submit" id="submit"/>
<div id="divComments"></div>
JQuery:
function addComment(name1) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var div = $('<div />', { class: 'CommentStyle' });
$('<label />', {
id: 'comment' + id,
text: name1
}).appendTo(div);
div.appendTo(container);
}
$('#submit').click(function () {
addComment($('#comments').val());
$('#comments').val("");
});

Check That DEMO
That Should do your job
var img = $('<img>').attr("src", 'http://ssl.gstatic.com/accounts/ui/logo_2x.png').appendTo($('#divComments'));

reset input fields not working (Javascript)

Here is my JSFiddle: http://jsfiddle.net/kboucheron/XVq3n/15/
When I start a list of items and I click on "Clear", I would like to text input be cleared as well.I'm not able to clear the fields
<input type="text" placeholder ="Add List" id="listItem"/>
<button id="addButton">add Item</button>
<button id="clearButton">Clear Items</button>
<ul id="output"></ul>
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem').value;
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});

Just need to make this change here:
var text = document.getElementById('listItem');
You had this:
var text = document.getElementById('listItem').value;
What you are doing is getting the value of the input text, when you actually want the input element.
Also here is the updated fiddle: http://jsfiddle.net/XVq3n/16/

you are referring in your code to input's value, replace
var text = document.getElementById('listItem').value
with
var text = document.getElementById('listItem')

Ok, it's a really simple (but easy to make) error. Try this change and it should work:
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem');
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
Basically, you did .value one too many times. Hope that helps.

Add a checkbox for the innerHTML in javascript

I have a page which contains a 10 items(formatted list).Here in this page I need to add check box for each item and add the item as the value to each check box.when the user click on the check box the selected value should be passed to a new page.Can anyone help me how to add a check box for the innerHTML in java script.
Code:
var newsletter=document.getElementById("block-system-main");
var districolumn=getElementsByClassName('view-id-_create_a_news_letter_',newsletter,'div');
if(districolumn!=null)
{
var newsletterall=newsletter.getElementsByTagName('li');
alert(newsletterall[0].innerHTML);
var all=newsletter.innerHTML;
newsletter.innerHTML="<input type='button' onclick='changeText()' value='Change Text'/>";
}
function changeText()
{
alert("dfgsdg");
}

I don't exactly understand what each part of your code is doing, but i'll try and give a general answer:
In your HTML, do something like this:
<form id="myForm" action="nextPage.com">
<div id="Boxes"></div>
</form>
Change the above names to wherever you want your checkboxes to be written.
And your function:
function changeText()
{
for(var i=0 ; i < newsletterall.length ; i++)
{
var inner = document.getElementById("Boxes").innerHTML;
var newBox = ('<input type="checkbox" name="item[]" value="' + newsletter[i] + '>' + newsletterall[i]);
document.getElementById("Boxes").innerHTML = inner + newBox;
}
document.getElementById("myForm").submit();
}
The last line of code submits the checkboxes automatically. If you don't want that, remove that line, and add a submit button to the form myForm.

​
$('ul​​​#list li').each(
function() {
var me = $(this),
val = me.html(),
ckb = $('<input type="checkbox" />');
ckb.click(function() {
var where=val;
window.location.href='http://google.com/?'+where;
});
me.html('');
me.append(ckb).append($('<span>'+val+'</span>'));
}
);​​​​

jQuery: onclick, edit field and show+save into an variable

Right now I have this in Javascript without jQuery:
Here is it: http://jsbin.com/ewihu3
It's working just fine, but I wish to use jQuery for making the code simpler and shorter.
I want exactly same things to do as on the example above, that when you click on the text, it should turn into an input field. And on blur it should display what you've edited in the box, and then make a variable (like e.value on the example above) so I can send that in a ajax call later.
How can i do this in jQuery?

You can use the jEditable plugin
Or you can start something similar pretty simply by yourself too, with something like this:
$('span.editable').click(function() {
var input = $('<input type="text" />', {
value: $(this).text()
}).click(function() {
$.get('editsave.php?tekstny=' + $(this).value(), function(response) {
var span = $('span', {
text: response
});
$(this).replaceWith(span);
});
});
$(this).replaceWith(input);
});

Editable header or Button by clicking on edit button, type your own text and click on Ok to replace your text.
function editable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "true";
h1.setAttributeNode(att);
}
function noteditable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "flase";
h1.setAttributeNode(att);
}
function editable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "text";
input.setAttributeNode(att);
}
function noteditable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "button";
input.setAttributeNode(att);
}
$('.my-button').click(function() {
$(".my-textbox").focus()
});
$('.my-button2').click(function() {
$(".button").focus()
});
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class='my-textbox' contenteditable="false">Hello World</h1>
<button class='my-button' onclick="editable()">Edit</button>
<button onclick="noteditable()">OK</button>
<br>
<br>
<br>
<input type="button" class="button" value="Hello World" />
<br>
<br>
<button class='my-button2' onclick="editable2()">Edit</button>
<button onclick="noteditable2()">OK</button>