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.
Related
I have a one word <p>, and I'm looking to change the content of that paragraph to the value of a input box. It's really simple but I'm new to JavaScript and jQuery.
This is the paragraph to change
<p class="editor-example" id="screen-name">Name</p>
and this is the form and the button I'm using to get and apply the change
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time.
Thanks!!
Put the button inside the form and add an event listener to it. Then grab the value from the input and use innerHTML to replace the content inside p tag
document.getElementById('apply').addEventListener('click', function() {
document.getElementById('screen-name').innerHTML = document.getElementById('nameID').value.trim()
})
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
<button id="apply" type="button">Apply</button>
</form>
You need to write keypress event for the text box
$("#text").keypress(function() {
$("#p").html($("#text").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p">p</p>
Please change the value of imput to change p: <input id="text"></input>
You can do like this:
$(document).ready(function(){
$("#nameID").keyup(function(){
var name = $("#nameID").val();
$("#screen-name").text(name);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
As you said:
Making the paragraph automatically change when the input box changes instead of a button would be handy if you want to take your time. Thanks!!
In Jquery:
$(document).ready(function(){
$('#nameID').keyup(function(){
$('#screen-name').text($(this).val());
});
});
In html:
<p class="editor-example" id="screen-name">Name</p>
<form id="info">
<input id="nameID" name="name" type="text" size="20">
</form>
<button id="apply" type="button">Apply</button>
$("#apply").click(function() {
$("#paragraph").text($("#nameID").val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<p id="paragraph">This Text changes from the form below</p>
<form>
<input id="nameID" type="text" >
<button id="apply" type="button">Apply</button>
</form>
This is my code in which I m trying to blur whole body except one textarea div nut could not succeed When I click on textarea whole body gets blur even using not in my script function
$(document).ready(function(){
$(".form-control").focus(function(){
$("body").not("div #hide").addClass("blur");
}).blur(function(){
$("body").removeClass("blur");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_area_home" id="hide">
<form action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="xAction" value="uploadFile" />
<textarea class="form-control" name="detail" placeholder="Upload File"></textarea>
<div class="text_area_button">
<input type="file" name="uploadDoc"/>
<input class="btn btn-primary btn-xs btn-rect" type="submit" value="Post" />
</div>
</form>
</div>
Take a look at this Fiddle. It accomplishes it finally :)
I had to remove the class from all of the parent elements to the div class as well.
$(document).ready(function() {
$(".form-control").focus(function() {
$("div").addClass("blur");
$('#hide').parents().removeClass("blur");
$('#hide').removeClass("blur");
$('.text_area_button').removeClass("blur");
}).blur(function() {
$("div").removeClass("blur");
});
});
Would like to see if anyone has a 1-liner for that add and removing classes.
I am trying to click on a button that makes the size of the container the button is in, become taller once the button is clicked.
But it is not working
the code is:
HTML
<div id="dynamicInput" class="dynamicInput">
<form name="new_addon" id="new_addon" method="post">
<input type="text" id="Product_name" name="Product_name" value="" placeholder="Product Name">
<input type="number" id="addon_price" name="addon_price" value="" placeholder="Additional Costs" maxlength="30" required>
<!--Add add-ons to product button -->
<input type="button" id="add_prod" name="add_prod" value="Add Option " >
<input type="button" id="new" value="Add another text input" onClick="addInput('dynamicInput');">
</form>
</div>
JS
$(document).ready(function (){
$("#add_prod").on("click", function (){
if ($(".dynamicInput").height() == 200) {
$(".dynamicInput").animate(
{height: "300px"});
}
else if ($(".dynamicInput").height() == 300) {
$(".dynamicInput").animate({height: "200px"});
}
});
});
Where have i gone wrong?
Thats work, you should position:absolute in your div
<div id="dynamicInput" class="dynamicInput" style="position:absolute;height:200px;background-color:red;" >
result : https://jsfiddle.net/cmedina/c9vsgauu/
try #dynamicInput instead on .dynamicInput
I am trying to create a button that onclick adds some new html elements to page but jQuery doesn't attach to does new objects.
<script>
jQuery(document).ready(function(){
jQuery("input[type='button']").click(function(){
var ask=confirm('Are you sure');
if(ask){
var n=jQuery(this).parent();
var s=jQuery(this).prop('id');
n.html('Select Picture: <br><input type="file" name="'+s+'" id="'+s+'" required>');
}
}
});
jQuery(":file").change(function() {
var na=jQuery(this).val();
alert(na);
});
});
</script>
now here is a form Example for that code:
<form>
<div><img src="image/source"><br>
<input type="checkbox" required value="1" name="product1">image is ok<br>
<input type="button" value="change image" id="product1" name="product1b"></div>
<input type="file" name="product2">
</form>
So when I click on button the form changes to this:
<form>
<div>
Select Picture: <br>
<input type="file" name="product1" id="product1" required>
</div>
<input type="file" name="product2">
</form>
the problem is that jQuery function jQuery(":file").change(function() { works for product2 but not for product1, because it was not there on page load and jQuery is not attached to it.
You have to use a delegated event when your elements are dynamic:
jQuery(document).on('change', ':file', function(){
// do stuff
});
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');
}
});
});