We Keep Coding

How to change the input and label ids?

I making button when a click clones the input with label. I need to auto-increment the input and label ids while cloning.
My code changes the id for the div but not input and label ids.
any solution
var cloneCount = 1;
///////////////////////////////
var stdTrip = $("#parentImagesContainer").children(".childImagesContainer").first().clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$(document).on('click', '.addImage',function() {
append_trips();
});
function append_trips() {
var objHtml = stdTrip.clone('.addImage').attr('id', 'customFile' + cloneCount++).insertAfter($('[id^=customFile]:last'));
$("#parentImagesContainer").append(objHtml);
}
//////////////////////////////////////////////
$(document).on("click", ".removeImage", function(){
if($('#parentImagesContainer .childImagesContainer').length > 1)
{
$(this).closest(".childImagesContainer").remove();
}
else
{
alert(300);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentImagesContainer">
<div class="form-group m-form__group row childImagesContainer">
<label class="col-form-label col-lg-2">title</label>
<div class="col-lg-8">
<div></div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
</div>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom addImage">
<i class="fa fa-plus"></i>add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom removeImage">
<i class="fa fa-minus"></i>remove
</a>
</div>
</div>
</div>

There should almost never be a need for auto-incrementing IDs.
In your case...
<input type="file" class="custom-file-input" id="customFile" name="images[]">
<label class="custom-file-label" for="customFile">image</label>
Should be...
<label class="custom-file-label">
<input type="file" class="custom-file-input" name="images[]">
image
</label>

Bootstrape Dynamic Form Fields not working when adding inside a form with Form Submit

From the screenshot left side, its Dynamic Form Fields working fine but when i combine with a Form, all the buttons are not working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>
<style>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
.glyphicon
{
font-size: 12px;
}
</style>
HTML
<div class="container">
<form id="form_submit" action="../controller/add_options.php?add=add" method="POST">
<div class="form-group">
<label>Name</label>
<input type="text" name="option_name" class="form-control input-lg" required>
</div>
<div class="form-group">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Options</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-6">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add more option values</small>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block btn-lg"><span class='glyphicon glyphicon-plus'></span> Add Category</button>
</div>
</form>
</div>
The error occurred when I adding in .
<form></form>
So that means the buttons must have conflict with each other. Anyone know whats wrong with my coding?

You are nesting a form within another form.
Do you really need the following in your second file?
<form role="form" autocomplete="off">
...
</form>
What if you replace that with
<div class="d1">
...
</div>
And then in your first file replace
var controlForm = $('.controls form:first'),
With
var controlForm = $('.controls .d1:first'),

I have solved that in a little bit different way. For some reasons #Suraiya Khan's solution did not work to me, not sure why but if it works for you, it's probably better to stick to that other solution, not mine. I'm still leaving here in case if someone same results as me. I'm leaving <form> tags (but changed other part, which might not be good).
In JavaScript part I changed:
var controlForm = $('.controls form:first'),
To:
var controlForm = $('.controls'),
That would actually be enough to make it work again, but the first field goes above a note (Press + to add more option values) so to solve this I moved it above all fields (this is where I changed that other part).
This piece of code was moved below <div class="controls"> (and removed <br> because it leaves unnecessary space between first and second fields):
<div class="controls">
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add more option values</small>
And a side note:
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
You do not need to add / at the end of tag because it gives no meaning at all. And code looks better without it. It is fine to write:
<input class="form-control" name="fields[]" type="text" placeholder="Type something">

Change enabled to disabled and disabled to enable the bootstrap with jquery

How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked
HTML
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>
JQUERY
$('#submit1').click(function() {
$('#tes').prop("disabled",true);
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});

Use this Generalized function in your project to make things enabled / disabled.
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#submit1').click(function() {
$('#tes').toggleDisabled();
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>

You can use this one.
$('#submit1').click(function() {
$('#tes').prop("disabled",!$('#tes').prop("disabled"));
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>

.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.
if( $('#tes').prop("disabled") )
$('#tes').prop("disabled",false);
else
$('#tes').prop("disabled",true);
You could reduce this to:
$('#tes').prop("disabled", !$('#tes').prop("disabled") )
This fetches the current value of the property, negates it with !, then sets that as the new value

If what you want is to toggle the disable prop:
$('#submit1').click(function() {
$('#tes').prop("disabled", !$('#tes').prop("disabled"));
});

showing a button if there are no dynamically created form fileds available

i have a field with 'add' and 'remove' field options and my problem is if someone click remove button at first time then there is nothing left. however i created a another button and hide it by this code.
$('#more_fields').hide();
is that possible to show this button when there is no field or no button with deleteMe class available
i'm using this code for delete fields.
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
var room = 1;
function add_fields() {
room++;
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("div");
divtest.innerHTML = '<div class="addform"><div class="input-group"> <label for="Services">Services '+room+'</label> <input type="text" class="form-control" id="Services" name="serve[]" style="max-width: 148px;" placeholder="Add Services"> <span class="input-group-btn" > <button class="btn deleteMe" style="">×</button> <button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button> </span> </div></div>';
objTo.appendChild(divtest)
}
//]]>
$(document).on("click",".deleteMe", function(){
$(this).closest(".addform").remove();
});
$('#more_fields').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<form class="form-inline">
<div class="">
<div class="form-group">
<div id="room_fileds" class="text-center">
<div class="addform">
<!--<label for="qualification">Services 1</label>
<input type="text" class="form-control" id="Service" style="" placeholder="Add Services">
-->
<div class="input-group">
<label for="Services">Services 1</label>
<input type="text" class="form-control" id='Services' name="serve[]" style="max-width: 148px;" placeholder="Add Services">
<span class="input-group-btn" >
<button class="btn deleteMe" style="">×</button>
<button class="btn btn-success pull-right" onclick="add_fields();" type="button"><i class="fa fa-plus"></i></button>
</span>
</div>
<span id="err_quali" style="color:red;display:none;font-size:13px;padding-left:105px;">Enter only Chars</span>
</div>
</div>
<input type="button" class="btn btn-success btn-sm" id="more_fields" onclick="add_fields();" value="Add Services" />
</div>
</div>
</form>

on delete do like
room -= 1;
than if at some point you do
if(room===0) { /*here show your button */ }
I've noticed that you use ID for buttons like #err_quali, #Services... Don't. you're going to have load of duplicate IDs on the page which is wrong. Use classes instead.
jsBin demo
var rooms = 1;
var c = 1;
var $roomsWrapper = $("#room_fileds"); // the parent
var $room = $(".input-group").clone(); // Store a group
$('#more_fields').hide();
$(".form-inline").on("click", ".deleteMe", function(ev) {
ev.preventDefault();
rooms -= 1;
$(this).closest(".input-group").fadeOut(300, function(){
$(this).remove();
});
$('#more_fields').toggle( !rooms );
}).on("click", ".addField, #more_fields", function(ev) {
ev.preventDefault();
rooms += 1;
c += 1;
var $klon = $room.clone();
$klon.find(".groupNum").text(c);
$roomsWrapper.append( $klon );
});
.err_quali{
color:red;
display:none;
font-size:13px;
padding-left:105px;
}
.form-control{
max-width: 148px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FORM -->
<form class="form-inline">
<div id="room_fileds">
<!-- CLONABLE FIELD HELPER -->
<div class="input-group">
<label for="Services">Services <span class="groupNum">1</span></label>
<input type="text" name="serve[]" placeholder="Add Service">
<span class="err_quali">Enter only Chars</span>
<span class="input-group-btn" >
<button class="deleteMe btn">×</button>
<button class="addField btn" type="button">+</button>
</span>
</div>
<!-- Here jQuery appends Room group clones -->
</div>
<button id="more_fields">Add Services</button>
</form>

How to add fileds dynamically using javascript with Bootstrap?

I got the code add fields dynamically here Add fields dynamically - link
when I try use this code insight my form class <form class="form-horizontal" action="create.php" method="post"> it won't work but when put this filed out from form class it will work I know have to changes in java script but I'm new to JS so please help me the changes
this my form:
<body>
<form class="form-horizontal" action="create.php" method="post">
<div class="form-group">
<label for="des" class="col-sm-2 control-label">To Address</label>
<div class="col-sm-8">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group ">
<input class="form-control"name="fields[]"type="text" placeholder="To....." />
<span class="input-group-btn">
<button class="btn btn-success btn-add"type="button">
<span class="glyphicon glyphicon-plus"></span> </button> </span>
</div>
</form>
</div>
</div>
</div>
<div class="form-group">
<input name="submit" class="btn btn-success" type="submit" value="Save" id="search"/>
</div>
</form>
</body>
myscript :
<script>
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
</script>

You made a mistake in your HTML markup, adding a form inside another form, and i had a look at your reference, you would see you did make a mistake.
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" type="text" placeholder="Type something" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>
</div>
</div>
</div>
So if you wanted to add your POST method, you would add it into the form tag there, and not create a new one.
Hope this helps.

here i did a mistake to add form insight form the easy way to add multiple fields :
<label for="des" class=" control-label">Description</label>
<div class="multi-field-wrapper ">
<div class="multi-fields">
<div class="multi-field">
<div class="col-sm-8">
<input id="des" type="text" class="form-control" name="descrip[]"></div>
<span class="remove-field">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span></button></span>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
script funtion :
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});