Develop Reference

Changing content of an single input field after cloning form fields

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!

While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>

Dynamically increment name property in an html form?

I am trying to send multiple data to the database at ince using a dynamically created form which add new fields when i cick in the ADD button. I have got most of the project to work, but to send the data to the controller i need to dynamiccally incerement the name property which i amn not able to do. I am new to spring ad Jquery. At the momemnt i can only send two array objects with index 0 and 1.
This is my html Form
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<a class="navbar-brand" th:href="#{/}" href="#">
<img src="" class="logo" th:src="#{/image/logo.png}" alt="logo">
Assam Power Distribution Company Limited</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
</nav>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div class="form-group fieldGroup" >
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
<select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
This is my controller
//adding feeder details
#PostMapping("/addfeeder")
public String addFeeder(#ModelAttribute FeederList feederlist)
{
System.out.println("Data"+feederlist);
System.out.println(feederlist.getFeeder().size());
for(Feeder c:feederlist.getFeeder())
System.out.println(c);
return "feeder";
}
public class FeederList {
private List<Feeder> feeder=new ArrayList<>();
public List<Feeder> getFeeder() {
return feeder;
}
public void setFeeder(List<Feeder> feeder) {
this.feeder = feeder;
}
}

Used clone() on page load to make a copy of the first group. When adding a new one we make another clone of the stored one
Creating a wrapping container for the groups making it simpler to append to
Created function adjustNames() that gets called when row added or removed. The remove process throws off indexing of names that follow it so seemed safest just to go through them all. You can see the text input names set as their values for verification in development
todo : Bug if remove all rows then add one. Perhaps prevent remove if only one left
//group add limit
var maxGroup = 5;
var $groupContain = $('#group-container');
// clone first group
var $groupCopy = $groupContain.find('.fieldGroup').first().clone();
$groupCopy.find(':input').val('') // clear any values if prepopulated
//add more fields group
$(".addMore").click(function() {
var groupLen = $groupContain.find('.fieldGroup').length
if (groupLen < maxGroup) {
var $newGroup = $groupCopy.clone();
$groupContain.append($newGroup);
adjustNames()
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
function adjustNames(){
// clear console for demo
$groupContain.find('.fieldGroup').each(function(i){
var $inputs = $(this).find(':input[name]');
// uses the group index to update array names
$inputs.attr('name', function(j, currName) {
return currName.replace(/\[\d+\]/, `[${i}]`);
});
// for demo set names in text fields
$inputs.filter(':text').val(function(){
return this.name;
});
});
}
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
adjustNames()
});
a{display:inline-block;padding:10px; font-size:1.2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div id="group-container">
<div class="form-group fieldGroup">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers" />
<button class="remove"> Remove </button>
</div>
</div>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
<!--<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />-->
</form>

How to remove on click a cloned element

I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>

You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>

jquery/javascript, use one button to click/submit multiple buttons

Probably a stupid question but please bear with me on this one:
Is it possible, with the use of jQuery/javascript, to make it so that when you click one button it clicks/submits multiple buttons?
This will probably help make answering the question easier:
<div class="form-item form-type-select form-item-field-status-10-field-status-und-select">
<select size="0" name="field_status[10][field_status][und][select]" id="edit-field-status-10-field-status-und-select" class="select-or-other-select form-select chzn-done" style="width: 100px; display: none;">
<option value="">- select -</option>
<option selected="selected" value="In">In</option>
<option value="Gym">Gym</option>
<option value="Lunch">Lunch</option>
<option value="Out">Out</option>
<option value="select_or_other">Other</option>
</select>
<div id="edit_field_status_10_field_status_und_select_chzn" class="chzn-container chzn-container-single" style="width: 100px;" title=""><a tabindex="-1" class="chzn-single" href="javascript:void(0)"><span>In</span></a>
<div style="left: -9000px; width: 98px; top: 25px;" class="chzn-drop">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 63px;">
</div>
<ul class="chzn-results">
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_0">- select -</li>
<li style="" class="active-result result-selected" id="edit_field_status_10_field_status_und_select_chzn_o_1">In</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_2">Gym</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_3">Lunch</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_4">Out</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_5">Other</li>
</ul>
</div>
</div>
</div>

This way:
<input type="button" id="triggerAll">
<input type="button" class="button1">
<input type="button" class="button2">
<input type="button" class="button3">
$('#triggerAll').on('click',function(){
$('.button1,.button2,.button3').trigger('click');
});
Or this way:
<input type="button" id="triggerAll">
<input type="button" class="processed">
<input type="button" class="processed">
<input type="button" class="processed">
$('#triggerAll').on('click',function(){
$('.processed').trigger('click');
});
Or this way:
<form class="monitorChanges">
<label>
Pick one:
<select data-defaultvalue="" name="other">
<option value="" selected></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</label>
<label>
Other:
<input type="text" data-defaultvalue="" name="other">
</label>
<input type="submit">
</form>
<input type="text" value="Trigger All" id="triggerAll">
$('.monitorChanges').on('change keyup',"input,textarea,select",function(){
var defaultValue = $(this).data('defaultvalue');
if ($(this).val() !== defaultValue){
$(this).parent().parent().find('input[type="submit"]:not(.processed)').addClass('processed');
}
else {
$(this).parent().parent().find('input[type="submit"].processed').removeClass('processed');
}
});
$('#triggerAll').on('click',function(){
$(this).parent().find('form input[type="submit"].processed').trigger('click');
});

$('#mybtnId').click(function(){
$('button, input[type=button]').not('#mybtnId').trigger('click');
});

Here is an example specific to you:
$('.processed').on('click', function (e) {
//real event
if (e.originalEvent !== undefined) {
$('.processed').click();
}
//manually triggered event
else {
alert($(this).text() + ' triggered');
}
});
Hope this helps! You can see it working in this jsFiddle example

I came up with a solution that does the trick for me:
// Find input(s) that have changed. Add class to their hidden submit button.
$(function() {
$("input, select").change(function() {
$(this).closest('td').find('input.ajax-processed').addClass("changed");
});
});
// One button to submit all input(s) that have changed.
$('.submit-all').click(function(){
$('.changed, input[type=button]').not('.submit-all').trigger('click');
});
Thanks guys for all of your help. It took a combination of all of your advice to get this beast working and it also helped me to rethink what I was trying to accomplish.

That's what worked for me, using pure JavaScript. I used the onclick event on a list item (li) containing two reset button's. They control different form's and one of them is not displayed in the list item (style="display:none;"). Of course, you can make the same implementation in any type of input.
<ul>
<li onclick="document.getElementById('btn-clear-1').click(); document.getElementById('btn-clear-2').click();">
<input class="btn" id="btn-clear-1" form="frm1" type="reset" value="Clear" />
<input class="btn" id="btn-clear-2" form="frm2" type="reset" value="Clear" style="display:none;" />
</li>
</ul>
But what I did is unnecessary code for what I was looking for. It could be <li onclick="document.getElementById('#frm1').reset(); document.getElementById('#frm2').reset();">Clear</li>
(Commentary made only to avoid bad coding in this board)

How to re-index select box along with hidden fields

I'm struggling to figure out how to re-index (?) a series of hidden fields with jQuery/Javascript. The sample code below is generated each time a user clicks a create button. The numerical value applied to the hidden fields within tier[] is the index of an option selected from a drop-down.
The problem I have is every block of code (except the first i.e. tier1) should have the option to be removed. When the remove link is clicked I have implemented some jQuery which removes the div with the selected ID. The main issue is that I need to alter the name of each block on removal and re-index the drop-down so the numbers are incremental. The hidden fields will need to follow the index of the drop-down too.
I'm struggling to determine how to achieve this with Javascript or jQuery.
I've tried to include an example before any removal occurs. There are 4 blocks, each is incrementally created based on the option from the drop-down. A user could attempt to remove block 3. Currently, this will remove the option from the select using the above jQuery but as a result the display will list inconsistent block numbers, the hidden fields will have the incorrect indexes and the drop-down will be 'out of synch'.
<script type="text/javascript">
$(document).ready(function() {
$("a.removeTier").live('click', function() {
var tierId = $(this).parent().parent().attr('id').match(/\d+$/);
$('#tiers option:eq('+tierId+')').remove();
$('#tier'+tierId).remove();
return false;
});
});
</script>
<p align="left">
<label style="width: 45px;" for="newTier"><b>Tier:</b> *</label>
<button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier">New Tier</button>
<select name="tiers" id="tiers">
<option value="0">Select</option>
<option selected="" value="1">Tier 1</option>
<option value="2">Tier 2</option>
<option value="3">Tier 3</option>
<option value="4">Tier 4</option>
</select>
</p>
<div id="tierRight">
//1
<div id="tier1">
<div style="text-align: left;">
Tier 1<br><label for="publication_date_1">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker"> <input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1">
</div>
<span>
<a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#">Autism Initiatives</a>
<input type="hidden" value="132" name="tier[1][panels][132][panelId]">
<input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]">
</span>
</div><br>
//2
<div id="tier2">
<div style="text-align: left;">
Tier 2 - [<a id="tier2" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[2][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08">
</div>
<span>
<a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#">Autism 2</a>
<input type="hidden" value="149" name="tier[2][panels][149][panelId]">
<input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]">
</span>
</div><br>
//3
<div id="tier3">
<div style="text-align: left;">
Tier 3 - [<a id="tier3" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[3][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15">
</div>
<span>
<a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#">Autism 3</a>
<input type="hidden" value="150" name="tier[3][panels][150][panelId]">
<input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]">
</span>
</div><br>
//4
<div id="tier4">
<div style="text-align: left;">
Tier 4 - [<a id="tier4" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[4][publication_date]">Publication Date: </label>
<input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker">
<input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22">
</div>
<span>
<a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#">Autism 4</a>
<input type="hidden" value="151" name="tier[4][panels][151][panelId]">
<input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]">
</span>
</div><br>
</div>

First you'll need to clean up your HTML - you're using id="tier1" on both a div and a a which will eventually cause problems.
Here's a simple variant that shows a possible approach:
<div class="tier">
<p class="title">Tier 1</p>
</div>
<div class="tier">
<p class="title">Tier 2</p>
<p class="delete">Delete Me</p>
</div>
<div class="tier">
<p class="title">Tier 3</p>
<p class="delete">Delete Me</p>
</div>
Javascript:
$(function() {
$(".delete").bind("click", function() {
$(this).parent().remove();
$(".tier").each( function(index) {
var tierIndex = index+1;
$(this).find(".title").text("Tier " + tierIndex);
});
});
});
Or as a jsFiddle here.