We Keep Coding

How to add one or more form by a button and remove it by another button by javascript

i want to add one or more form by a button and remove it by another button by javascript. press one time that button create a form again press that ,then it create same form by one button.
and i can able to insert their values into the database.

<script type="text/javascript">
$(document).ready(function(){
var counter = "2";
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label style="margin-right:5.9%">Nature Of Income ' + ' : </label>' +'<input type="text" name="NatureIncome' +
'" id="textbox' + '" value="" ><br>' + '<br><label style="margin-right:10.2%">Total Amount' + ': </label>'+'<input type="text" name="TotalAmount' +
'" id="textbox' + '" value="" ><br><hr style="border: 1px solid black;">' );
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>

$("#add_button").click(function(){
var intial_field = $(this).data("intial");
var content = '<div id="input_'+intial_field+'"><input type="text" name="user_name[]" /><button id="remove_btn" data-remove="'+intial_field+'">X</button></div>';
$("#recurssion_container").append(content);
$(this).data("intial",intial_field+1);
});
$(document).on("click","#remove_btn",function(){
var remove_element = $(this).data("remove");
$("#input_"+remove_element).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="add_button" data-intial="0">+ Add</button>
<form action="index.php" method="post">
<div id="recurssion_container"></div>
<input type="text" name="user_name[]" />
<button type="submit" name="save">Save</button>
</form>
<?php
if(isset($_POST["save"])){
$user_name_array = $_POST["user_name"];
foreach($user_name_array as $user_name){
if($user_name!=""){
#Put your insert query here
#Please refer how to save data to database https://www.w3schools.com/php/php_mysql_insert.asp
}
}
}
?>

calculate sum of the each dynamic totals

I want to calculate sum of all totals in the below js fiddle, using the following code: http://jsfiddle.net/hEByw/7/
For reference i given the screenshot below. The total calculates the according to the qty*price dynamically. I want to add all totals and display as a grand total. Please anyone can help me regarding this. Thanks in advance
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
var counter = 1;
$(document).ready(function () {
//To multiply two textbox values
$('#qty' + counter).keyup(calculate);
$(this).keyup(calculate);
function calculate(e) {
$('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
}
$('#btnCalc').click(function () {
alert($('#qty').val());
});
$("#addButton").click(function () {
if (counter > 27) {
alert("Only 27 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Product #' + counter + ' : </label>' +
'<input type="text" size="60" name="product[]" placeholder="Product"\n\
id="product' + counter + '" value="" title = ' + counter + ' > \n\
<label>Quantity #' + counter + ' : </label>' +
'<input type="text" size="2" title = ' + counter + ' name="qty[]" \n\
id="qty' + counter + '" value="" > \n\
<label>Rate #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="2" name="rates[]"\n\
id="rates' + counter + '" value="" > \n\
<label>Total #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" class="txt" onchange="calculate();"> ');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 0) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
});//]]>
</script>
<table>
<tr>
<td><strong>Select the products</strong>
<input type='button' value='Add Products' id='addButton'>
<input type='button' value='Remove Products' id='removeButton'>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div id='TextBoxesGroup'></div>
</td>
</tr>
<tr>
<td>
<input type="hidden" id="countervalue" name="countervalue" style="display:none;">
</td>
</tr>
</table>
Grand Total : <p id="inputSum"></p>

Check this solution
http://jsfiddle.net/mgc2f5xj/
added a function to get total of all items
function getTotal(){
var totals = document.getElementsByName("total[]");
var total = 0;
for (var i=0; i< totals.length; i++){
total+= Number(totals[i].value);
}
document.getElementById("inputSum").innerText = total;
}

jQuery Add / Remove Textbox [duplicate]

This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 6 years ago.
script:
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" name="button' + counter +
'" id="removeButton' + counter + '" value="Remove Button">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
$("#TextBoxDiv" + counter).remove();
if (counter == 2) {
alert("No more textbox to remove");
return false;
}
});
});
</script>
HTML:
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' value='Remove Button' id='removeButton'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
i need to make the delete button to be functional. when i pressed the corresponding button on the side only the textbox beside it will only remove.

You have missed a few basic things.
Here is a likely solution:
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter).attr("class", 'TextBoxDiv');
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" name="button' + counter +
'" class="removeButton" value="Remove Button">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("body").on("click", ".removeButton", function() {
if (counter <= 2) {
alert("No more textbox to remove");
return false;
}
$(this).closest('.TextBoxDiv').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' value='Remove Button' class='removeButton'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
As you are new here, please don't forget to accept an answer if that works.

Please try this code,i hope this will helps you
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter < 2) {
alert("Add more textbox");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' +
'<input type="button" class="remove" name="button' + counter +
'" id="removeButton' + counter + '" value="Remove Button" onclick="remove(this)">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
function remove(obj)
{
var id =$(obj).attr('id');
var counter =id.replace(/[^0-9]/g, '');
$("#TextBoxDiv" + counter).remove();
if (counter == 2) {
alert("No more textbox to remove");
return false;
}
}
And this is html code
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label>
<input type='textbox' id='textbox1'>
<input type='button' class="remove" value='Remove Button' onclick="remove(this)" id='removeButton1'>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>

Create dymanic textboxes in button onclick & save data to database

I am trying to create dynamic textboxes using php & jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks
<html>
<head>
<title>author</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>Author</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addAuthor").click(function () {
if(counter>10){
alert("Only 10 authores allow");
return false;
} //addAffiliation
var newauthorDiv = $(document.createElement('div'))
.attr("id", 'authorDiv' + counter);
newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
'<br><label>Name : </label>' +
'<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
'<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
'<input type="text" name="author' + counter + 'affiliation' + counter +
'" id="author' + counter + 'affiliation' + counter +'" value="" >' +
'<input type="button" id="addAffiliation" value="+" >' +
'<input type="button" id="removeAffiliation" value="-" >' + '</div>');
newauthorDiv.appendTo("#AuthorGroup");
counter++;
});
$("#removeAuthor").click(function () {
if(counter==1){
alert("No more author to remove");
return false;
}
counter--;
$("#authorDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Author " + i + " : " + $('#author' + i).val();
}
alert(msg);
});
});
// Affiliation
$(document).ready(function(){
var counter = 2;
$("#addAffiliation").click(function () {
if(counter>10){
alert("Only 10 Affiliations allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
'<input type="text" name="author1_affiliation' + counter +
'" id="author1_affiliation' + counter + '" value="" >');
newTextBoxDiv.appendTo("#AffiliationGroup");
counter++;
});
$("#removeAffiliation").click(function () {
if(counter==1){
alert("No more Affiliations to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='AuthorGroup'>
<label><b>Author 1 </b></label> <br>
<label>Name : </label><input type='author' id='author1_name1' >
<div id='AffiliationGroup'>
<label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' >
<input type='button' value='+' id='addAffiliation'>
<input type='button' value='-' id='removeAffiliation'>
<!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
</div>
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
</body>
</html>

See http://jsfiddle.net/9y3n33jx/
I haven't completed the whole thing but it should give you an idea.
You need to put your original author inside a div.authorDiv. Use class names instead of id for your + - buttons.
<input type='button' value='+' class='addAffiliation'>
<input type='button' value='-' class='removeAffiliation'>
Because those buttons will be dynamically added you need to bind to click event on body for the button class:
$('body').on("click", ".addAffiliation", function () {
(When the button is clicked you need to figure out the number of affiliates inside div by class, i.e. $(this).parent().(".affiliateClass").length)
When the add button is clicked, you need to add the new div to the parent of the clicked button:
newTextBoxDiv.appendTo($(this).closest(".authorDiv"));
You'll have to do the same for the - button. This should get you going in the right ddirection.

add textbox in jquery

I am trying to create mcq question with dynamic id by using jquery. but i got stuck when i am defining a unique id for the option of each question. can somebody help me to find way to create unique id for each mcq option? below is my jquery
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;//question
$("#addQuestion").click(function () {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Q'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >' + '</br>' +
'<label>A. </label>'+
'<input type="text" id="Q'+counter+'choice1">' +
'<input type="button" value="Add Option" id="'+ counter + '">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeQuestion").click(function () {
if(counter==1){
alert("No question that can be deleted");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
//$("#getButtonValue").click(function () {
// var msg = '';
//for(i=1; i<counter; i++){
// msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
//}
// alert(msg);
//});
});
</script>
</head><body>
here is the html
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Q1 : </label><input type='textbox' id='textbox1' ></br>
<label>A. <input type='text' id='Q1choice1'>
<input type='button' value='Add Option' id='1'>
</div>
</div>
<input type='button' value='Add Question' id='addQuestion'>
<input type='button' value='Remove Question' id='removeQuestion'>
</body>
</html>

You have to define the var counter before document.ready
Does not work:
$(document).ready(function () {
var counter = 2;//question
Works:
var counter = 2;//question
$(document).ready(function () {
EDIT: counter is only global is defined outside $(document).ready

Try append newTextBoxDiv in your code:
.... var newTextBoxDiv = $(document.createElement('div'))...
.attr("id", 'TextBoxDiv' + counter);
$('body').append(newTextBoxDiv);
... newTextBoxDiv.after().html('<label>Q'....
$('body').append(newTextBoxDiv);

try something like this
var counter = $("#TextBoxesGroup div").length;