Develop Reference

javascript to remove dynamically added div

i have 3 textfield which i want to clone with one remove icon on add button click ...upto this my code works fine.
Now i want to remove the last 3 textfields of that particular div on remove button click...but my code removes all the dynamically added textfields of my form..
please help me to resolve this....
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"></div>');
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><button class="remove">x</button></div>');
return false;
});
$('#exercises').on('click', '.remove', function() {
$(this).parents("#exercises").remove();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
</div>
<button id="add_exercise">add exercise</button>
<button class="remove">x</button>
</fieldset>

The issue is with your use of .parents('#excercises') as this selects the top level container and removes it.
A better solution would be to wrap all the 3 inputs you append in their own div and then remove that using closest(), like this:
$('#add_exercise').on('click', function() {
$('#exercises').append('<div class="exercise"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><input type="text" name="exercise[]"><button type="button" class="remove">x</button></div>');
});
$('#exercises').on('click', '.remove', function() {
$(this).closest(".exercise").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="exercises">
<div class="exercise">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<input type="text" name="exercise[]">
<button type="button" class="remove">x</button>
</div>
<button type="button" id="add_exercise">add exercise</button>
</fieldset>
Note that I added type="button" to your <button> elements as it would make sense for them not to submit any parent form elements.

Use jQuery to replace span content with field value

I want to have form fields, when populated and a button clicked will change the contents of span's within html. I have tried the following but the span contents aren't being replaced.
I have written the following html:
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span></p>
Then have written the following jQuery:
<script>
$(function() {
$("button").click( function()
{
$("#nameValue").keyup(function() {
var val = $(this).val();
$("#name").html(val);
});
}
);
});
</script>

Try separating keyup, click event handlers , setting button disabled to true if no value at "#nameValue" , setting button disabled to false at keyup event
$(function() {
var button = $("button"),
val = "";
$("#nameValue").keyup(function() {
val = $(this).val();
if (val.length > 0 && /\w+/.test(val)) button.prop("disabled", false)
});
button.click(function(e) {
e.preventDefault();
$("#name").html(val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default" disabled="true">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span>
</p>

This will change span value after button click and on keyup
<script>
$(function() {
$("button").click( function(){
changeSpanValue($("#nameValue").val());
});
$("#nameValue").keyup(function() {
changeSpanValue($(this).val());
});
});
function changeSpanValue(val){
$("#name").html(val);
}
</script>

How to set the data-attribute of a button to whatever value set in an input [type=text]?

I have a modal and inside my modal is an input[type]. And I want to set default value and that default value is from a data-attribute of a button..
Here is my code:
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number"/>
<button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>
and this:
document.getElementById("ID").onmouseover = function() {
var id=document.getElementById("ID").value;
$('#confirmation').attr('data-id' , id);
return false;
};
$('#confirm').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-body #IDN').val(id);
});
I can set the data-attribute of the button but the problem is if I change the value in the input textfield. The data-attribute doesn't change. How am I going to fix?

Use jQuery change() event handler
$('#ID').change(function() {
$('#confirmation').data('id', this.value);
console.log($('#confirmation').data('id'));
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number" />
<button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>
or use keypress() event
$('#ID').keypress(function() {
$('#confirmation').data('id', this.value);
console.log($('#confirmation').data('id'));
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" name="ID" id="ID" placeholder="Enter ID number" />
<button id="confirmation" type="button" class="btn btn-primary" data-toggle="modal" data-target="#confirm">Submit</button>

How about using blur
$('#ID').blur(function() {
$('#confirmation').data('id', this.value);
});

how to i add a input text just above the submit button in form using jquery

I am trying to add a input text just before the submit button using jquery
<form>
<input type="text" id ="text1" />
<input type="text" id ="text2" />
<input type="submit" name="submit">
</form>
I want to dynamically add another textbox just above the submit button

You can do this way:
$('form').find('input:submit').before('<input type="text"/>')
FIDDLE:
http://jsfiddle.net/ehsansajjad465/r4o09rdd/

Give your button an id attribute like so:
<input type="submit" id="submitbtn" name="submit">
Then, this should do it
$( '#submitbtn' ).before( '<input type="text" id="text3" />' );

I'm assuming you wish to append the text box on button click.
<input type="submit" id="btn">
Jquery code
$("#btn").click(function(){
$("#btn").before("<input type='text' id='text3' />");
});
If you wish to keep adding input tags and keep each id dynamic
var i = 3;
$("#btn").click(function(){
$("#btn").before('<input type='text' id="text'+id+" />');
i++;
});

If you give an id to your form, It would be asier to select only the form you want.
In jQuery there is a method called before:
$("input[type=submit]").before("<input type='text' id='text3' />");

Here is an example for both adding and removing elements dynamically using jQuery:
http://jsfiddle.net/EdsonF/pax9jqte/
This is the HTML:
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
This is the Javascript:
$('.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();
});
});
the final result allows you to do the following:

Try this
<input type="button" onclick="addInput()" value="Add input" />
<script>
function addInput(){
var _input = '<input type="text" name="anInput" value="Hola" />';
_input.insertBefore('.submit');
}
Also replace your submit input by
<input type="submit" name="submit" class="submit">

How do I associate button events with a unique control?

I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.
My function is
$(document).ready(function() {
$(".xx").live('click', function(){
alert('clicked');
});
});
How do i make sure the button click is unique to that section?.

Use an ID value instead for each input button. This way, jQuery can identify it like so:
$('#button_tag');
HTML:
<html>
<head></head>
<body>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn1" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn2" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn3" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn4" type="submit" class="xx" value="Submit">
</section>
</body>
</html>
Javascript:
$(document).ready(function () {
$(".xx").live('click', function () {
alert('clicked ' + $(this).attr('id'));
});
});
JsFiddle:
http://jsfiddle.net/XDsSt/7/

Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.
$(document).ready(function() {
$(".xx").live('click', function(e){
e.preventDefault(); //if you want to prevent normal form submit
var item=$(this);
var sectionClicked=item.closest("section");
//Let's alert the first text box
alert(sectionClicked.find("input").first().val());
//do whatever with the items belongs the current section
});
});
Sample : http://jsfiddle.net/XDsSt/8/
I recommend you to switch to jQuery on instead of live as it is deprecated.

$(document).ready(function() {
$(".xx").live('click', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
If possible then instead of .live(), use .on() with jQUery 1.7+, because live() is deprecated.
$(document).ready(function() {
$("body").on('click', '.xx', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo

if id is not an option - I don't understand that , but you can put multiple classes in buttons
<input type="button" class="xx btn1" ... >
$(document).ready(function() {
$(".xx").live('click', function(){ // look into on instead on live
if $(this).hasclass('btn1');{
alert('clicked');
}
});
});