Develop Reference

Div based on selection not working, when new selection line was added

i want to create form when there will be possibility to add/remove additional selection rows, but all of this new selection should have possibility to show DIV depends on selected option.
Everything is working fine for first row which is loaded with page, DIV is showing input form, normal text or another selection (this one not need to show anything in additional DIV) based what we choosed.
But for added rows nothing happens after selection.
Any idea how to fix it or use another solution?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
<form>
<div class="">
<div class="col-lg-10">
<div id="row">
<div class="input-group m-3">
<select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select> with
<div id="values"></div>
<div class="input-group-prepend" style="margin-left: 20px;">
<button class="btn btn-danger" id="DeleteRow" type="button">
<i class="bi bi-trash"></i>
Delete row
</button>
</div>
</div>
</div>
<div id="newinput"></div>
<br />
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD row
</button>
</div>
</div>
</form>
</div>
$("#rowAdder").click(function () {
newRowAdd =
'<div id="row">' +
'<div class="input-group m-3">' +
'<br /><select class="custom-select custom-select-sm" name="test" id="type"><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
' with ' +
' <div id="values"></div>' +
' <div class="input-group-prepend" style="margin-left: 20px;">' +
' <button class="btn btn-danger"' +
' id="DeleteRow" type="button">' +
' <i class="bi bi-trash"></i>' +
' Delete row'+
' </button> </div>' +
'</div> </div>';
$('#newinput').append(newRowAdd);
});
$("body").on("click", "#DeleteRow", function () {
$(this).parents("#row").remove();
})
Example:
http://jsfiddle.net/3th96bac/

The main problem is that you are having multiple elements with the same Id. Id must be unique.
Second you'r $(".type").change(function() { will not get triggered by the newly added elements.
Demo
$(document).ready(function() {
$(document).on("change", ".type", function() {
var val = $(this).val();
if (val == "id") {
$(this).next(".values").html("<select><option>First option</option><option>Second Option</option></select>");
} else if (val == "client") {
$(this).next(".values").html("<input value='Example input' />");
} else if (val == "file") {
$(this).next(".values").html("normal text");
}
});
});
$("#rowAdder").click(function() {
newRowAdd =
'<div class="row">' +
'<div class="input-group m-3">' +
'<br /><select class="custom-select custom-select-sm type" name="test" id=""><option>select one</option><option value="id">ID:</option><option value="client">Client:</option><option value="file">File:</option></select>' +
' with ' +
' <div class="values"></div>' +
' <div class="input-group-prepend" style="margin-left: 20px;">' +
' <button class="btn btn-danger DeleteRow"' +
' id="" type="button">' +
' <i class="bi bi-trash"></i>' +
' Delete row' +
' </button> </div>' +
'</div> </div>';
$('#newinput').append(newRowAdd);
});
$("body").on("click", ".DeleteRow", function() {
$(this).closest(".row").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="width:100%;">
Replace:
<form>
<div class="">
<div class="col-lg-10">
<div class="row">
<div class="input-group m-3">
<select class="custom-select custom-select-sm type" name="test" id="">
<option>select one</option>
<option value="id">ID:</option>
<option value="client">Client:</option>
<option value="file">File:</option>
</select> with
<div class="values"></div>
<div class="input-group-prepend" style="margin-left: 20px;">
<button class="btn btn-danger DeleteRow" id="" type="button">
<i class="bi bi-trash"></i>
Delete row
</button>
</div>
</div>
</div>
<div id="newinput"></div>
<br />
<button id="rowAdder" type="button" class="btn btn-dark">
<span class="bi bi-plus-square-dotted">
</span> ADD row
</button>
</div>
</div>
</form>
</div>

Please check below working link for your question.
http://jsfiddle.net/kairavthakar2016/nkrqahpf/11/
Please modify your HTML and instead of ID please use the class and replace the jQuery with class name in the above mentioned example

Get the id of button to Remove a input field on click of minus button

I have an option field with by default 2 option. I have a button "Add more Option", this will add a input field (containing minus button to remove) dynamically.
I want to remove the particular input field when user clicks minus button.
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label for="options">Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>
Here is the script -
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").click(function(){
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
});
I tried this -
$(".input-group").click(function(){
const id = this.id;
$("#id").remove();
});
Please suggest. Any other way to do this will also be fine.

Use classes instead of worrying about incrementing ID's. That approach gets too complicated to manage sometimes and it isn't needed at all
Simplified append html with new class remove-btn instead of id on button:
$("#optionsList").append
('<div class="input-group"><input><button class="btn btn-danger remove-btn" type="button"></button></div>');
Delegated event listener for any .remove-btn added to dom in future
$(document).on('click', '.remove-btn', function(){
// "this" is current button event occurs on
$(this).closest('.input-group').remove()
})

Firstly don't use id's in dynamically created elements if you are not going to change it's value and end up with multiple elements with the same ID instead use classes. ie.
class="removeBtn'
Next for dynamically created elements use event bubbling to attach events
$("body").on("click", ".removeBtn", function(){
$(this).closest(".input-group").remove();
});

Because you add on the fly the new button you need to delegate the click event to the document:
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
This part: ".input-group button" means: listen for click event related to button element inside an input-group
The closest used to get the parent div to be removed.
The snippet:
$(document).ready(function(){
var optionNo = 2;
$("#moreOptions").on('click', function(e) {
optionNo = optionNo + 1;
$("#optionsList").append
('<div class="input-group" id="inputField' + optionNo +
'"><input type="text" class="form-control" placeholder="New option field" id="option' + optionNo +
'"><i class="input-group-btn"><button class="btn btn-danger" type="button" id="removeBtn' + optionNo +
'"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
});
// here i want to write code to remove that input field
$(document).on('click', ".input-group button", function(e) {
$(this).closest('.input-group').remove();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-success" name="button">Submit</button>
</div>
</form>
</div>

Try with the below code. Hope it helps.
var counter = 1;
$(document).on('click', 'button#moreOptions', function(){
$("#optionsList").append
('<div class="input-group" style="padding:5px;"><input type="text" class="form-control" placeholder="New option field '+ counter +'"><i class="input-group-btn"><button class="btn btn-danger btn-minus" type="button"><i class="glyphicon glyphicon-minus"></i></button></i></div>');
counter++;
});
$(document).on('click', 'button.btn-minus', function(){
$(this).parents('div.input-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-sm-offset-4">
<form class="form-horizontal" action="index" method="post">
<div id="optionsList"class="form-group">
<label>Options</label>
<input type="text" class="form-control" id="option1" placeholder="M S Dhoni">
<input type="text" class="form-control" id="option2" placeholder="Virat Kohli">
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-default" id="moreOptions">Add More Options</button>
</div>
</form>
</div>

Add a onclick handler when you generate your button as following :
$("#removeBtn" + optionNo + "").click(function()
{
$("#inputField" + optionNo + "").remove();
});

Change the multi select option text, when the option text is changed jquery

I'm creating a form where the user is allowed to add the options manually to the multiple select box. I've provided a preview field(for showing the preview) and a default value field(to select the default values if the user needs). There is a field for the user to enter the options. Once the user clicks the Add button after entering an option, it will be displayed in div provided. Each option can also be edited.
When the option is Added, that option will be added to the default value field as dropdown and to the preview field as dropdown. This is done simultaneouly, whenever an option is added.
When the option is edited, (according to my logic) the option in the div should be edited and the option in the default value and preview option should be edited as well. This is how I tried:
<div class="modal fade" id="MultiSelect_Modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="min-width: 75% !important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="FieldType">Multi Select</h4>
</div>
<div class="modal-body form-horizontal">
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Label" class="col-sm-4 control-label">Label Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="MultiSelect_Label" name="MultiSelect_Label" value=''>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="MultiSelect_DefaultValues" class="col-sm-4 control-label">Default Value</label>
<div class="col-sm-6">
<select id="MultiSelect_DefaultValues" name="MultiSelect_DefaultValues[]" class="form-control" multiple="multiple" style="width: 160px;">
<option value="0">---Select---</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" id="manualEntryDiv">
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Options" class="col-sm-4 control-label">Options</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" id="MultiSelect_Options" name="MultiSelect_Options" value=''>
<span class="input-group-btn">
<input type="button" class="btn btn-primary" id="MultiSelect_optionAdd" name="MultiSelect_optionAdd">
</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="result" id="MultiSelect_mydiv"></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" style="margin-left: -20px;">
<label for="MultiSelect_Description" class="col-sm-4 control-label">Description</label>
<div class="col-sm-6">
<textarea type="text" class="form-control" id="MultiSelect_Description" name="MultiSelect_Description" row='3'></textarea>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required">
<label for="MultiSelect_Status" class="col-sm-4 control-label">Status</label>
<div class="col-sm-6">
<select class="form-control" name="MultiSelect_Status" id="MultiSelect_Status">
<option value="1">Active</option>
<option value="0">In-Active</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="MultiSelect_Preview" id="MultiSelect_PreviewID" class="col-sm-4 control-label">Preview</label>
<div class="col-sm-6">
<select id="MultiSelect_Preview" name="MultiSelect_Preview[]" class="form-control" multiple="multiple" style="width: 160px;">
<option value="0">---Select---</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer clearfix">
<button type="button" class="btn btn-default" onclick="clearcontrols();" data-dismiss="modal">Close</button>
<input type="submit" id="MultiSelect_Save" name="MultiSelect_Save" value="Save" class="btn btn-primary">
</div>
</div>
</div>
</div>
$("#MultiSelect_optionAdd").click(function(){
if($("#MultiSelect_Options").val() == ""){
MyNotif.Show("Please enter an option","warning");
} else {
if($("#MultiSelect_optionAdd").val() == "Add"){
var optionvalue = $("#MultiSelect_Options").val();
$("#MultiSelect_mydiv").append("<span id='span" + a + "' class='editbutton'>" + optionvalue + "&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='remove" + a + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='edit" + a + "' style='display: none; margin-right:10px;'></i></a></span><br/>");
$("#MultiSelect_Preview").append('<option value="value-'+ optionvalue +'" id="options'+ a +'">' + optionvalue + '</option>');
$("#MultiSelect_DefaultValues").append('<option value="value-'+ optionvalue +'" id="defaultOptions'+ a +'">' + optionvalue + '</option>');
a = a + 1;
$("#MultiSelect_Options").val("");
} else if ($("#MultiSelect_optionAdd").val() == "Update") {
$("#"+spanid).text($("#MultiSelect_Options").val()).append("&nbsp&nbsp&nbsp&nbsp<a href='javascript:void(0)' ><i class='fa fa-close btn btn-danger btn-xs btn-remove btn-icon remove' id='" + removebuttonid + "' style='display: none;'></i></a><a href='javascript:void(0)'><i class='fa fa-pencil btn btn-warning btn-xs btn-edit btn-icon edit' id='" + editbuttonid + "' style='display: none; margin-right:10px;'></i></a>");
$("#MultiSelect_optionAdd").val("Add");
$("#"+optionsid).text($("#MultiSelect_Options").val());
$("#"+defaultOptionsid).text($("#MultiSelect_Options").val());
$("#"+defaultOptionsid).val("value-"+$("#MultiSelect_Options").val());
$("#MultiSelect_Options").val("");
}
$('.remove').click(function(){
removebuttonid = $(this).attr("id");
spanid = removebuttonid.replace('remove', 'span');
optionsid = removebuttonid.replace('remove', 'options');
defaultOptionsid = removebuttonid.replace('remove', 'defaultOptions');
$("#"+spanid).next("br").remove();
$("#"+spanid).remove();
$("#"+optionsid).remove();
$("#"+defaultOptionsid).remove();
});
$(".edit").click(function(){
addButtonValue = "Update"
$("#MultiSelect_optionAdd").val(addButtonValue);
editbuttonid = $(this).attr("id");
spanid = editbuttonid.replace('edit', 'span');
optionsid = editbuttonid.replace('edit', 'options');
defaultOptionsid = editbuttonid.replace('edit', 'defaultOptions');
removebuttonid = editbuttonid.replace('edit', 'remove');
var value = ($("#"+spanid).text()).trim();
$("#MultiSelect_Options").val(value);
});
}
});
Here, whenever I add an option, that option gets added to the div, default value and preview fields. Whatever I add as an option, it gets added.
But, the problem is, when I edit the option I provide, the option inside the div gets changed. But, the option in the default value and preview displays the same text which was provided previously. But, when I inspect the element, I can see the edited text as well as edited value. But, the previously provided option is only shown. The edited text is not shown.
I don't know what's wrong with the above code. What should I change in this?

Add required attribute when you add form inputs dynamically

I have a form where dynamically, the user can add/delete form inputs. The problem is that in form-group which is hidden, I can't add the attribute required because in submit event, the submit won't happen.
How can I add the attribute required every time i press + button and delete it when I press - button?
I tried this: $('#barcode').prop('required',true); but isn't right because if I press 2 times the + button, I will have 2 inputs with the same id...
var counter = 0;
$('#form1')
// Add button click handler
.on('click', '.addButton', function() {
counter++;
var $template = $('#addLine'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-index', counter)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="barcode"]').attr('name', 'barcode-' + counter).end()
.find('[name="productsInBox"]').attr('name', 'productsInBox-' + counter).end()
.find('[name="packer"]').attr('name', 'packer-' + counter).end()
.find('[name="count"]').attr('name', 'count-' + counter).end();
$('#barcode').prop('required', true);
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('data-index');
counter--;
// Remove element containing the fields
$('#barcode').prop('required', false);
$row.remove();
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-6">
<form id="form1" method="post" action="actions?do=barcodePaleta_submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input type="text" pattern=".{23,23}" class="form-control" name="barcode" required/>
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" required/>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div id="addLine" class="form-group hide">
<label for="inputName" class="col-md-1 col-sm-2 control-label">box:</label>
<div class="col-md-3 col-sm-4">
<input id="barcode" type="text" pattern=".{23,23}" class="form-control" name="barcode" />
</div>
<label for="inputName" class="col-md-1 col-sm-2 control-label">num:</label>
<div class="col-md-1 col-sm-3">
<input type="number" min="0" class="form-control" name="productsInBox" />
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="form-group myTop">
<div class="col-lg-10 ">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>

I miss understood question.try this for + button
if($('#barcode').attr('required') != true){
$('#barcode').attr('required',true);
}
this for - button
if($('#barcode').attr('required')){
$('#barcode').removeAttr('required');
}

Delete the last item element JQuery

I'm working on something, basically I have this Add Parameter button which adds 2 new text field namely a parameter name and parameter value. I have a button which is delete parameter. How can I delete the last parameter name and value? The button should delete the last.
Here's my code https://jsfiddle.net/q7fokdbw/
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="paramArea">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" class="form-control" id="paramCount" name="paramCount" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="deleteParams">Detele Parameter</button>
</div>
</div>
<script>
$(function() {
var count = 0;
$( "#addParams" ).click(function() {
$("#paramArea").append('<br /><input type=text class="form-control" name=ParamName'+count+' id=ParamName'+count+' placeholder="Parameter Name" /> ');
$("#paramArea").append('<br /><input type=text class="form-control" name=ParamValue'+count+' id=ParamValue'+count+' placeholder="Parameter Value" />');
count++;
$("#paramCount").val(count);
});
});
</script>

You should rather wrap those two inputs in div and append it to #paramArea. like this:
$("#paramArea").append('
<div class="rowelement"><input type=text class="form-control" name=ParamName'+count+'
id=ParamName'+count+' placeholder="Parameter Name" /><br />
<input type=text class="form-control"
name=ParamValue'+count+' id=ParamValue'+count+'placeholder="Parameter Value" /></div>
');
and on click of delete button, you can get .rowelement and delete last element using :last and .remove()
$("#deleteParams").click(function(){
$(".rowelement:last").remove();
});

Use .remove() with the :last selector
$('#deleteParams').click(function(){
$('[id^=ParamName]:last,[id^=ParamValue]:last').remove();
});
Updated Fiddle

You can do it something like :
$("#deleteParams").on('click', function(){
$("#paramArea").find(':text:last').remove();
});
Demo

Using a container will make this easier.
$(function() {
var count = 0;
$("#addParams").click(function() {
$("#paramArea").append(
'<br /><div class="container"><input type=text class="form-control" name=ParamName' + count + ' id=ParamName' + count + ' placeholder="Parameter Name" /> <br /><input type=text class="form-control" name=ParamValue' + count + ' id=ParamValue' + count + ' placeholder="Parameter Value" /></div>');
count++;
$("#paramCount").val(count);
});
$("#deleteParams").click(function() {
$('.container').last().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="paramArea">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" class="form-control" id="paramCount" name="paramCount" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="deleteParams">Detele Parameter</button>
</div>
</div>

Try this one
$("#deleteParams" ).click(function() {
$("#paramArea").find(".form-control").filter( ":last" ).remove();
});