I find two bugs at here:
The number will not continue counting, like will be 4 in next input value. Currently when add new input, the value is 1.
The remove button not working if have 3 input field there. But the remove button working if add one more input field. Anyway, only one can be delete.
HTML
<div id="add_form">
<table>
<tr>
<td><input type="text" value="1"/></td>
<td><div class="remove">Remove</div></td>
</tr>
<tr>
<td><input type="text" value="2"/></td>
<td><div class="remove">Remove</div></td>
</tr>
<tr>
<td><input type="text" value="3"/></td>
<td><div class="remove">Remove</div></td>
</tr>
</table>
</div>
Add
JQuery
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=1;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + x + '"/></td><td><div class="remove">Remove</div></td></tr>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x > 1 ) {
$(this).closest('tr').remove();
x--;
}
return false;
})
});
http://jsfiddle.net/hxbc7/
I have updated the fiddle that you created. http://jsfiddle.net/hxbc7/12/
There was a mistake in your code that I rectified.
Instead of this line
var InputsWrapper = $("#add_form table");
it should be
var InputsWrapper = $("#add_form table tr");
Try this: Count the FieldCount value and append to the textbox.
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=3;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + FieldCount + '"/></td><td><div class="remove">Remove</div></td></tr>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x > 1 ) {
FieldCount--;
$(this).closest('tr').remove();
x--;
}
return false;
})
});
change the code like this
$(document).ready(function() {
var MaxInputs = 99;
var InputsWrapper = $("#add_form table");
var AddButton = $("#add_field");
var x = $("input[type=text]").length;
var FieldCount=1;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
x++;
$(InputsWrapper).append('<tr><td><input type="text" value="' + x + '"/></td><td><div class="remove">Remove</div></td></tr>');
}
return false;
});
$("body").on("click",".removeclass", function(e) {
if( x >= 1 ) {
$(this).closest('tr').remove();
x--;
}
return false;
})
});
Related
the clone and calculate code working well with first section but calculate code stops for cloned form
// CODE OF CLONE FOR TRANSFERS
var gentransferid = 2;
$(".add-row-transfer").click(function() {
var $clone = $("ul.transfer-details").first().clone();
var $input = $clone.find('#transferid');
$input.val(gentransferid).attr('gentransferid', +gentransferid)
$clone.find('#transfer_sale').val('');
$clone.find('#transfer_cost').val('');
$clone.find('#transfer_profit').val('');
$clone.append("<button type='button' class='remove-row-transfer'>-</button>");
$clone.insertBefore(".add-row-transfer");
gentransferid++;
});
// CODE OF REMOVE CLONE FOR TRANSFERS
$(".cloned-removed-div-transfer").on("click", ".remove-row-transfer", function() {
$(this).parent().remove();
gentransferid--;
});
$(document).on('change', '.transfer_cost', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});
$(document).on('change', '.transfer_sale', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});
jsfiddle
by the way how to rest drop down list when clone
Please try this:
$(document).ready(function() {
$("#btnAddNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#systable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('<a href="#" class="remove" >Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('_' + suffix , '_' + (parseInt(suffix) + 1) );
$(this).attr('name', newN);
$(this).attr('id', newN);
});
$trLast.after($trNew);
});
// 2. Remove
$(document).on('click', 'a.remove', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
$(document).on("blur", ".transfer_sale_css", function () {
CalculateDifference();
});
$(document).on("blur", ".transfer_cost_css", function () {
CalculateDifference();
});
$(document).on("blur", ".transfer_profit_css", function () {
CalculateDifference();
});
/*$("#transfer_sale_0").blur(function () {
CalculateDifference();
})
$("#transfer_cost_0").blur(function () {
CalculateDifference();
})
$("#transfer_profit_0").blur(function () {
CalculateDifference();
})*/
function CalculateDifference() {
var transfer_sale=[],transfer_cost=[],transfer_profit=[];
var i = 0;
$('#systable tr td:nth-child(2)').each(function () {
if (i == 0) {
transfer_sale[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_sale[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
i = 0;
$('#systable tr td:nth-child(3)').each(function () {
if (i == 0) {
transfer_cost[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_cost[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
i = 0;
$('#systable tr td:nth-child(4)').each(function () {
if (i == 0) {
transfer_profit[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_profit[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
for(i=0;i<=transfer_profit.length-1;i++) {
var transfer_sale_val = parseFloat($("#transfersale_"+i.toString()).val());
var transfer_cost_val = parseFloat($("#transfercost_"+i.toString()).val());
var transfer_profit_val = transfer_sale_val - transfer_cost_val;
$("#transferprofit_"+ i.toString()).val(transfer_profit_val);
}
//alert(transfer_sale);
//alert(transfer_cost);
//alert(transfer_profit);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<table align="center" id="systable">
<tr>
<td>
<select name="dropdown_0">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td><td>
<input type="text" id="transfersale_0" name="transfersale_0" class="transfer_sale_css" >
</td>
<td>
<input type="text" id="transfercost_0" name="transfercost_0" class="transfer_cost_css">
</td>
<td>
<input type="text" id="transferprofit_0" name="transferprofit_0" class="transfer_profit_css">
</td>
<td></td>
</tr>
</table>
<table align="center">
<tr>
<td>
<button type="button" id="btnAddNew" class="add-row-transfer" >+ New Car</button></td>
</tr>
</table>
</form>
</div>
I have created a table which clones its last row if all the text boxes are filled and select is changed in the previous row. I am trying to add a condition that the newly dropdown options should be disabled if they were already selected in previous rows .
Demo Fillde
disable option code:
$('select').change(function() {
var value = $(this).val();
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
Full JS:
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select class="dd" name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('select').change(function() {
var value = $(this).val();
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
$('#results').on('focus', ':input', function() {
$(this).closest('tr').filter(function() {
return !$(this).data('saved');
})
.find(':input').each(function() {
$(this).data('value', this.value);
$(this).closest('tr').data('saved', true);
});
})
.on('input change', ':input', function() {
$(this).data('filled', this.value != $(this).data('value'))
var tr = $(this).closest('tr');
all = tr.find(':input'),
fld = all.filter(function() {
return $(this).data('filled');
});
if( all.length == fld.length ) {
if( !tr.data('done') ) {
$('#buttonclck')[0].click();
tr.data('done', true);
}
} else {
if( tr.data('done') ) {
tr.data('done', false);
}
}
});
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var lastRowInputs = lastRow.find('input');
var isClone = false;
lastRowInputs.each(function() {
if($(this).val().length) {
isClone = true;
}
});
if(!isClone)
return false;
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});
HTML:
<div id="results"></div>
<input id="buttonclck" type="button" class="hide" value="button"/>
Your mistake was here:
$(this).siblings('select').children('option').each(function() { ... }
It should be :
$(this).children('option').each(function() { ... }
Why do you select siblings of the select element? You should directly descend to its options. I do not know if it is intended, but such code will make option disabled in both rows: previous and newly generated.
Here is the fiddle:
http://jsfiddle.net/99pvwypp/19/
Below code Creates the html table and creates a static row and then on button click the same row is created but my problem is i don't want to
create or clone the row on button click
the row should be created on if the data of textbox(s) of that row are not null and the select value is not test then a new row needs to be created beneath that row .
Js fiddle demo
HTML:
<div id="results"></div>
<input id="buttonclck" type="button" value="button"/>
JS:
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option> <option value="demo">demo</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});
You can use this approach
When a form element is focused check and save current state of all form elements
Once content of a form element changes set data-filled to true for that element, see if all elements on current row have data-filled set.
If data-filled is set, if that row's data-done attribute is not set to true then add new row and set rows data-done attribute to true
Since all the rows are added dynamically, delegated events would be used.
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('#results').on('focus', ':input', function() {
$(this).closest('tr').filter(function() {
return !$(this).data('saved');
})
.find(':input').each(function() {
$(this).data('value', this.value);
$(this).closest('tr').data('saved', true);
});
})
.on('input change', ':input', function() {
$(this).data('filled', this.value != $(this).data('value'))
var tr = $(this).closest('tr');
all = tr.find(':input'),
fld = all.filter(function() {
return $(this).data('filled');
});
if( all.length == fld.length ) {
if( !tr.data('done') ) {
$('#buttonclck')[0].click();
tr.data('done', true);
}
} else {
if( tr.data('done') ) {
tr.next('tr').remove();
tr.data('done', false);
}
}
});
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>
<input id="buttonclck" type="button" class="hide" value="button"/>
Try this - work only for first input (is example)
http://jsfiddle.net/xegnt0uh/1/
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
//eg. if input[0] value isnt ""
if(lastRow.find('input')[0].value !== "") {
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
}
});
I renamed select to selectbox
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').find("tr:last-child");
var selectLastRow = lastRow.find('select[name=selectbox]').val(); // <-- add this select value
if(typeof selectLastRow !== 'undefined' && selectLastRow != '' && selectLastRow != 'test') { // <-- add this condition
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
// $(this).attr('name', newId); // REMOVE THIS BECAUSE WE FIND IN TR
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
}
});
DEMO JSFIDDLE
EDIT
-------
if all the condition are met a same new row to be created below that
so on
so set number of empty inputs
var emptyInputs = lastRow.find('.input').filter(function () { return this.value.length == 0; }).length;
and modify condition like below
if(typeof selectLastRow !== 'undefined'
&& selectLastRow != ''
&& selectLastRow != 'test'
&& emptyInputs == 0
) { ....
DEMO2 JSFIDDLE
Thank you in advance.
The code now works exactly as I need it too but I'm not sure how to go about passing each new line to my .asp mail handler if all the input names are the same. Where exactly in my code would I index the input boxes so that I can call them uniquely during submission and email themwith .asp mail handler?
Thank you to the stackoverflow community for helping me troubleshoot the code I've written thus far!
HTML
<form role="form" action="/wohoo" method="POST">
<label>Item</label>
<div class="catalog-fieldset">
<div class="catalog-wrapper">
<div class="catalog-items">
<ul>
<li>Quantity:
<input type="text" size="5" name="Qty[]">
</li>
<li>Width:
<input type="text" size="5" name="Width[]">
</li>
<li>Height:
<input type="text" size="5" name="Height[]">
</li>
</ul>
<button type="button" class="remove-line">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add More...</button>
</div>
</form>
CSS
ul {
list-style: none;
display:inline-block;
margin:0 0 5px;
}
ul li {
display: inline-block;
}
.remove-line {
display:inline-block;
}
I have this code set up http://jsfiddle.net/KeithDickens/afqh4a5o/2/
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
$('.catalog-fieldset').each(function () {
var $wrapper = $('.catalog-wrapper', this);
$(".add-field", $(this)).click(function (e) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
}
});
$('.catalog-items .remove-line', $wrapper).click(function () {
x = x - 1; //initlal text box count
if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
});
});
});
Reading values given your current setup would simply be based on position. This is terribly brittle since if you change the position you break the code but if you were to add a
<button type="button" class="summarise">Summarise</button>
beneath your existing Add More button and swap out your javascript for what's below it should give you more than a start. Validation etc will need to be applied.
$(document).ready(function () {
var max_fields = 10; //maximum input boxes allowed
var x = 1; //initlal text box count
function LineItemViewModel() {
var self = this;
self.Qty = 0;
self.Width = 0;
self.Height = 0;
}
function CollectionViewModel() {
var self = this;
self.Items = [];
}
var collection = new CollectionViewModel();
$('.catalog-fieldset').each(function () {
var $wrapper = $('.catalog-wrapper', this);
$(".add-field", $(this)).click(function (e) {
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
}
});
$(".summarise", $(this)).click(function (e) {
var txts = $('.catalog-fieldset input[type=text]');
var item = new LineItemViewModel();
txts.each(function () {
switch($(this).attr("name")){
case "Qty[]":
item.Qty = $(this).val();
break;
case "Width[]":
item.Width = $(this).val();
break;
case "Height[]":
item.Height = $(this).val();
collection.Items.push(item);
item = new LineItemViewModel();
break;
}
});
alert(collection.Items.length);
});
$('.catalog-items .remove-line', $wrapper).click(function () {
x = x - 1; //initlal text box count
if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove();
});
});
});
There are cleaner / shorter / more concise ways to do the above but this way should be very self explanatory.
NEED HELP!
How to add one every time I click "Add" button?
The number will increase every time I click.
It's start from 0, after I click it's will plus 1 become 1, then 2 and etc.
HTML:
<div id="add_form">
<div class="form-field">
<div class="field">
<div class="no">0</div>
</div>
</div>
</div>
Add
<p><br /></p>
JQuery:
$(document).ready(function() {
var MaxInputs = 8;
var InputsWrapper = $("#add_form");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=1;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<div class="field"><div class="no">1</div></div>');
x++;
}
return false;
});
});
My JQuery quite poor, need some help from you guys.
Also, here is the jsfiddle link.
http://jsfiddle.net/fzs77/
Really appreciate your help.
You have 1 hardcoded, so it can't change. Do it like this:
$(InputsWrapper).append('<div class="field"><div class="no">' + x + '</div></div>');
Check this JSFiddle with working demo.
You have to out the variable that holds the number inside of the html that you append. Also move the increscent of the FieldCount variable to below the append function call to render the correct result.
Like so:
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
$(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');
x++;
FieldCount++;
}
return false;
});
Try this jsfiddle:
http://jsfiddle.net/fzs77/7/
<div id="add_form">
<div class="form-field">
<div class="field">
<div class="no">0</div>
</div>
</div>
</div>
Add
<p><br /></p>
JS file
$(document).ready(function() {
var MaxInputs = 8;
var InputsWrapper = $("#add_form");
var AddButton = $("#add_field");
var x = InputsWrapper.length;
var FieldCount=0;
$(AddButton).click(function (e) {
if(x <= MaxInputs) {
FieldCount++;
$(InputsWrapper).append('<div class="field"><div class="no">' + FieldCount + '</div></div>');
}
return false;
});
});
Try this if you want to increment it while on the same line.
http://jsfiddle.net/sdMCH/
$(document).ready(function() {
$('#add_field').click(function (e) {
var x=$(".no");
x[0].innerHTML = (parseInt(x[0].innerHTML,10)+1);
}
);
});