Generate Dynamic textboxes

Arun Kumar

10y886.NET

Hi,

I have a div with ten textboxes and 2 buttons(add &save), if i press add button i want to generate new div with same textboxes and same buttons. After generating our requirement we want to save. If i press save button in last div save all transaction at a time in table one by one divs..

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Arun Kumar10y ago
Thank u Manas.
0
Manas Mohapatra10y ago
Arun,

Do not copy/paste my code. Just follow the way how I did it. Because if you do copy/paste then DOM id may be not correct.

Secondly please make sure that jquery reference is added in your page.
0
Arun Kumar10y ago
Hi Manas, not responding to AddTransaction
0
Manas Mohapatra10y ago
Go through below code base. Just follow it and try to implement as per year need.

In View page:

Primary Business Address

Street Number*

Street Name*

Add Transaction

Javascript code:

// Creating dynamic address for business for getting secondry business location
function createAddress() {
var mainDiv = $('#busninessAddress');
// Setting new ID of cotrols dynamically
// Creating new div dynamically and set value to it.
addressCount += 1;
var newAddressDiv = document.createElement('div');
var divID = 'address' + addressCount;
var prevAddress = $('#address1').html();
prevAddress = prevAddress.replace(/txtStreetNumber1/g, "txtStreetNumber" + addressCount);
prevAddress = prevAddress.replace(/txtStreetName1/g, "txtStreetName" + addressCount);
prevAddress = prevAddress + "Remove Location";
locationArray.push(addressCount);
newAddressDiv.innerHTML = prevAddress;
newAddressDiv.setAttribute("id", divID);
mainDiv.append(newAddressDiv);
$('#txtStreetNumber' + addressCount).focus();
}

// Removing address dynamically
function removeAddress(id) {
for (var i = 1; i < locationArray.length; i++) {
if (locationArray[i] == id) {
locationArray.splice(i, 1);
}
}
var locationDiv = $('#address' + id);
locationDiv.html('');
}

// Getting dynamic address
function getAddress() {
var MainContent_hdnAddress;
var busninessAddresses = {};
for (var i = 0; i < addressCount; i++) {
if (typeof (locationArray[i]) != 'undefined') {
var address = {
OrgnizationLocationID: 0,
StreetNumber: $.trim($('#txtStreetNumber' + locationArray[i]).val()),
StreetName: $.trim($('#txtStreetName' + locationArray[i]).val())
};
busninessAddresses[i] = address;
}
}
var address=JSON.stringify(busninessAddresses);
$('#hdnAddress').val(address);
}
0
Arun Kumar10y ago
Hi Manas,
I want to Implement on client side,
I added Image below, If i press Add Transaction button same structure will display below and Hide Submit , View Transactions and Add transaction buttons in above panel,
If i press again add transaction button in the below panel same process will continue.
at last if i press Submit button in the last panel i want to save all table values one by one panel into database.

Please find the attachment.
0
Manas Mohapatra10y ago
I have couple of queries for you:

For each row there will be one text, add button and save button or overall only two buttons for all text boxes.

Do you want to implement it in client side or server side?
0

Primary Business Address
Street Number*
Street Name*