Input fields automatically displays on textarea with add/remove function
1
Need help on removing the items on the textarea when I click the "remove this section", currently it does not remove only the input fields
Secondly is to count how many there are and reflect it to the "Number of children" input field above
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
Here is the code I am using now
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery('.optionBox').on('click', '.remove', function () {
jQuery(this).parent().remove();
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
}
});
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
javascript jquery
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
add a comment |
1
Need help on removing the items on the textarea when I click the "remove this section", currently it does not remove only the input fields
Secondly is to count how many there are and reflect it to the "Number of children" input field above
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
Here is the code I am using now
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery('.optionBox').on('click', '.remove', function () {
jQuery(this).parent().remove();
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
}
});
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
javascript jquery
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
add a comment |
1
1
1
Need help on removing the items on the textarea when I click the "remove this section", currently it does not remove only the input fields
Secondly is to count how many there are and reflect it to the "Number of children" input field above
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
Here is the code I am using now
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery('.optionBox').on('click', '.remove', function () {
jQuery(this).parent().remove();
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
}
});
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
javascript jquery
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
Need help on removing the items on the textarea when I click the "remove this section", currently it does not remove only the input fields
Secondly is to count how many there are and reflect it to the "Number of children" input field above
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
Here is the code I am using now
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block added"><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery('.optionBox').on('click', '.remove', function () {
jQuery(this).parent().remove();
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
}
});
Here is My FIDDLE to make it more clear https://jsfiddle.net/sjgrLcqx/12/
javascript jquery
javascript jquery
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
asked Nov 24 '18 at 12:07
Francis Alvin TanFrancis Alvin Tan
2961721
2961721
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
When you delete, you are updating the view, but not the array that is used to set the value of the text array control. Your delete should do something like this (pardon my JS. TypeScript and Angular have ruined me):
jQuery('.optionBox').on('click', '.remove', function () {
// get the index of the item to remove
var index = $(this).parent().index('div.block');
// remove it from the array
childInfoArray.splice(index,1);
// remove from view
jQuery(this).parent().remove();
// call your refresher function to update the textarray
printChildArray();
});
Also, add a line to update your count in your printChildArray() function:
$('#qppquantitySantasgrotto').val(childInfoArray.length);
That should fix both of your problems.
answered Nov 24 '18 at 13:39
BenBen
6871221
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
add a comment |
1
This seems to work.....
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery(".optionBox").each(function(i) {
jQuery(this).addClass("list" + ++i);
});
jQuery('.optionBox').on('click', '.remove', function () {
var index = $(this).parent().index('div.block');
jQuery(this).parent().remove();
childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
printChildArray()
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
$('#qppquantitySantasgrotto').val(childInfoArray.length);
}
});
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457986%2finput-fields-automatically-displays-on-textarea-with-add-remove-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
When you delete, you are updating the view, but not the array that is used to set the value of the text array control. Your delete should do something like this (pardon my JS. TypeScript and Angular have ruined me):
jQuery('.optionBox').on('click', '.remove', function () {
// get the index of the item to remove
var index = $(this).parent().index('div.block');
// remove it from the array
childInfoArray.splice(index,1);
// remove from view
jQuery(this).parent().remove();
// call your refresher function to update the textarray
printChildArray();
});
Also, add a line to update your count in your printChildArray() function:
$('#qppquantitySantasgrotto').val(childInfoArray.length);
That should fix both of your problems.
answered Nov 24 '18 at 13:39
BenBen
6871221
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
add a comment |
1
When you delete, you are updating the view, but not the array that is used to set the value of the text array control. Your delete should do something like this (pardon my JS. TypeScript and Angular have ruined me):
jQuery('.optionBox').on('click', '.remove', function () {
// get the index of the item to remove
var index = $(this).parent().index('div.block');
// remove it from the array
childInfoArray.splice(index,1);
// remove from view
jQuery(this).parent().remove();
// call your refresher function to update the textarray
printChildArray();
});
Also, add a line to update your count in your printChildArray() function:
$('#qppquantitySantasgrotto').val(childInfoArray.length);
That should fix both of your problems.
answered Nov 24 '18 at 13:39
BenBen
6871221
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
add a comment |
1
1
1
When you delete, you are updating the view, but not the array that is used to set the value of the text array control. Your delete should do something like this (pardon my JS. TypeScript and Angular have ruined me):
jQuery('.optionBox').on('click', '.remove', function () {
// get the index of the item to remove
var index = $(this).parent().index('div.block');
// remove it from the array
childInfoArray.splice(index,1);
// remove from view
jQuery(this).parent().remove();
// call your refresher function to update the textarray
printChildArray();
});
Also, add a line to update your count in your printChildArray() function:
$('#qppquantitySantasgrotto').val(childInfoArray.length);
That should fix both of your problems.
answered Nov 24 '18 at 13:39
BenBen
6871221
When you delete, you are updating the view, but not the array that is used to set the value of the text array control. Your delete should do something like this (pardon my JS. TypeScript and Angular have ruined me):
jQuery('.optionBox').on('click', '.remove', function () {
// get the index of the item to remove
var index = $(this).parent().index('div.block');
// remove it from the array
childInfoArray.splice(index,1);
// remove from view
jQuery(this).parent().remove();
// call your refresher function to update the textarray
printChildArray();
});
Also, add a line to update your count in your printChildArray() function:
$('#qppquantitySantasgrotto').val(childInfoArray.length);
That should fix both of your problems.
answered Nov 24 '18 at 13:39
BenBen
6871221
answered Nov 24 '18 at 13:39
BenBen
6871221
answered Nov 24 '18 at 13:39
BenBen
6871221
answered Nov 24 '18 at 13:39
BenBen
6871221
6871221
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
add a comment |
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
Thank you so much, you have saved my day
– Francis Alvin Tan
Nov 24 '18 at 14:02
add a comment |
1
This seems to work.....
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery(".optionBox").each(function(i) {
jQuery(this).addClass("list" + ++i);
});
jQuery('.optionBox').on('click', '.remove', function () {
var index = $(this).parent().index('div.block');
jQuery(this).parent().remove();
childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
printChildArray()
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
$('#qppquantitySantasgrotto').val(childInfoArray.length);
}
});
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
add a comment |
1
This seems to work.....
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery(".optionBox").each(function(i) {
jQuery(this).addClass("list" + ++i);
});
jQuery('.optionBox').on('click', '.remove', function () {
var index = $(this).parent().index('div.block');
jQuery(this).parent().remove();
childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
printChildArray()
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
$('#qppquantitySantasgrotto').val(childInfoArray.length);
}
});
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
add a comment |
1
1
1
This seems to work.....
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery(".optionBox").each(function(i) {
jQuery(this).addClass("list" + ++i);
});
jQuery('.optionBox').on('click', '.remove', function () {
var index = $(this).parent().index('div.block');
jQuery(this).parent().remove();
childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
printChildArray()
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
$('#qppquantitySantasgrotto').val(childInfoArray.length);
}
});
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
This seems to work.....
jQuery(document).ready(function () {
var childInfoArray = ;
var formHtml = '<div class="optionBox"><div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div><div class="block"><span class="add">Add another child's info</span></div></div>';
var formHtml2 = '<div class="block" style=""><input class="crow fullName" type="text" placeholder="Full name"><input class="crow width50 marginsmall age" type="text" placeholder="Age"><input class="crow width50 nomargin gender" type="text" placeholder="gender"><input class="crow interest" type="text" placeholder="Interest"><span class="remove">Remove this section</span></div>';
jQuery('#frmPaymentSantasgrotto').append(formHtml);
jQuery('.add').click(function () {
jQuery('.block:last').before(formHtml2);
});
jQuery(".optionBox").each(function(i) {
jQuery(this).addClass("list" + ++i);
});
jQuery('.optionBox').on('click', '.remove', function () {
var index = $(this).parent().index('div.block');
jQuery(this).parent().remove();
childInfoArray.splice( $.inArray(index, childInfoArray), 1 );
printChildArray()
});
jQuery('.optionBox').on('keyup', 'input', function () {
var index = $(this).parent().index('div.block');
var child = {};
if (childInfoArray[index] != null) {
child = childInfoArray[index];
}
else {
child = {
fullName: '',
age: '',
gender: '',
interest: ''
}
}
if ($(this).hasClass('fullName')) {
child.fullName = jQuery(this).val();
}
else if ($(this).hasClass('age')) {
child.age = jQuery(this).val();
}
else if ($(this).hasClass('gender')) {
child.gender = jQuery(this).val();
}
else if ($(this).hasClass('interest')) {
child.interest = jQuery(this).val();
}
childInfoArray[index] = child;
printChildArray();
});
function printChildArray() {
var childInfoString = "";
childInfoArray.forEach(child => {
Object.values(child).forEach((attribute, index) => {
childInfoString += attribute;
if (index !== Object.keys(child).length - 1) {
childInfoString += ' | ';
}
else {
childInfoString += ' n';
}
});
});
$('textarea').html(childInfoString);
$('#qppquantitySantasgrotto').val(childInfoArray.length);
}
});
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
answered Nov 24 '18 at 13:47
CFP SupportCFP Support
1,1541823
1,1541823
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
add a comment |
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
this works also
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
now the problem is I cant seem to make this work on multiple forms
– Francis Alvin Tan
Nov 24 '18 at 14:04
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
jsfiddle.net/sjgrLcqx/15
– Francis Alvin Tan
Nov 24 '18 at 14:08
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
You can't (EVER) have the same 'id' in a page - otherwise, how does JS know what to work with? You only duplicated your form - which duplicated several ids (frmPaymentSantasgrotto is a prime example) - that can't work. Give your second form new ids and follow the same logic I showed in the example - it will work.
– CFP Support
Nov 24 '18 at 15:29
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53457986%2finput-fields-automatically-displays-on-textarea-with-add-remove-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
