I'm facing a problem with my project. My user can create a new div by clicking a button, but he can remove whatever div he wants, expect the first one. So if he create 2 new divs here is what the code will look like:
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container2">
<input type="text" id="title2"><br />
<input type="text" id="description2">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
If the user remove the second div my code will look like this.
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
Pretty simple. Now I want to use the information entered by the user in the text inputs, but I don't know how to select the active divs. Is there a way to select the container1 and container3 in the example above?
Keep in mind that the user can use up to 99 new div.
Your help is appreciated. Thank you,
Just apply a CSS selector:
<div id="parent">
<div id="container1">
<input type="text" id="title"><br />
<input type="text" id="description">
</div>
<div id="container3">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
</div>
$('#parent > div')
See here for more information: https://api.jquery.com/category/selectors/
You can add a class to each item. You would need to amend your code that is called when the button is clicked to handle this.
Let's say you gave all titles a class of "myTitle" and you gave all descriptions a class of "myDescription". Your div created would look something like this:
<div id="container1">
<input type="text" id="title" class="myTitle">
<br />
<input type="text" id="description" class="myDescription">
</div>
Now, in order to get all titles and descriptions you'd use jQuery and say:
$('.myTitle').each(function () {
console.log($(this).val());
});
$('.myDescription').each(function () {
console.log($(this).val());
});
First of all, you have multiple divs with the id "title" and "description", so change those to class. You can select the nth div with jquery: $("#container" + n)
you can select the title of the nth div: `$("#container" + n).children(".title");
you can select all of the divs by adding a class to them, such as .container
Related
I have built a form where you can add a person by clicking a button. Now, I want to add a new button to delete the latest added person. My current code only deletes one person, and after that, I can't add another person again. Do someone know what's wrong?
$(document).ready(function(){
$("#button1").click(function(){
$(".flex-container-name-adult").append($(".test1").html());
});
});
$(document).ready(function(){
$("#button3").click(function(){
$(".test1").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>
When you click the add person button you are appending the html of test1 to the element with class flex-container-name-adult. That html don't include the div with test1 class itself. Now, when you click the delete person button you are deleting all the elements with the class test1. So, after that action, there will be no more elements with class test1 on the document that you can later use on the add person button.
I suggest to use .clone() for what you want to do, and to always delete the last added person. Something like this:
$(document).ready(function()
{
$("#button1").click(function()
{
// Clone the first ".test1" element and append it to the wrapper.
$(".flex-container-name-adult").append($(".test1").first().clone());
});
$("#button3").click(function()
{
// Delete last ".test1" element, if exists more than one.
let tests = $(".test1");
if (tests.length > 1)
tests.last().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-container-name-adult">
<button id="button1">Add person</button>
<button id="button3">Delete person</button>
<div class="test1">
<div class="flex-wrapper-name-adult">
<span class="adult">Person</span><br>
<input type="text" class="input" placeholder="Name" name="name" required>
<input type="text" class="input" placeholder="Nachname" name="nachname" required>
<input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
</div>
</div>
</div>
I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>
This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>
On click of checkbox I want to hide one last input field. I have tried prev and closest but it is not working. There are few other set of same kind of input fields so I just want to target on last input field. So on click of this checkbox I want to hide last input field job_to_date[]. Below is my code.
jQuery('input[name^="currently_work_here"]').change(function() {
if (jQuery(this).is(":checked")) {
jQuery(this).prev('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
Based on your revised HTML you need to use .parent().prev().find('.job_to_date') to locate the element you want to remove:
jQuery('input[name^="currently_work_here"]').change(function() {
if(jQuery(this).is(":checked")) {
jQuery(this).parent().prev().find('.job_to_date').remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
<input type="text" name="job_from_date[]" value="" placeholder="From" class="job_from_date">
</div>
<div class="col-sm-6">
<input type="text" name="job_to_date[]" value="" placeholder="To" class="job_to_date">
</div>
<div class="col-sm-12">
<input type="checkbox" name="currently_work_here[]" class="resume_builder_input input_checkbox"> I currently work here
</div>
.prev() alone won't work based on your structure. You need to go up a level via .parent(), then to the previous div with .prev(), finally finding the one to remove with .find('.job_to_date')
So I've been working on a code that would try to pre-fill some disabled inputs with a keyup() function from another enabled input that are all enclosed in one div element. What happens is that upon key release, it tries to change the value of the disabled inputs from that specific row of divs. Here's what I currently have on my code
<div class="container-fluid" id="clonegrp">
<div class="row grpit">
<div class="col-md-7">
<input type="text" name="it[]" class="form-control" id="item" placeholder="Chemical/Equipment*" required="true">
</div>
<div class="col-md-2">
<input type="text" name="amount[]" class="form-control" placeholder="Amount*" required="true">
</div>
/<div class="col-md-1">
<input type="text" class="form-control" id="max" placeholder="Max" readonly="readonly">
</div>
<div class="col-md-1">
<input type="text" class="form-control" id="unit" placeholder="Unit" readonly="readonly">
</div>
</div>
so this group of inputs can be cloned by some button and through this JQuery code
var $button2=$('#add-item'),
$row2=$('.grpit').clone(),
$try2=$('#clonegrp');
$button2.click(function() {
$row2.clone().appendTo($try2);
});
the problem lies at the part where I try to do the live keyup function
$(document).ready(function() {
$('#clonegrp').on('keyup','#item', function() {
$('#max').val('some text');
});
});
I know that this is wrong since the id part would mess up which of the cloned inputs with the #max id gets to change the input. I can't seem to figure out how to get the #max sibling of the currently focused #item input. How do I do that?
I've managed to get my adding a clone button working but im now having trouble with getting the delete button to work. Wondering if people can see the problem im guessing im totally wrong.
This is the code in jsfiddle
http://jsfiddle.net/AFfa2/
<div class="question">
<div class="questiontext">
20. Details of Children
</div>
<div id="question20">
<div class="questiontitles">
Family Name<br>
Given Names<br>
Sex<br>
Date of Birth<br>
Country of Birth
</div>
<div class="questionanswer">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
</div>
</div>
</div>
<div id="Child" class="question">
<div id="addChild" class="questiontitles">
<input type="button" value="Add Child Info">
</div>
<div id="deleteChild" class="questionanswers">
<input type="button" value="Delete Child Info">
</div>
</div>
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$("#deleteChild").click(function() {
if(childId > 0) childId--;
$("#child"+childId).slideUp();
if ($("#deleteChild").css("display") == "none") $("#deleteChild").slideUp();
});
Try this Answer
$("#addChild").click(function () {
var newElement = $('<div id="childdiv"/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
childId++;
});
$("#deleteChild").click(function () {
var div = document.getElementById('childdiv');
if (div) {
div.parentNode.removeChild(div);
}
});
$("#addChild").click(function(){
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function() {
if($(".question20").length!=1)
$(".question20:last").remove();
});
<div class="question20"> //and the div got class instead of id since cloning the div with same id is not good
http://jsfiddle.net/AFfa2/4/
DEMO
updated code posted by rps
as it deletes all the div elements. Modified it not delete the original form element.
$("#addChild").click(function () {
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function () {
if ($('.question20').length > 1) {
$(".question20:last").remove();
}
});
Try this jsfiddle
<div id="question20" class="input">
<div id="question20">20. Details of Children
<br>Family Name
<input type="text" name="children" class="textbox">
<br>Given Names
<input type="text" name="children" class="textbox">
<br>Sex
<input type="text" name="children" class="textbox">
<br>Date of Birth
<input type="text" name="children" class="textbox">
<br>Country of Birth
<input type="text" name="children" class="textbox">
<br>
</div>
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
</div>
<div id="addChild" class="input">
<input type="button" value="Add Child Info">
</div>
jQuery code
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$('#removeChild').click(function(){
$(this).parent().remove();
});
This might work
$("#deleteChild").click(function() {
$('#question20').parent().children('.input:last').remove();
});
http://jsfiddle.net/HLpJP/
You've got issues around where your inserting the new rows however. Your inserting new rows after question20, these will appear before existing ones. The remove method will remove the last one so might not be the behaviour you want.
Here is jsfiddle link : http://jsfiddle.net/AFfa2/5/
add remove button
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
and jquery
$("#removeChild").click(function(){
$('div.input').get($(this).length).remove();
});
you need to change buttons div classes