We Keep Coding

html js append and getElementByName

Why i can't getElementByName?
<form class="form" action="#">
<p class="EmptySlot" hidden>
<input name="characters" type="radio" id="empty" disabled="disabled"/>
<label for="empty">Пустой слот</label>
</p>
</form>
Then:
$(".form").append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
And it's don't work:
var radios = document.getElementsByName('character');

The method will return a collection, not a single Element. You may try...
$(".form")[0].append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
Should get the first form that belongs to the "form" class.
The second should work, but remember that "radios" will be a collection too.

.getElementsByName might return more than one element if multiple elements have the name of 'character'.
To get the first item in the list of returned elements, try:
var radios = document.getElementsByName('character')[0];

dynamic Accordion post and answer

I have this fiddle
http://jsfiddle.net/nesreen/m5TMF/763/
$("#AddansId").click(function(){
//get the parent of the div with id(Collapse+x)
// to abend the data content of the textarea beside the word
//Account Registeration at PrepBootstrap
});
I can create a dynamic accordion with button
inside each accordion I need to make another textarea and button to add another texts in the same collapse
but I face the problem of how can I get the parent of the button in each time even if the parent id is dynamic also

Let's see. A few steps to take here:
First you need to bind the click a bit differently(event
delegation) in this case because you want to click on dinamically
added elements
Second, we get the parent id using closest() method and attr('id')
For getting the textarea value you can use
$(this).parent().prev().find('textarea').val()
and then use append() method to append the text next to the word you want and finally use $(this).closest('.container').append(answer); to add the textbefore the word(this was a bit unclear so I added it before Account Registeration at PrepBootstrap. I hope that is what you meant)
var x = 1;
$(document).on('click', "#AddansId", function() {
var idOfParent = $(this).closest('.panel-collapse').attr('id');
//console.log(idOfParent);
var answer = $(this).parent().prev().find('textarea').val();
$(this).closest('.container').append(answer);
});
$(document).on('click', '#AddQuestId', function() {
x = x + 1;
$("#accordion").append('<div class="panel panel-default">' +
'<div class="panel-heading">' +
'<h4 class="panel-title"> ' +
'<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse' + x + '">' + $("#comment").val() + '</a> </h4>' +
'</div>' +
'<div id="collapse' + x + '" class="panel-collapse collapse in">' +
'<div class="panel-body">' +
'<div class="container"> ' +
' <form>' +
'<div class="form-group" >' +
'<label for="comment">answer:</label>' +
'<textarea class="form-control" rows="5" id="answer' + x + '"></textarea> ' +
' </div>' +
' <div style="float: right;"> <input type="button" class="btn btn-info" value="answer" id="AddansId"></div>' +
'</form>' +
'</div>' +
'Account registration at <strong>PrepBootstrap</strong>' +
'</div>' +
'</div>' +
'</div>' +
'</h4>' +
'</div>');
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<form>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<div style="float: right;"> <input type="button" class="btn btn-info" value="Add Question" id="AddQuestId"></div>
</form>
</div>
<div class="panel-group" id="accordion">
</div>

add event to dynamically created button [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
Here i am creating dynamic radio buttons, text area and click events but my click events for add and remove button is not working for the dynamically created button. I tried using on click event of jquery but it is not working as expecte. How to add .on jquery function in my scenario i tried using :
$("#TextBoxesGroup")‌​.on("click", ".abc", (function () {
//some script
});
but when i click on the new dynamic add button which i created it is not at all adding another block
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var counter = 2;
alert(123);
$(".abc").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" ><br><input type="radio" name="gender' + counter + ' value="male" > Male<input type="radio" name="gender' + counter + ' value="male" > Female<br><textarea id="textbox' + counter + ' rows="4" cols="50"></textarea><input type="button" class="abc" id="addButton' + counter + '" value="Add Button" ><input type="button" id="removeButton' + counter + '" value="Remove Button" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head>
<body>
</head>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<textarea id="textbox" rows="4" cols="50"></textarea>
<input type='button' class="abc" value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</div>

Use event delegation.
$(".abc").on('click',function(){
//add your script
})
OR
$("immediate_parent_id_or_class").on('click',".abc",function(){
//add your script
})

How to create a remove button to remove one div at a time using JQUERY?

<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
<button id="Remove" type="submit">Remove Parameters</button>
</div>
<script>
var count = 2;
$('#More').click(function(){
if (count==11) {
}
else {
$("div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>");
count++;
}
});
$('#Remove').click(function(){
....
});
Can someone show me how if a user clicks on a remove button, the div that was appended can be removed? Also if user appends multiple times, I want the remove button to only remove one div at a time.

If you convert the id of Remove button to class, you may add the remove button to each new created div:
$(function () {
var count = 2;
$('#More').on('click', function(){
if (count==11) {
}
else {
$(".div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br><button class=\"Remove\" type=\"submit\">Remove Parameters</button></fieldset></div>");
count++;
}
});
$('#Last').on('click', function(){
$('div.fieldBlock:last').remove();
count--;
});
$(document).on('click', '.Remove', function(e){
$(this).closest('div.fieldBlock').remove();
count--;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="div2">
<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
</div>
<div class= "button">
<button id="Last" type="submit">Remove last Parameters</button>
</div>
</div>

This code will remove the last appended div only.
I've created div with id (div2) where all the divs will be appended.
var count = 2;
$('#More').click(function(){
if (count==11) {
}
else {
$("#div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>");
count++;
}
});
$('#Remove').click(function(){
$('#div2').find('div').last().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
<button id="Remove" type="submit">Remove Parameters</button>
</div>
<div id="div2"></div>

$(document).ready(function(){
$('body').on('click','div',function(){
$('div').removeAttr('current'); //removes attr from all divs
$(this).attr('current','true'); // adds attr to div clicked
})
$('body').on('click','#remove',function(){
$('current="true"').remove();//removes div with attr current='true'
})
});
I used the .on method to delegate the events since you are dynamically adding them.

Create dymanic textboxes in button onclick & save data to database

I am trying to create dynamic textboxes using php & jquery. I want to submit a paper for presentation, each presentation have more than one authors and each author have more than one affiliations. I tried to create dynamic text boxes for authors and their affiliations. I can create authors dynamically up to 10 but affiliations for only 1st author. Anybody please help me to correct this code. Thanks
<html>
<head>
<title>author</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<h1>Author</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addAuthor").click(function () {
if(counter>10){
alert("Only 10 authores allow");
return false;
} //addAffiliation
var newauthorDiv = $(document.createElement('div'))
.attr("id", 'authorDiv' + counter);
newauthorDiv.after().html('<label> <b> Author '+ counter + ' </b> </label>' +
'<br><label>Name : </label>' +
'<input type="text" name="author1_name' + counter + '" id="author1_name' + counter + '" value="" >'+
'<div id="AffiliationGroup"><label>Affiliation 1 : </label>' +
'<input type="text" name="author' + counter + 'affiliation' + counter +
'" id="author' + counter + 'affiliation' + counter +'" value="" >' +
'<input type="button" id="addAffiliation" value="+" >' +
'<input type="button" id="removeAffiliation" value="-" >' + '</div>');
newauthorDiv.appendTo("#AuthorGroup");
counter++;
});
$("#removeAuthor").click(function () {
if(counter==1){
alert("No more author to remove");
return false;
}
counter--;
$("#authorDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Author " + i + " : " + $('#author' + i).val();
}
alert(msg);
});
});
// Affiliation
$(document).ready(function(){
var counter = 2;
$("#addAffiliation").click(function () {
if(counter>10){
alert("Only 10 Affiliations allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label> Affiliation '+ counter + ' : </label>' +
'<input type="text" name="author1_affiliation' + counter +
'" id="author1_affiliation' + counter + '" value="" >');
newTextBoxDiv.appendTo("#AffiliationGroup");
counter++;
});
$("#removeAffiliation").click(function () {
if(counter==1){
alert("No more Affiliations to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Affiliation " + i + " : " + $('#author1_affiliation' + i).val();
}
alert(msg);
});
});
</script>
</head><body>
<div id='AuthorGroup'>
<label><b>Author 1 </b></label> <br>
<label>Name : </label><input type='author' id='author1_name1' >
<div id='AffiliationGroup'>
<label>Affiliation 1 : </label><input type='textbox' id='author1_affiliation1' >
<input type='button' value='+' id='addAffiliation'>
<input type='button' value='-' id='removeAffiliation'>
<!--<input type='button' value='Get TextBox Value' id='getButtonValue'>-->
</div>
</div>
<input type='button' value='Add Author' id='addAuthor'>
<input type='button' value='Remove Author' id='removeAuthor'>
<!--<input type='button' value='Get author Value' id='getButtonValue'>-->
</body>
</html>

See http://jsfiddle.net/9y3n33jx/
I haven't completed the whole thing but it should give you an idea.
You need to put your original author inside a div.authorDiv. Use class names instead of id for your + - buttons.
<input type='button' value='+' class='addAffiliation'>
<input type='button' value='-' class='removeAffiliation'>
Because those buttons will be dynamically added you need to bind to click event on body for the button class:
$('body').on("click", ".addAffiliation", function () {
(When the button is clicked you need to figure out the number of affiliates inside div by class, i.e. $(this).parent().(".affiliateClass").length)
When the add button is clicked, you need to add the new div to the parent of the clicked button:
newTextBoxDiv.appendTo($(this).closest(".authorDiv"));
You'll have to do the same for the - button. This should get you going in the right ddirection.