JQuery replace input by a select using replaceWith - javascript

I have a few inputs with existing value. I would like to replace inputs by a select with the same options but retain the original value.
html:
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>
This what I've tried for now:
var inputs = ['input1', 'input2', 'input3'];
$.each(inputs, function(key, inputname) {
$('#'+inputname)
.replaceWith('<select id="'+inputname+'" name="'+inputname+'">' +
'<option value="1">0</option>' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'</select>');
$('#'+inputname).val("2");
});
So it work to build the same custom select for each input and I can set a fixed value but I would like to retrieve the original value for each input.
Is it possible?
Thanks in advance for your help

You would have to grab the value off of the element before you do the replace.
As an alternative, I wrote a simplified version using the native implicit looping that replaceWith will do. I also threw in an extra method to select the previous value in the new select, if that is desired.
$('#input1, #input2, #input3').replaceWith(function(){
const isSelected = (value) => {
return value === this.value ? 'selected' : '';
};
return `
<select id="${this.id}" name="${this.name}">
<option value="1">0</option>
<option value="1" ${isSelected('1')}>1</option>
<option value="2" ${isSelected('2')}>2</option>
<option value="3" ${isSelected('3')}>3</option>
</select>
`;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>

You need to read the value before you replace it.
var inputs = ['input1', 'input2', 'input3'];
$.each(inputs, function(key, inputname) {
var inp = $('#' + inputname)
var val = inp.val()
var sel = $('<select id="' + inputname + '" name="' + inputname + '">' +
'<option value="0">0</option>' +
'<option value="1">1</option>' +
'<option value="2">2</option>' +
'<option value="3">3</option>' +
'</select>')
sel.val(val);
inp.replaceWith(sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="span1">
<input type="text" id="input1" value="1" >
</span>
<span id="span2">
<input type="text" id="input2" value="2" >
</span>
<span id="span3">
<input type="text" id="input3" value="3" >
</span>

Related

Remove selected items from a dropdown that contains items from a database table

I'm trying to solve a problem with my POS module on Laravel 8 that removes an item from a dropdown once it is selected. The items from the dropdown are from a database table. My POS module consists of a table with Name (dropdown), Quantity, Price, and Total with the ability to add more rows. Here's the code I'm working on right now as well as screenshot of my POS.
pos.blade.php
<tbody class="addMoreProduct">
<tr>
<td>1</td>
<td>
<select name="product_id[]" id="product_id" class="form-control product_id">
<option value="s" selected>Select Item</option>
#foreach($products as $product)
<option data-price="{{ $product->price }}"
value="{{ $product->id }}">{{ $product->name }}
</option>
#endforeach
</select>
</td>
<td>
<input type="text" name="quantity[]" id="quantity" class="form-control quantity" required>
</td>
<td>
<input type="number" name="price[]" id="price" step=".01" class="form-control price" readonly>
</td>
<td>
<input type="number" name="total_amount[]" id="total_amount" step=".01" class="form-control total_amount" readonly>
</td>
</tr>
</tbody>
<script>
//Add a row
$('.add_more').on('click', function(){
var product = $('.product_id').html();
var numberofrow = ($('.addMoreProduct tr').length - 0) + 1;
var tr = '<tr><td class="no">' + numberofrow + '</td>' +
'<td><select class="form-control product_id" name="product_id[]">' + product +
'</select></td>' +
'<td><input type="number" name="quantity[]" class="form-control quantity"></td>' +
'<td><input type="number" name="price[]" class="form-control price" readonly></td>' +
'<td><input type="number" name="total_amount[]" class="form-control total_amount" readonly></td>' +
'<td><a class="btn btn-danger btn-sm delete rounded-circle"><i class="fa fa-times-circle"></i></a></td>';
$('.addMoreProduct').append(tr);
});
//Delete a row
$('.addMoreProduct').delegate('.delete', 'click', function(){
$(this).parent().parent().remove();
});
</script>
I did try looking for this problem and came across these code, I tried, but unfortunately it did not solve my problem. Any help would be appreciated. Thank you.
var selectobject = document.getElementById("product_id");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].value == 's')
selectobject.remove(i);
}
var index = $('#product_id').get(0).selectedIndex;
$('#product_id option:eq(' + index + ')').remove();

How to get dynamic id from a class name?

I am creating dynamic row with jquery. Now each row has different ID and common class name. How can I get the different id from same class name?
https://imgur.com/a/JCEhSna
See in the above picture. While I will select an option, then I want the ID name.
My Try:
HTML:
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->productName }}</option>
#endforeach
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $('.invoiceProducts').attr('id');
console.log("Select ID: " + idOfSelect);
});
Output:
Select ID: undefined
You can find the id using this.closest('tr').id in the change event
var i =0;
$('#add').click(function(){
i++;
j=i;
console.log("Inside: " + i);
var html = '<tr id="row'+i+'" class="dynamic-added">';
html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">#foreach($products as $product)<option value="1">1</option><option value="2">2</option>#endforeach</select></td>';
html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';
let tb = $("table.invoice-table").find("tbody");
tb.append(html);
tb.find('tr').last().trigger('select-added');
});
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = this.closest('tr').id
console.log("Select ID: " + idOfSelect);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
<tbody id="dynamic_row">
<tr id="firstTR">
<td>
<select name="product_id[]" class="invoiceProducts">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
</td>
<td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
<td><input type="number" class="form-control" name="itemQuantity[]"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</tbody>
</table>
I think this could help
$('body').on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});
The trick is select ID of changed element, right?
If you have <select> element, you should have <option> elements also as a children.
Just set "value" attribute of these children.
<select id="mySelect">
<option id="1" value="1"> A <option>
<option id="2" value="2"> B <option>
<option id="3" value="3"> C <option>
</select>
$("#mySelect").change(function(){
var selectedOption = $(this). children("option:selected").val();
console.log(selectedOption)
})
You should try with "document" It may help you Like:
$(document).on('change', '.invoiceProducts', function() {
var idOfSelect = $(this).attr('id');
console.log("Select ID: " + idOfSelect);
});

Creating Javascript or Jquery Date Array From a Start and an End Date

I am trying to create an in-page div that will take a start date, an end date, and a few other input fields and have it generate pre-formatted text for every 90 days within that time range. I have played around with using moment.js to make the date manipulation a little easier. This all needs to be included within one page.
<html>
<head>
<title> </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
</head>
<body>
<label for="startDate">Start Date: </label>
<input type="Date" value="" id="startDate" />
<br/>
<br/>
<label for="endDate">End Date: </label>
<input type="Date" value="" id="endDate" />
<br/>
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="1" id="radio" />
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="2" id="radio" />
<br/>
<br/>
<label for="region1">Type State or Country: </label>
<input type="text" list="regionList1" id="region1" />
<datalist id="regionList1">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region2">Type State or Country: </label>
<input type="text" list="regionList2" id="region2" />
<datalist id="regionList2">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region3">Type State or Country: </label>
<input type="text" list="regionList3" id="region3" />
<datalist id="regionList3">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region4">Type State or Country: </label>
<input type="text" list="regionList4" id="region4" />
<datalist id="regionList4">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region5">Type State or Country: </label>
<input type="text" list="regionList5" id="region5" />
<datalist id="regionList5">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="phone">Phone: </label>
<input type="phone" id="phone" placeholder="999-999-9999" />
<br/>
<br/>
<button type="submit" id="test" onClick="">SUBMIT</button>
<button type="reset" onClick="window.location.reload()">RESET</button>
<br/>
<br/>
<div id="result">
<!--
This is where the program will generate a <div> tag, it should have:
<div>
Start Date <br/>
(Start Date + 90 Days) <br/>
Some Standard Text for Every Div Entry
Radio Value <br/>
Region1 - 5
Phone Value <br/>
Region1 Value <br/>
Region2 Value <br/>
Region3 Value <br/>
Region4 Value <br/>
Region5 Value <br/>
</div>
And This Div Should Be Repeated for Each 90 Day Date Range, Including Start and End Dates
-->
</div>
</body>
</html>
Now, I have tried this a couple times and have a couple partial solutions, but since I have searched and searched on this and can't find an adequate solution, I wanted to ask the community how they would code for what I am asking for. I am just having a hard time wrapping my head around this for some reason. I get it to have a start date and show the additional 90 day block, but when I get to the end date, it won't add that to the last div block. I have a bunch of files made up, trying to work on this logic, so just copying and pasting the code won't make any sense. I am feeling really thick-headed for not coming up with an answer.
I am open to pure javascript or jquery solutions. I really appreciate any pointers that can be given to get this to work for me.
EDIT
Thank you to everyone that helped with this. I have come up with a solution with the help of Rocky, from below.
<html>
<head>
<title>
</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js">
</script>
<style>
#result {
display:inline-block;
border:1px solid black;
margin:1px;
padding:3px;
}
</style>
</head>
<body>
<label for="startDate">Start Date: </label>
<input type="Date" value="" id="startDate" />
<br/>
<br/>
<label for="endDate">End Date: </label>
<input type="Date" value="" id="endDate" />
<br/>
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="i" id="radio" name="radio" />
<br/>
<label for="radio">Radio Value: </label>
<input type="radio" value="d" id="radio" name="radio" />
<br/>
<br/>
<label for="region1">Type State or Country: </label>
<input type="text" list="regionList1" id="region1" />
<datalist id="regionList1">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region2">Type State or Country: </label>
<input type="text" list="regionList2" id="region2" />
<datalist id="regionList2">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region3">Type State or Country: </label>
<input type="text" list="regionList3" id="region3" />
<datalist id="regionList3">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region4">Type State or Country: </label>
<input type="text" list="regionList4" id="region4" />
<datalist id="regionList4">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="region5">Type State or Country: </label>
<input type="text" list="regionList5" id="region5" />
<datalist id="regionList5">
<option value="AS">All States</option>
<option value="AK">All Countries</option>
</datalist>
<br/>
<br/>
<label for="phone">Phone: </label>
<input type="phone" id="phone" placeholder="999-999-9999" />
<br/>
<br/>
<button type="submit" id="test" onClick="">SUBMIT</button>
<button type="reset" onClick="window.location.reload()">RESET</button>
<br/>
<br/>
<div id="result">
</div>
<script>
$(function() {
$('#test').click(function() {
var region1 = $('#region1').val();
var region2 = $('#region2').val();
var region3 = $('#region3').val();
var region4 = $('#region4').val();
var region5 = $('#region5').val();
var radio = $('input[name=radio]:checked').val();
var phone = $('#phone').val();
const startDate = moment($('#startDate').val());
const endDate = moment($('#endDate').val());
const dateRanges = buildDateRanges(startDate, endDate);
//build result html
var result = '';
dateRanges.forEach(function(dateRange) {
var html = '';
html += '<div id="result">';
html += 'start: ' + dateRange.start.format('Y-M-D') + '<br/>';
html += 'end: ' + dateRange.end.format('Y-M-D') + '<br/>';
html += 'radio: ' + radio + '<br/>';
html += 'regions: ' + region1 + ", " + region2 + ", " + region3 + ", "
+ region4 + ", " + region5 +'<br/>';
html += 'phone: ' + phone + '<br/>';
html += 'region1: ' + region1 + '<br/>';
html += 'region2: ' + region2 + '<br/>';
html += 'region3: ' + region3 + '<br/>';
html += 'region4: ' + region4 + '<br/>';
html += 'region5: ' + region5 + '<br/>';
html += '</div>';
result += html;
});
$('#result').html(result);
});
function buildDateRanges(startDate, endDate) {
const dateRanges = [];
var curDate = moment(startDate);
while (curDate.isSameOrBefore(endDate)) {
const range = {
start: moment(curDate),
end: moment(curDate).add(90, 'days')
};
if (range.end.isAfter(endDate)) range.end = endDate;
dateRanges.push(range);
curDate = moment(range.end).add(1, 'd');
}
return dateRanges;
}
});
</script>
</body>
</html>
Here is the code I would write to do a simplified version of what you have described. Hope it helps.
$(function() {
$('#test').click(function() {
const startDate = moment($('#startDate').val());
const endDate = moment($('#endDate').val());
const dateRanges = buildDateRanges(startDate, endDate);
//build result html
var result = '';
dateRanges.forEach(function(dateRange) {
var html = '';
html += '<div>';
html += 'start: ' + dateRange.start.format('Y-M-D') + '<br/>';
html += 'end: ' + dateRange.end.format('Y-M-D') + '<br/>';
html += '</div>';
result += html;
});
$('#result').html(result);
});
function buildDateRanges(startDate, endDate) {
const dateRanges = [];
var curDate = moment(startDate);
while (curDate.isSameOrBefore(endDate)) {
const range = {
start: moment(curDate),
end: moment(curDate).add(3, 'M')
};
if (range.end.isAfter(endDate)) range.end = endDate;
dateRanges.push(range);
curDate = moment(range.end).add(1, 'd');
}
return dateRanges;
}
});

Jquery validation for dynamically adding rows-

I am using Jquery validate plugin for doing my form validation.
In my form, I had an usecase of adding rows dynamically upon clicking an add button.
Adding new row, will result in generating a new name for the row (new name is appending a number to the original name).
I have written the validation logic, which will validate the first standard row itself, but the subsequent addition of rows will not be getting validated.
Need help in making validation for these dynamic Names w.r.t added rows.
Below is my html code, where standard row was mentioned with the class and Names to the elements in the row.
The js file contains the logic to add the rows dynamically and the validation logic.
Html:
<tbody>
<tr>
<td>
<div class="uriDiv input-group">
<input type="text" name="uriName" class="common form-control authUrl"
id="uriName" placeholder="URL for the Policy" />
</div>
</td>
<td>
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message
code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
</td>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label> <input type="radio" class="common anyuser authPermission"
value="anyUser" name="authPermission" id="anyUser" disabled="disabled">Any
User
</label>
</div>
<div class="uriDiv radio radio-input">
<label> <input type="radio" class="common groupuser authPermission"
value="groupUser" name="authPermission" id="groupUser" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled"
class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
</td>
<td><button type="button"
class="btn btn-primary delete-but-grid">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="4">
<button type="button" id="addBtn"
class="btn add-but-grid glyphicon glyphicon-plus-sign"></button>
</td>
</tr>
</tbody>
js:adding new rows
$("#addBtn").click(function() {
var divAdd = '
<tr id=' + dynamicCount + '>
<td>
<div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div>
</td>
'
divAdd = divAdd + '
<td>
<div class="uriDiv input-group">
<select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '">
<option value="">Select Auth Type </option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
</td>
'
divAdd = divAdd + '
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div>
'
divAdd = divAdd + '
<div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div>
</div>
</td>
'
divAdd = divAdd + '
<td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td>
</tr>
'
$('#uriInfo tr:last').before(divAdd);
dynamicCount++;
});
js validation: some part of it.
$("#policy-form").validate({
rules:{
uriName:{
required: true
},
authType:{
required: true
},
authPermission:{
required: true
},
},
Need help in getting the validation for dynamic rows.
Thanks.
Normally Jquery validation works by input 'Name'..here in this case as my input rows can be dynamically added,i created a custom class validation method, which does the validation based on the class name, instead of the row name..so by making these changes, my Jquery validation is working fine..below is my new code...
validation :
$.validator.addClassRules({
authUrl:{ // here authUrl is one of the class Name for the input row..
crequiredUrl:true
},
authSelect:{
crequiredSelect:true
},
authPermission:{
crequiredPermission:true
},
authPermissionMulti:{
crequiredPermCust:true
}
});
$.validator.addMethod('crequiredUrl', $.validator.methods.required,
'Please enter the Url');
$.validator.addMethod('crequiredSelect', $.validator.methods.required,
' Auth Type for policy is required');
$.validator.addMethod('crequiredPermission', $.validator.methods.required,
' AuthPermission for policy is required');
$.validator.addMethod('crequiredPermCust', $.validator.methods.required,
' Custom AuthPermissions cannot be empty');
$("#policy-form").validate({
rules:{
targetEnv:{
required:true
},
domainName: {
required:true
},
authSchemaType: {
required: true
},
headersRequired: {
required: true
},
headersReqEle: {
required: true
// other form validation rules..
my dynamic row add/delete code:
$('#headerCheck').hide();
var dynamicCount=0;
// var validateArray=new Array('uriName','authType','authPermission','authPermissionValue');
$("#addBtn").click(function() {
var divAdd = '<tr id=' + dynamicCount + '><td><div class="uriDiv input-group"><input type="text" name="uriName' + dynamicCount + '" class="common form-control authUrl" id="uriName' + dynamicCount + '" placeholder="URL for the Policy"/></div></td>'
divAdd = divAdd + '<td><div class="uriDiv input-group"><select class="common authSelect form-control" id="authType' + dynamicCount + '" name="authType' + dynamicCount + '"><option value="">Select Auth Type </option><option value="RACF">RACF</option><option value="LDAP">LDAP</option></select></div></td>'
divAdd = divAdd + '<td><div class="auth-permission-rd"><div class="uriDiv radio radio-left"><label> <input type="radio" class="common anyuser authPermission" value="anyUser" disabled="disabled" name="authPermission' + dynamicCount + '" id="anyUser">Any User</label></div>'
divAdd = divAdd + '<div class="uriDiv radio radio-input"> <label> <input type="radio" class="common groupuser authPermission" value="groupUser" disabled="disabled" name="authPermission' + dynamicCount + '"id="groupUser"><input type="text" disabled="disabled" name="authPermissionValue' + dynamicCount + '" class="common form-control-placeHolder authPermissionMulti" id="authPermissionValue' + dynamicCount + '" placeholder="Enter custom Permissions - Comma separated" /></label></div></div></td>'
divAdd = divAdd + '<td><button type="submit" id=' + dynamicCount + ' class="uriDelte btn btn-primary delete-but-grid"><span class="glyphicon glyphicon-remove"></span></button></td></tr>'
$('#uriInfo tr:last').before(divAdd);
dynamicCount++;
});
for my jsp page, pls refer to my question..
cheers :)

How to display add button at last element after delete last row?

I want to add some more fields with add and remove buttons, when I delete the last record add button must be present at the last element after deleting.
<div id="cont">
<p>
<label>Contact No : </label>
<select>
<option value="Phone">Phone</option>
<option value="Phone">Land Line</option>
<option value="Phone">Fax</option>
</select>
<input type="text" name="website" value="" />
<input type="button" value="+" id="addcontact1" />
</p>
</div>
This is a fiddle link.
http://jsfiddle.net/8dq15j2y/
Add + button after P tag and Replace $('#addcontact1').show(); to $('#addcontact1').hide();
Note: ID of an element must be unique, so use class instead
$(function() {
var scntDiv = $('#cont');
var i = $('#cont p').size() + 1;
$('#cont').on('click', '.addcontact1', function() {
$('<p style="margin-left:150px;"><select><option value="Phone">Phone</option><option value="Land-Line">Land-Line</option><option value="Fax">Fax</option></select><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="" /> remove <input type="button" value="+" class="addcontact1"></p>').appendTo(scntDiv);
i++;
$(this).hide();
return false;
});
$('#cont').on('click', '.remScnt', function() {
if (i > 2) {
$(this).closest('p').remove();
i--;
}
$('#cont p').last().find('.addcontact1').show();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cont">
<p>
<label>Contact No :</label>
<select>
<option value="Phone">Phone</option>
<option value="Phone">Land Line</option>
<option value="Phone">Fax</option>
</select>
<input type="text" name="website" value="" />
<input type="button" value="+" class="addcontact1" />
</p>
</div>
Using css: http://jsfiddle.net/arunpjohny/k7t86pkx/3/
you can insert after the line
$(this).parents('p').remove(); with code bellow:
$('#cont p:last').children('#addcontact1').show();

Categories