Nested form field with JqueryIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Convert form data to JavaScript object with jQueryDisable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
How to befriend someone who doesn't like to talk?
How to represent jealousy in a cute way?
What is Gilligan's full Name?
ASCII Meme Arrow Generator
How does AFV select the winning videos?
Why do (or did, until very recently) aircraft transponders wait to be interrogated before broadcasting beacon signals?
Why is my power MOSFET heating up when on?
What is this object?
That's not my X, its Y is too Z
Why are ambiguous grammars bad?
What is the STRONGEST end-of-line knot to use if you want to use a steel-thimble at the end, so that you've got a steel-eyelet at the end of the line?
How to Handle Many Times Series Simultaneously?
Recording Spectral Lines at Home
What is this Amiga 2000 mod?
How can I find out about the game world without meta-influencing it?
My mom's return ticket is 3 days after I-94 expires
Mathematica 12 has gotten worse at solving simple equations?
How can I list the different hex characters between two files?
Should I be able to use the Gloom Stalker ranger's Dread Ambusher class feature when attacking before initiative has been rolled to add a d8 damage?
What is the theme of analysis?
Why do I seem to lose data using this bash pipe construction?
What is the "books received" section in journals?
How many sets of dice do I need for D&D?
How can powerful telekinesis avoid violating Newton's 3rd Law?
Nested form field with Jquery
Is there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Convert form data to JavaScript object with jQueryDisable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
I have a form where I'm loading nested fields. It works fine if I only have one div fields but if I have 2 of them for different form field types it doubles the request and it adds 2 field instead of 1. I tried to use the function .closest but it's not working at all
here is what I have
$('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
);then inside my form I have
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a>BTW this is the version I had before that added fields in both .fields div container
$('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
);jquery ruby-on-rails
asked Mar 24 at 23:11
MarrentoMarrento
174112
add a comment |
0
I have a form where I'm loading nested fields. It works fine if I only have one div fields but if I have 2 of them for different form field types it doubles the request and it adds 2 field instead of 1. I tried to use the function .closest but it's not working at all
here is what I have
$('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
);then inside my form I have
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a>BTW this is the version I had before that added fields in both .fields div container
$('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
);jquery ruby-on-rails
asked Mar 24 at 23:11
MarrentoMarrento
174112
1
are thenested-formand thatags all siblings? if so, useprev()instead ofclosest()
– arieljuod
Mar 25 at 1:07
1
also$('.fields')returns both.fieldsdivs, use something like$(this).find('.fields')to grab only the one inside that.nested-formdiv
– arieljuod
Mar 25 at 1:11
add a comment |
0
0
0
I have a form where I'm loading nested fields. It works fine if I only have one div fields but if I have 2 of them for different form field types it doubles the request and it adds 2 field instead of 1. I tried to use the function .closest but it's not working at all
here is what I have
$('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
);then inside my form I have
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a>BTW this is the version I had before that added fields in both .fields div container
$('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
);jquery ruby-on-rails
asked Mar 24 at 23:11
MarrentoMarrento
174112
I have a form where I'm loading nested fields. It works fine if I only have one div fields but if I have 2 of them for different form field types it doubles the request and it adds 2 field instead of 1. I tried to use the function .closest but it's not working at all
here is what I have
$('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
);then inside my form I have
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a>BTW this is the version I had before that added fields in both .fields div container
$('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
); $('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
); $('form').on('click', '.add_fields', function(event)
$(event.target).closest('.nested-form'), function(e)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return e.preventDefault();
;
);<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a><div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][0][genre]" id="user_talent_genres_attributes_0_genre">
<option value="Musicians">Musicians</option>
<option selected="selected" value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350559861960" data-fields="<fieldset><div class='form-group'><select name="user[talent_genres_attributes][70350559861960][genre]" id="user_talent_genres_attributes_70350559861960_genre"><option value="Musicians">Musicians</option><option value="Acting">Acting</option><option value="Modeling">Modeling</option><option value="DJs">DJs</option></select><input as="hidden" type="hidden" value="false" name="user[talent_genres_attributes][70350559861960][_destroy]" id="user_talent_genres_attributes_70350559861960__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Genres</a>
<div class="nested-form">
<div class="fields">
<div class="form-group">
<select name="user[talent_genres_attributes][1][genre]" id="user_talent_genres_attributes_1_genre">
<option selected="selected" value="Musicians">Musicians</option>
<option value="Acting">Acting</option>
<option value="Modeling">Modeling</option>
<option value="DJs">DJs</option></select>
</div>
</div>
</div>
<a class="add_fields btn btn-secondary" data-id="70350580425060" data-fields="<fieldset><div class='form-group'><select name="user[talent_locations_attributes][70350580425060][location]" id="user_talent_locations_attributes_70350580425060_location"><option value="Los Angeles">Los Angeles</option><option value="Chicago">Chicago</option><option value="Detroit">Detroit</option><option value="Miami">Miami</option><option value="New York">New York</option><option value="San Francisco">San Francisco</option></select><input as="hidden" type="hidden" value="false" name="user[talent_locations_attributes][70350580425060][_destroy]" id="user_talent_locations_attributes_70350580425060__destroy" /><a class="remove_record btn btn-danger" href="#">Delete</a></div></fieldset>" href="#">Add Locations</a> $('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
); $('form').on('click', '.add_fields', function(event)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.fields').append($(this).data('fields').replace(regexp, time));
return eevent.preventDefault();
);jquery ruby-on-rails
jquery ruby-on-rails
asked Mar 24 at 23:11
MarrentoMarrento
174112
asked Mar 24 at 23:11
MarrentoMarrento
174112
edited Mar 24 at 23:30
Marrento
asked Mar 24 at 23:11
MarrentoMarrento
174112
asked Mar 24 at 23:11
MarrentoMarrento
174112
asked Mar 24 at 23:11
MarrentoMarrento
174112
174112
1
are thenested-formand thatags all siblings? if so, useprev()instead ofclosest()
– arieljuod
Mar 25 at 1:07
1
also$('.fields')returns both.fieldsdivs, use something like$(this).find('.fields')to grab only the one inside that.nested-formdiv
– arieljuod
Mar 25 at 1:11
add a comment |
1
are thenested-formand thatags all siblings? if so, useprev()instead ofclosest()
– arieljuod
Mar 25 at 1:07
1
also$('.fields')returns both.fieldsdivs, use something like$(this).find('.fields')to grab only the one inside that.nested-formdiv
– arieljuod
Mar 25 at 1:11
1
1
are the
nested-form and th a tags all siblings? if so, use prev() instead of closest()– arieljuod
Mar 25 at 1:07
are the
nested-form and th a tags all siblings? if so, use prev() instead of closest()– arieljuod
Mar 25 at 1:07
1
1
also
$('.fields') returns both .fields divs, use something like $(this).find('.fields') to grab only the one inside that .nested-form div– arieljuod
Mar 25 at 1:11
also
$('.fields') returns both .fields divs, use something like $(this).find('.fields') to grab only the one inside that .nested-form div– arieljuod
Mar 25 at 1:11
add a comment |
1 Answer
1
active
oldest
votes
0
I typically do something along the lines of:
<div id='fields_area'></div>
Then use $('#fields_area').append('.fields_container'); to add fields
and $(this).closest('.fields_container').remove(); (triggered by a button in .fields_container) to remove fields.
Wrap your data-* in a <div class="fields_container"></div> and this should do it.
Edit: Checkout cocoon : https://github.com/nathanvda/cocoon
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
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%2f55329472%2fnested-form-field-with-jquery%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I typically do something along the lines of:
<div id='fields_area'></div>
Then use $('#fields_area').append('.fields_container'); to add fields
and $(this).closest('.fields_container').remove(); (triggered by a button in .fields_container) to remove fields.
Wrap your data-* in a <div class="fields_container"></div> and this should do it.
Edit: Checkout cocoon : https://github.com/nathanvda/cocoon
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
add a comment |
0
I typically do something along the lines of:
<div id='fields_area'></div>
Then use $('#fields_area').append('.fields_container'); to add fields
and $(this).closest('.fields_container').remove(); (triggered by a button in .fields_container) to remove fields.
Wrap your data-* in a <div class="fields_container"></div> and this should do it.
Edit: Checkout cocoon : https://github.com/nathanvda/cocoon
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
add a comment |
0
0
0
I typically do something along the lines of:
<div id='fields_area'></div>
Then use $('#fields_area').append('.fields_container'); to add fields
and $(this).closest('.fields_container').remove(); (triggered by a button in .fields_container) to remove fields.
Wrap your data-* in a <div class="fields_container"></div> and this should do it.
Edit: Checkout cocoon : https://github.com/nathanvda/cocoon
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
I typically do something along the lines of:
<div id='fields_area'></div>
Then use $('#fields_area').append('.fields_container'); to add fields
and $(this).closest('.fields_container').remove(); (triggered by a button in .fields_container) to remove fields.
Wrap your data-* in a <div class="fields_container"></div> and this should do it.
Edit: Checkout cocoon : https://github.com/nathanvda/cocoon
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
answered Mar 25 at 18:20
Richard LegacyRichard Legacy
816
816
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
add a comment |
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
I ended up using cocoon and looking into the source code to see how it was compared to wha I had done.
– Marrento
Mar 25 at 22:07
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%2f55329472%2fnested-form-field-with-jquery%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
1
are the
nested-formand thatags all siblings? if so, useprev()instead ofclosest()– arieljuod
Mar 25 at 1:07
1
also
$('.fields')returns both.fieldsdivs, use something like$(this).find('.fields')to grab only the one inside that.nested-formdiv– arieljuod
Mar 25 at 1:11