We Keep Coding

Append a button when user check the check box and vice versa

Here is an input field. which returned from an ajax response, and then appended to another div.
Now I want when on any checkbox a user clicks a button with some data will be appended to a specific div.
<input name="new" onclick="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">
This is the div where i want to append the button.
<div id="setBgColor" class="px-1 py-1 shadow"
style="height: 600px;width: 320px;position: relative;border: solid black 15px;
border-radius: 24px; background-color: #7ecff4;margin-top: -70px;">
first i tried the custom function but it doesnt work properly.
function showButton() {
$('#setBgColor').html('<div><button type="button" class="btn btn-sm btn-block btn-primary"> </button></div>');
}
Then I tried this jquery code but it also does nothing.
$('#switchButton').on('click').each(function(){
$('#setBgColor').html('<div><button type="button" ckass="btn btn-sm btn-block btn-primary"> </button></div>');
});

You don't need to define event using jquery. Replace onclick with onchange on input tag
Since we are using checkbox, we need to use onchange event
Can you try
<input name="new" onchange="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">

Cloning a bootstrap input-group into a table

I am cloning a hidden input-group into a table: JSFiddle
input-group:
<div id="protoTextInput" class="input-group">
<input type="text" class="form-control input-sm" value="tw.local." />
<span class="input-group-btn">
<button type="button" class="btn btn-info btn-sm" onclick="autoVar(this);"><i class="glyphicon glyphicon-flash"></i></button>
</span>
</div>
js-clone:
var filterTable = $('#filterTable').find('tbody');
var i = (filterTable.find('tr').length + 1);
filterTable.append(
'<tr><td>' + i + '</td><td>Test</td><td>' + '</td><td></td>' + '<td><button onclick="remColumnFromFilters(this);" type="button" title="remove from filters" class="btn btn-danger btn-sm"><i class="glyphicon glyphicon-trash"></i> remove</button></td></tr>'
);
// Add operator select
filterTable.find('tr:last td:nth-child(3)').append(
$('#protoOperators').clone().attr('id', 'operator_' + i).show()
);
// Add Input for value
filterTable.find('tr:last td:nth-child(4)').append(
$('#protoTextInput').clone().attr('id', 'txt_' + i).show()
);
But the input-group gets destroyed (breaks between input and button).
Any idea why?

So apparently, when I was first creating this on JSFiddle I used a newer version of jQuery and everything worked. - what the hell?
In my code I used jQuery v1.11.2 which caused the break. v3.2.1 works as wanted.
So this stays here for anyone running in the same problem.

You can style the input inside the table to not take 100% width and it will solve your styling problem:
#filterTable input.form-control.input-sm {
width: calc(100% - 50px);
}
Here is a working example:
https://jsfiddle.net/57ozm4no/2/

Adding dynamic form elements jQuery

I am attempting to use jQuery to add the dynamic form elements to my page. At the moment I can get one of my form elements to be added when the user clicks the button but the second element isn't being added alongside it.
I do this by appending some html to divs with a specific class when a button is clicked.
I have created a JSfiddle. As you can see the 'ingredient' part is working, however the quantities is not.
https://jsfiddle.net/fe0t3by2/
$('.recipe-ingredients #addNewIngredient').on('click', function () {
var i = $('.recipe-ingredients .ingredient').size() + 1;
$('<div class="form-group ingredient"><label class="control-label" for="searchinput">Ingredients</label><div><input id="ingredient_' + i + '" name="ingredients[]" type="text" placeholder="Ingredients" class="form-control input-md"></div></div>Add Ingredient</div>').appendTo($('.recipe-ingredients .ingredients'));
$('<div class="form-group"><label class="control-label" for="buttondropdown">Quantity</label><div class="input-group"><input id="quantity_' + i + '" name="quantity[]" class="form-control" placeholder="Quantity" type="text"><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Measure<span class="caret"></span></button><ul class="dropdown pull-right"><li>Grams</li><li>Ounces</li><li>Option three</li></ul></div></div>').appendTo($('.recipe-quantities .quantities'));
});
Thank you

You have misspelled the 'recipe-quantities' class on your quantities div.
<div class="col-md-6 recipe-quantites">
changed to
<div class="col-md-6 recipe-quantities">

At the moment I can get one of my form elements to be added when the user clicks the button but the second element isn't being added alongside it.
With dynamically added content you should delegate the click to the document for example (something where the object is contained in).
jQuery documentation .on()
$(document).on('click', '.recipe-ingredients #addNewIngredient', function () {
JSFiddle demo

Onclick on normal button is submitting form

SCENARIO
I have a java JSP view with a long form. This was working nice. I can submit my form by pressing enter in any input field or with submit button.
NEW REQUIREMENT
In a part, I must add buttons to replace some <label> for <input> to allow editing, nothing hard.
WHAT I TRIED
This part of the view is created dinamically, cause number of lines depends of the data introduced by user, this parts creates each line:
resultadoHTML += " <div class='row col-lg-12 col-xs-12' style='margin-bottom: 30px;text-align: left;'>";
resultadoHTML += " <label class='col-lg-3 col-xs-12 control-label' >" + nomCalidad + "</label>";
resultadoHTML += " <div class='col-lg-5 col-xs-8'>";
resultadoHTML += " <input type='text' class='form-control' value='"+valor+"' id='calidadCatId' maxlength='30' required='true' />";
resultadoHTML += " </div>";
resultadoHTML += " <div class='col-lg-2 col-xs-3' id='ccc" + parts[1] + "'>";
resultadoHTML += " <label class='control-label' id='unidadCCC" + parts[1] + "' >" + parts[4] + "</label>";
resultadoHTML += " </div>";
resultadoHTML += " <div class='col-lg-2 col-xs-1'>";
resultadoHTML += " <button id='eCCC" + parts[1] + "' class='btn btn-default'><span class='glyphicon glyphicon-plus-sign'></span></button>";
resultadoHTML += " </div>";
resultadoHTML += " </div>";
Resulting HTML of the button
<button id="eCCC5" class="btn btn-default"><span class="glyphicon glyphicon-plus-sign"></span></button>
PROBLEM
When I use onclick to define a function in the new button, this function is called, but after, the click event of the submit button is ALSO called and I dont know why... But as you can see in the code, even when i DON'T catch any event in the button the click event of the form is called.
OTHER INFO
FORM/BUTTON DEFINITION
<form:form class="form-horizontal" role="form" method="post"
commandName="contratMercan" action="../contratos/contratosubmit"
name="formulario" id="edicionContrato">
<button type="submit" class="btn btn-primary" id="edicionContrato">
<spring:message ... /> // omitted info
</button>
SUBMIT FUNCTION
$("#edicionContrato").submit(function(e){
e.preventDefault();
var form = this;
// checks and workarounds...
form.submit();
});
Any idea why could happen? Maybe dinamically introduced HTML code has some mistake and brokes javascript or html after?

When you use the <button> element without specifying a type, it defaults to type="submit". You need to specify it as type="button" to stop it submitting the form:
<button type="button" id="eCCC5" class="btn btn-default">
<span class="glyphicon glyphicon-plus-sign"></span>
</button>

If you have button with attribute type="submit", clicking on submit will send whole form. I think if you add attribute type="button" or just delete it. Form probably won't send if you click on button or push ENTER being in input.

Another option is to place the button element outside the FORM would help but it depends on your requirements. If you need to put that button inside the FORM then you've to mention type="button"

Hide a dynamic appended div with jQuery / hide don't work

I´m trying to hide a appended div with jQuery using hide() but is not working.
I'm append the button who trigger the action too.
This is the button:
<button type="button" class="btn btn-danger btn-xs" name="'+response[i][0]+'" id="studentContactDeleteButton" style="width:110px">Eliminar registro</button>
Here is the complete code of the function (including the div and the button):
With this I append divs to my page depending of the number of my records.
var formData = {type:"contact",id:id};
$.ajax({
type: "POST",
data : formData,
url: "./content/studentsData.php",
dataType: 'json',
success: function(response){
for(var i = 0; i < response.length; i++) {
$("#contactData").append('<div id="studentContactContainer'+response[i][0]+'" style="margin-bottom:-12px;border-top:1px solid #ddd;padding:16px 0px;">');
$("#contactData").append('<div class="form-group"><label class="col-sm-4 control-label">Descripción:</label><div class="col-sm-7 text-primary" id="div-studentContactDesc'+response[i][0]+'"><input type="text" style="font-size:12px" class="form-control" value="'+decodeHtml(response[i][1])+'" id="studentContactDesc'+response[i][0]+'" placeholder="Descripción"></div><div class="col-sm-1"> </div></div>');
$("#contactData").append('<div class="form-group"><label class="col-sm-4 control-label">Teléfono:</label><div class="col-sm-7 text-primary" id="div-studentContactPhone'+response[i][0]+'"><input type="text" style="font-size:12px" class="form-control" value="'+decodeHtml(response[i][2])+'" id="studentContactPhone'+response[i][0]+'" placeholder="Teléfono"></div><div class="col-sm-1"> </div></div>');
$("#contactData").append('<div class="form-group"><div class="col-sm-1"> </div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-success btn-xs" name="'+response[i][0]+'" id="button-test" style="width:110px">Guardar cambios</button></div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-danger btn-xs" name="'+response[i][0]+'" id="studentContactDeleteButton" style="width:110px">Eliminar registro</button></div><div class="col-sm-3 text-primary"><button type="button" class="btn btn-primary btn-xs" id="" style="width:110px">Restablecer</button></div><div class="col-sm-2"> </div></div>');
$("#contactData").append('</div>');
}
}
});
And with this I´m trying to hide the div but is not working
$(document).on('click','#studentContactDeleteButton',function(){
var id = $(this).attr("name");
$("#studentContactContainer"+id).hide();
});
The click works fine because im getting the value of the id (response[i][0] have the value of the id) but $("#studentContactContainer"+id).hide(); is not working, only hide the border top of the div but not all.
Hope somebody have an idea.
Thanks.

You are using .append function in a wrong way. You have to pass a complete div as parameter and not in different parts.
$("#contactData").append('<div id="studentContactContainer'+response[i][0]+'"></div>');
and after add all groups to your new contactContainer like this:
$("#studentContactContainer"+id).append(<div class="form-group"></div>)
.append(<div class="form-group"></div>);
.append(<div class="form-group"></div>);

Your first append statement in your loop is appending the container, but the subsequent append statements are not appending the specified divs to the new container.
I think you want something more like this
$('<div id="studentContactContainer'+response[i][0]+'"/>')
.appendTo('#contactData')
.append('<div>child div 1</div>')
.append('<div>child div 2</div>');
For better performance, compose the entire html string before appending it, like this
var html = '<div id="studentContactContainer'+response[i][0]+'"><div>child 1</div><div>child 2</div></div>';
$('#contactData').append(html);
For easier maintainability, you may want to consider a template engine like Handlebars.