We Keep Coding

I want to add a element with prepend jQuery

I want to add a new a element when I click the button but it doesnt work
<div id="add-container">
<input type="text"> <button>add</button>
<div id="megobrebi">
<a>Levani</a>
<a>Markozi</a>
<a>Zuka</a>
<a>Sandro</a>
</div>
</div>
$(document).ready(function() {
$('#add-container').on('click', 'button', function(){
var value = $('#add-container input').val;
var html = '<a>' + value + '</a>'
$('$megobrebi').prepend(html);
})
})

You have two errors in the handler for the click event on the button.
First, you need to call the jQuery val method in order to get the value of the input.
Second, the selector for the DOM element where you want to prepend is not right.
Therefore, the code should be:
$('#add-container').on('click', 'button', function(){
var value = $('#add-container input').val();
var html = '<a>' + value + '</a>'
$('#megobrebi').prepend(html);
})

The last line should be
$('#megobrebi').prepend(html);

Change your script code to
$(document).ready(function() {
$('#add-container button').on('click', function(e){
e.preventDefault(); // You may use this line if you wish to disable the default functionality button.
var value = $('#add-container input').val();
var html = '<a>' + value + '</a>';
$('#megobrebi').prepend(html);
});
});

How can I remove the individual input box through the jquery remove function?

Here is my code. In that code the remove function works on only one input box, however I want that, it work on every input box which created through the append function.
<script>
$(document).ready(function(){
var one=1;
$("#add").click(function(){
one++;
$("#form_value").append("<div id=\"man"+one+"\"><br><input type=\"text\" placeholder=\"Product\"name=\"product["+one+"]\"><div class=\"w3-col l4\"> <input type=\"text\" placeholder=\"Product description\"></div><button type=\"button\" id=\"rem"+one+"\">Remove</button></div>");
$("#rem"+one+"").click(function(){
$("#man"+one+"").remove();
});
});
});
</script>

This happens because the value of one will increase each time you click on the add button, and this is the value that is used within the remove event.
If you add console.log(one) within the remove event you will see that one is always the last number.
A better way to do this would be to assign the div/remove elements to jquery objects and remove that instead.
e.g.
var one = 1;
$("#add").click(function() {
one++;
var $div = $("<div id='man" + one + "'></div>");
$div.append("<br><input type=\"text\" placeholder=\"Product\"name=\"product[" + one + "]\"><div class=\"w3-col l4\"> <input type=\"text\" placeholder=\"Product description\"></div>");
var $remove =
$("<button type='button' id='rem" + one + "'>Remove</button>")
.click(function() {
$div.remove();
});
$("#form_value").append($div.append($remove));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_value"></div>
<button id="add">Add</button>

How to get the textbox value which is dynamically added to a table row inside a <td>

I am appending a <td> having an input text to a row. I want to get the value of this textbox and use it in another function.
Below is the code snippet :
row.append($('<td ><input type="text" value=' + item.Marks + ' size="10px" class="marks" id="txtmarks" maxlength="3"/></td>'));
Thanks in advance.

Split it in two statements:
var input = $("<input type="text" size="10px" class="marks" id="txtmarks" maxlength="3"/>").val(item.Marks);
var newRow = $('<td></td>').append(input);
row.append(newRow);
So, now you have a reference to your input, and the code looks much cleaner.

converting input type text to plain text

i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).
as an example:
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:
this is an example text after pressing the button!
click!
i have been searching around and have not found a working solution yet, hope someone can help me out

$('button').click(function(){
$('body *').replaceWith(function(){
return this.value || this.innerHTML;
});
});
http://jsfiddle.net/pYw9P/

This should do it I think.
function disable_all() {
var fs = $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
span.insertAfter(fs);
fs.remove(); // or fs.hide(); in case you want it later.
}

Try:
HTML:
<input type="text" id="fileserver">
<button id="but">click!</button>
JS:
$( "#but" ).click(function() {
var text=$( "#fileserver" ).val();
$( "body" ).html(text);
});
DEMO

This should be helpful to you -
There are several way to achieve your task :
Solutions 1 -
function disable_all()
{
$('#content').remove();
$('#fileserver, button').hide();
$('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}
Working Fiddle
Solution 2 -
function disable_all()
{
$("body").html($("#fileserver").val());
}
Working Fiddle

you can do this hiding the textbox
<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>
and
$(document).ready(function(){
$("#result").hide();
$("#btn").click(function(){
$("#result").text($("#fileserver").val());
$("#fileserver").hide();
$("#result").show();
});
});
demo

The first "non-jQuery" answer...
your HTML:
<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>
your Javascript:
document.getElementById('btn').onclick = disable_all;
function disable_all() {
var input = document.getElementById('fileserver');
var disp = document.getElementById('fileserver_text')
disp.innerHTML = input.value; // get the text from the input and set the div text
disp.style.display = 'block'; // show the div
input.style.display = 'none'; // hide the input
}
JSFiddle

If you are using jQUery, this will help you,
http://jsfiddle.net/DCak6/
function save(){
$('input,textarea').each(function(){
var $this = $(this);
$this.after('<span class="value">' + $this.val() + '</span>');
$this.remove();
})
}

You may be better off with taking the text from the text field, copying the value and putting it into another div
<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
<script type="text/javascript">
function disable_all() {
$('#textToCopy').html($('#fileserver').val());
$('#fileserver').hide();
}
</script>

Add / Delete Rows from Table

I have created a table in Twitter Bootstrap here
I want to be able to do 2 things with it
Delete rows by pressing delete icon - will delete that row
Add a new name by adding text (name) to input field and then pressing "add new row"
DEMO - http://jsfiddle.net/qxdz4/2/
Looking for a way to do this with JavaScript / jQuery
My Code
<div class="input-prepend input-append"><span class="add-on"><i class="icon-picture"></i></span>
<input class="span2"
id="appendedInputButton" type="text" placeholder="Add New Name Here">
<button class="btn" type="button">Add New Row</button>
</div>
<table id="users" class="table table-bordered table-condensed">
<tr>
<th>name</th>
<th></th>
</tr>
<tr>
<td>Mike
</td>
<td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
data-original-title="Delete Row"><i class="icon-remove"></i></a>
</td>
</tr>
<tr>
<td>John
</td>
<td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
data-original-title="Delete Row"><i class="icon-remove"></i></a>
</td>
</tr>
<tr>
<td>Mary
</td>
<td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
data-original-title="Delete Row"><i class="icon-remove"></i></a>
</td>
</tr>
</table>
Notes
Clicking the delete button should delete the row
Typing into the input field and pressing "add new row" button should add a new
row to the end of the table with the Name filled in

You can easily remove the row by doing this:
$('td.taskOptions a.tip-top').on('click', function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(this).parents('tr').remove();
});
Similarly, adding a new row can be done as follows:
$('button.btn').click(function(e) {
e.preventDefault();
var the_name = $.trim($('#appendedInputButton').val());
var new_row = $('<tr>\
<td>\
'+the_name+'\
</td>\
<td class="taskOptions">\
<i class="icon-remove"></i>\
</td>\
</tr>');
new_row.appendTo($('#users'));
});
Please note that it might be worth adding a more specific class name to the button (when clicked to add the row) to avoid any confusion. An ID would work just as well.
I've updated your jsFiddle with the additional functionality. You can see here.

I don't know how you obtain each row's pk data (data-pk) attribute. That's up to you
On document.Ready
$('[rel=tooltip]').tooltip();
function bindCloseButtons(){
$("#users td.taskOptions a").click(function(e){
$(this).parent().parent().remove();
});
}
function addTableRow(name , pk){
// name column
var row = $("<tr></tr>");
row.append('<td>'+name+'</td>');
// close button
var btnClose = $('<td class="taskOptions"> <i class="icon-remove"></i></td>');
row.append(btnClose);
$("#users").append(row);
bindCloseButtons();
$('[rel=tooltip]').tooltip();
}
$("#addNew").click(function(e){
var name = $("#appendedInputButton").val();
var pk = 1; // TODO: set your pk here
addTableRow(name, pk);
});
bindCloseButtons();
Here's a fiddle:
http://jsfiddle.net/qxdz4/16/

First you create one method AddmultipleInput()
Inside the function,
.AddMultipleInput = function (btnAddId, btnDelId, inputContainerIdPrefix, inputContainerCss, firstChildInputIdPrefix) {
if ($('.' + inputContainerCss).length < 2) {
$('#' + btnDelId).attr('disabled', 'disabled');
}
$('#' + btnAddId).click(function () {
var num = $('.' + inputContainerCss).length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#' + inputContainerIdPrefix + num).clone().attr('id', inputContainerIdPrefix + newNum);
newElem.children().each(function () {
var idPrefix = $(this).attr('id').substring(0, $(this).attr('id').length - 1);
var namePrefix = $(this).attr('name').substring(0, $(this).attr('name').length - 1);
$(this).attr('id', idPrefix + newNum).attr('name', namePrefix + newNum);
})
// insert the new element after the last "duplicatable" input field
$('#' + inputContainerIdPrefix + num).after(newElem);
// enable the "remove" button
$('#' + btnDelId).attr('disabled', '');
// business rule: you can only add 5 names
if (newNum == 5)
$('#' + btnAddId).attr('disabled', 'disabled');
});
$('#' + btnDelId).click(function () {
var num = $('.' + inputContainerCss).length;
$('#' + inputContainerIdPrefix + num).remove();
$('#' + btnAddId).attr('disabled', '');
if (num == 2)
$('#' + btnDelId).attr('disabled', 'disabled');
});

$('.icon-remove').live('click',function(){
$(this).parent('tr').remove();
});
If you are using jQuery 1.7 or above, then use .on instead of .live.

Add a class to your delete links (like delete-row) and use something like:
$(document).on("click",".delete-row",function(ev) {
ev.preventDefault();
$(this).tooltip('hide');
$(this).parents("tr").first().remove();
});
Note: "$(this).tooltip('destroy');" would be better than "hide", but your fiddle bootstrap version doesn't support destroy yet. Also, you can set $("#users") instead of $(document) as handler for this event if you want, so long as the delete-row buttons are children of the handler the event gets delegated properly.
To add a line the answer of BenM should work perfect.
PS:
.parents(selector) function travels more than one level up the DOM tree, while .parent() travels a single level up the DOM tree.
.parents(selector) function selects all parents that match the selector, so in case there is a change you end up putting a table inside a table (accidentally im sure) you should use .first(), ensuring you dont remove the wrong row.
Edit: As mentioned by BenM, the previous code would not work with new lines, forgot the add part of the question, the new code should work.

I would suggest you yo use following jQuery functions:
on(), click(), remove(), append()
Please do research on this, also look at the jQuery selectors in order to find how to select proper row.