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">

How to hide, when page starts, html element generated automatically with jQuery

When page starts, jQuery produce a form that I want it to be hidden. Because I want to show it when I click on a button.
With these instructions I create the form:
$("#cards").append('<li id="card" class="feed-element animated fadeInRight" style="color: grey" data-user="' + key + '">\n\
<button id="previewCard" type="button" value = "' + key + '" class="btn btn-primary btn-sm btn-block btn-xs">' + preview + '</li>\n\
<form id="cardFormDetail" class="animated fadeInRight">\n\
<div class="form-group">\n\
<input id="customerCardDate" class="form-control" type="text">\n\
</div>\n\
<div class="form-group">\n\
<input id="customerCardScope" class="form-control" type="text">\n\
</div>\n\
<div class="form-group">\n\
<textarea id="customerCardText" class="form-control" rows="5"></textarea>\n\
</div>\n\
</form>\n\
<button id="modifiedCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-left">Modified</button>\n\
<button id="deleteRequestCard" type="button" value = "' + key + '" class="btn btn-primary btn-xs pull-right">Delete</button>\n\
<br><hr style="border-color: #c80b00;">');
When page starts cardFormDetail form is visible. How can I make it not visible?
I tried with $("#cardFormDetail").hide() but it doesn't work. And the reason is because it is a dynamic element, right?

Since you want to hide it on load, pls use CSS as opposed to jQuery unless there is a reason to justify why you want to do it so.
#cardFormDetail { display: none; }

put your code which hides the form after the code where it appends the element to the.
Another things is you are appending an element with the same id 'cards' to an existing element which has the same id.
It doesn't matter if your element is dynamically added, you should always be able to hide it using jquery.
Can you post the whole code?

How come my input box's value isn't being returned?

Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>

If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});

I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.

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.

Displaying the selected value in JavaScript

i am using bootstrap btngroup to select one value ..how can i display that selected value ?? here is my code.
<div class="input-group">
<div id="radioBtn" class="btn-group">
<a class="btn btn-primary btn-sm active" data-toggle="fun" data- title="Y">YES</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="X">I don't know</a>
<a class="btn btn-primary btn-sm notActive" data-toggle="fun" data-title="N">NO</a>
</div>
<input type="hidden" name="fun" id="fun">
</div>
and JS
$('#radioBtn a').on('click', function(){
var sel = $(this).data('title');
var tog = $(this).data('toggle');
$('#'+tog).prop('value', sel);
$('a[data-toggle="'+tog+'"]').not('[data- title="'+sel+'"]').removeClass('active').addClass('notActive');
$('a[data-toggle="'+tog+'"][data-title="'+sel+'"]').removeClass('notActive').addClass('active');
})

Tidy your code - remove the spaces in your data- title attribute, in both the HTML and JS, as these are causing it to break.
Add a <div id="display"></div> in your HTML somewhere and style it how you like.
Add this line to your JS click handler: $('#display').html(sel);
Here's a demo.
If you'd prefer the result to be the text of the radio button instead of the value, use $('#display').html($(this).html()); instead in step 3.
Done.

Not sure if this is what you mean, but to get the value (or text) from a clicked button in a button group, I use for example.....
HTML
<div id="aBtnGroup" class="btn-group">
<button type="button" value="L" class="btn btn-default">Left</button>
<button type="button" value="M" class="btn btn-default">Middle</button>
<button type="button" value="R" class="btn btn-default">Right</button>
</div>
<p>
<div>Selected Val: <span id="selectedVal"></span></div>
JS
$(document).ready(function() {
// Get click event, assign button to var, and get values from that var
$('#aBtnGroup button').on('click', function() {
var thisBtn = $(this);
thisBtn.addClass('active').siblings().removeClass('active');
var btnText = thisBtn.text();
var btnValue = thisBtn.val();
console.log(btnText + ' - ' + btnValue);
$('#selectedVal').text(btnValue);
});
// You can use this to set default value upon document load
// It will fire above click event which will do the updates for you
$('#aBtnGroup button[value="M"]').click();
});
CONSOLE OUTPUT
Left - L
Middle - M
Right - R
Hope this helps
Plunker here