get child id from parent javascript onclick - javascript

I have the script bellow and i want to get the id of the child removed
<div class="right respleft">
<div class="section-title" id="divin">Ajout d'un champ</div>
<form class="tiny_form" id="form-step2">
<input type="text" id="fiel" placeholder="Nom du champ" /><br/>
<select class="form-control" id="champs">
</select>
<i class="fa fa-plus"></i><br/>
<div id="extender"></div>
</form>
</div>
<div class="sep seppage"></div>
<div class="clear"></div>
<div id="bottom-submit" class="inner clear">
<input type="submit" class="page-next center btn btn-lg btn-default" value="Créer" />
</div>
{% endblock %}
{% block javascripts %}
<script>
//add input
$('a#add_btn').click(function () {
var x = document.getElementById("fiel");
var selected= x.value;
var c = document.getElementById("champs");
// var option = document.createElement("option");
var strUser = document.getElementById("champs").value;
var valChamps=document.getElementById("fiel").value;
$('<p><input type="text" class="highlight_orange" name="items[]" id="' + strUser+ '" value="' + valChamps+ '" />' +
'<a class="delete" href="#step2" id="' + strUser + '"><i class="fa fa-trash-o"></i></a></p>').fadeIn("slow").appendTo('#extender');
c.remove(c.selectedIndex);
i++;
return false;
});
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
var item = $(this).closest('input');
var id = item.attr('id');
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
function addList(){
var select = document.getElementById("champs");
for(var i = 100; i > 0; --i) {
var option = document.createElement('option');
option.text = 'champ libre '+i;
option.value =i;
select.add(option, 0);
}
}
addList();
</script>
my problems is how to get the id of the removed input text after clicking on remove button.
this is picture of the output
output
Thanks for your helps

You can use siblings method to get the id of input element
//fadeout selected item and remove
$("#form-step2").on('click', '.dynamic-link', function () {
var myId = $(this).siblings('input[type=text]').attr('id');
alert(myId)
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});

You can use getAttribute() function:
// your stuff
var myId = c.getAttribute("id");
c.remove(c.selectedIndex);
// more stuff
EDIT
Maybe you need it here:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).attr('id');
$(this).empty();
return false;
});
});
Be more specific please
EDIT2
That's the solution:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).find('input[type=text]').attr('id');
$(this).empty();
return false;
});
});
See it working: http://jsfiddle.net/vWPJf/57/

Related

How to make dynamic non-repeatable select

I have try to create Dynamic Input group
My expected is
dynamic selection box[length in config var parameter] with...
Non-duplicate select option --> I check when click ,remove and append
Can click to add/remove input group
limited by var parameter
So now My actual result is
not hide will be select option in new select of previous select on append
delete select can't check the repeating after remove
But After i click some where will back to normal as i expect a little because item what i click still no update
So here for long code
Thank for viewing
var parameter =[
"A"
,"B"
,"C"
,"D"
];
$(document).ready(function(e){
$('div.multiselect').append('<div class="selectlist"></div>');
$('div.multiselect').append('<button class="btn btn-outline-light addlist">add search parameter</button>');
$('div.multiselect').append('<button class="btn btn-success search">search</button>');
addSelect();//Create first
$('div.multiselect .addlist').click(function(){
addSelect();
});
});
(function($) {
var origAppend = $.fn.append;
$.fn.append = function () {
return origAppend.apply(this, arguments).trigger("append");
};
})(jQuery);
var selectblock = function (){
var outside = $(document.createElement("div")).addClass('input-group');
var inside = $(document.createElement("select")).addClass('custom-select').on("click append",checkRepeat);
var selVal=[];
$("div.multiselect .selectlist div.input-group").each(function(){
selVal.push($(this).find("select").val());
});
if(selVal.length == parameter.length){
alert("Can't add more parameter");
return;
}
for (var i =0 ; i < parameter.length ; i++){
var option = $(document.createElement("option")).val(parameter[i]).text(parameter[i]);
if($.inArray(parameter[i], selVal) > -1){
option.attr("disabled","disabled").hide();
}
inside.append(option);
}
outside.append(inside);
outside.append($(document.createElement("input")).attr('Type','Text').addClass('form-control'));
var delbtn = $(document.createElement("button")).text("X").addClass('btn btn-danger input-group-append dellist');
delbtn.click(function(){
$(this).parent().remove();
checkRepeat;
});
outside.append(delbtn);
return outside;
};
function addSelect(){
$('div.multiselect .selectlist').append(selectblock);
checkRepeat;
}
var checkRepeat = function (){
//console.log('trigger');
var selVal=[];
$("div.multiselect .selectlist div.input-group").each(function(){
selVal.push($(this).find("select").val());
});
$(this).parent().siblings("div.multiselect .selectlist div.input-group").find("select").find("option").removeAttr("disabled").show().filter(function(){
var a=$(this).parent("select").val();
return (($.inArray(this.value, selVal) > -1) && (this.value!=a));
}).attr("disabled","disabled").hide();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiselect">

Jquery for dynamic content

I have a paragraph with some words written in span, which is editable once you click on it.The content would be dynamically called so my current approach is not working. Can you suggest me a solution or a better way to do it?
Here is the fiddle: http://jsfiddle.net/9dq2p7dw/109/
Thanks :)
<h4>Currently working in <span class="editor">xyz*</span><span style=
"display:none;" class="edit"><input type="text" class="form-control input-
sm" id="edited" style="width:100px;z-index: 100;background: white;display:
inline;"></span><button type="submit" id="submit" class="edit"
style="display: none;">save</button>
for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>
and here is the jquery for it.
$(document).ready(function(){
$('.bizcontent').click(function(){
$('#myModal2').modal('toggle');
});
$(".editor").click(function(){
$(".edit").show();
$(".editor").hide();
var edit = $("#edited").val();
});
$("#submit").click(function(){
var edit = $("#edited").val();
var ans = confirm("Update your input as "+ edit + " ?");
if (ans== true) {
$(".edit").hide();
$(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
$(".editor").show();
}
else{
$(".editor").show();
$(".edit").hide();
}
});
});
I would solve it in the following manner.
$(document).ready(function() {
// how the input and the text should be displayed
// {{text}} is replaced with the text
var template = {
input: '<edit><input type="text" class="form-control input-sm" style="width:100px;display:inline;" value="{{text}}" orig="{{text}}"/><button type="submit" class="edit">save</button></span>',
text: '<span>{{text}}</edit>'
}
// for when you click on the span
$("#theText").on('click', 'span', function() {
var span = $(this)
span.replaceWith(template.input.replace(/{{text}}/g, span.text()))
})
// when you click the button
$("#theText").on('click', 'button', function() {
var edit = $(this).parent()
var newValue = edit.find('input').val()
var origValue = edit.find('input').attr('orig')
var value = confirm("Update your input as " + newValue + " ?") ? newValue : origValue
edit.replaceWith(template.text.replace(/{{text}}/g, value))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="theText">Currently working in
<span>xyz*</span>for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span>
</h4>
your problem is solved u can see in snippet.
$(document).ready(function() {
$('.bizcontent').click(function() {
$('#myModal2').modal('toggle');
});
$(document).on('click', '.editor', function() {
$(".edit").show();
$(".editor").hide();
var edit = $("#edited").val();
});
$('#submit').on('click', function() {
var edit = $("#edited").val();
var ans = confirm("Update your input as " + edit + " ?");
if (ans == true) {
$(".edit").hide();
$(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
$(".editor").show();
} else {
$(".editor").show();
$(".edit").hide();
}
});
});
.hide {
display: none;
}
.show {
display: block
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Currently working in <span class="editor">xyz*</span><span style= "display:none;" class="edit"><input type="text" class="form-control input-sm" id="edited" style="width:100px;z-index: 100;background: white;display: inline;"></span><button type="submit" id="submit" class="edit" style="display: none;">save</button>
for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>
Your problem was that .editor once clicked and edited, was later not clickable, right?
The solution for that is:
$("body").on('click', '.editor', function(){
$(".edit").show();
alert("hi");
$(".editor").hide();
var edit = $("#edited").val();
});
Note: $("body").on('click', '.editor', ....);

jQuery: Duplicating file input groups

I'm trying to use jQuery to duplicate my file input groups, so that when the user selects a file to upload, it automatially creates another file upload field and description field.
This works fine, except for when I change the file of a file I've already selected an input for. When I do that, it duplicates ALL the file input groups.
Any insight into why this is going on?
JSFiddle: http://jsfiddle.net/czLmbjd6/4/
HTML:
<div id = "add-photos">
<input type="file"></input>
<label>Description:</label>
<input type = "text"></input>
</div>
<div id = "additional-photos">
</div>
JS:
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
addPhotoField();
});
}
function addPhotoField() {
var id = 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id){
var p = $("#add-photos");
p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
});
bindFileInputs();
}
Try
$(document).ready(function() {
bindFileInputs($('#add-photos input[type="file"]'));
});
function bindFileInputs(input) {
//use one() to register a handler which will be fired only once
input.one('change', function() {
addPhotoField();
});
}
function addPhotoField() {
var id = 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id) {
var p = $("#add-photos");
var $clone = p.clone().appendTo("#additional-photos").removeAttr("id");
$clone.find('input,select').val('');
$clone.find('input:text').attr('name', 'data[Image][' + id + '][description]');
var $file = $clone.find('input:file').attr('name', 'data[Image][' + id + '][image]');
bindFileInputs($file)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Select a file with the file upload control. It should create a new file input group.
<div id="add-photos">
<input type="file" />
<label>Description:</label>
<input type="text" />
</div>
<div id="additional-photos"></div>
Try this Js:
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
if($('.newF').length ==0 ){
createPhotoField(Number($(this).attr('id'))+1);
}
if($(this).hasClass('newF')){
createPhotoField(Number($(this).attr('id'))+1);
}
});
}
function createPhotoField(id){
$('.newF').removeClass('newF')
id+=1;
var p = $("<div/>");
p.appendTo("#additional-photos");
p.html('<input class="newF" id= "'+id+'" type="file"></input><label>Description:</label><input type = "text"></input>')
p.children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
})
bindFileInputs();
}
UPDATED FIDDLE:
http://jsfiddle.net/czLmbjd6/12/
See your call of bindFileInputs(); in createPhotoField. You are adding another handler to change event of all $("input:file") elements in your page. If you change the file in any of these elements (except the last one), addPhotoField will fire two or more times.
Do:
var newItem = p.clone();
newItem.appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
...
});
// instead of bindFileInputs();
newItem.find("input:file").change(function (){
addPhotoField();
});
Well try this
<div id = "add-photos">
<input type="file" inuse="false"></input>
<label>Description:</label>
<input type = "text"></input>
</div>
<div id = "additional-photos">
</div>
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
if($(this).attr('inuse') == "false"){
addPhotoField();
}
$(this).attr('inuse', 'true');
});
}
var id = 0;
function addPhotoField() {
id += 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id){
$("#add-photos").find('input:file').attr('inuse', 'false');
var p = $("#add-photos");
p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
$(this).attr('inuse', 'false');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
});
$("#add-photos").find('input:file').attr('inuse', 'true');
bindFileInputs();
}

dynamically create items in drop down list in bootstrap

Small part of my html code :
<div class="text-center">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Platforms <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id = "buttonsPlace">
</ul>
</div>
In my js file :
for (i = 0; i < platformList.length; i++) {
var li = $("<li/>" , { id : "plat"+i,class : "dropdown" text : platformList[i] } )
//var text = document.createTextNode(platformList[i]);
//li.appendChild(text);
//btn.data("platform", platformList[i] );
$("#buttonsPlace").append(li);
console.log("hiding");
$("#plat" + i).hide();
}
However the menu is appearing but the menu items are not. where am i going wrong
Try This
$(function() {
var change = function( txt ) {
$("#ID").append( '<li>' + txt + '</li>' );
};
change("this is the first change");
change("this is the second change");
});
Demo
For Li Click
$("ul").on('click', 'li', function () {
var id = this.id;
//play with the id
});
$(function(){
$('.dropdown-toggle').click(function(){
var countRows = $('ul.dropdown-menu li').size();
$('.dropdown-menu').append('<li>Row '+countRows+'</li>');
countRows++;
});
});
Here is the jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/
$('#drowdown-link1').click(function(e){
e.preventDefault();
window.location.href = 'http://example.com';
});
Here is another jsfiddle for you http://jsfiddle.net/alexchizhov/ncgXK/4/

Trying to appending list items to dynamic id's

Hi I'm trying to add "children" list items to "family" lists. I have a first form to create the families and a second form which is a select box to create the children and add them to a selected family from the select box. The Ol's ids are dynamically created and the drop down's options dynamically created.
When an option is created, the values are incremented every time a family and option is made.
My plan is to reference the OL families by using the options, basically corresponding to the family by the time it is created.
For example when I make a family1, there will be an option created with that family1 with a value 1, and when family2 is created, an option 2 is created with a value of 2.
I'm trying to append children to the family but I have no idea how to reference the OL's ids
this is what I have so far
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var i = 1;
$(document).on('click', "#submit", function () {
var str = ' '
var family = document.getElementById('famname').value;
$('#family input[type = text],input[type = text],input[type = text],input[type = text]').each(function () {
str = str + $(this).val() + ' ';
$(this).val('');
});
$("<ol>", {
text: str,
id: "family+" + i
}).appendTo("#container").append($('<button />', {
'class': 'btn2',
text: 'Remove'
}));
$('#select').append($('<option />', {
text: family,
value: i
}));
i++;
});
// Append items functions
$(document).on('click', "#submit2", function () {
var child = prompt("Please enter the child you want to add");
var e = document.getElementById("select");
var str = e.options[e.selectedIndex].value;
$('<li>', {
text: child
}).appendTo( ? ? ? ).append($('<button />', {
'class': 'btn',
text: 'Remove'
}))
});
//delete items functions
$(document).on('click', '.btn', function () {
$(this).closest('li').remove();
});
// delete the list
$(document).on('click', '.btn2', function () {
$(this).parent().next().remove();
$(this).closest('ol').remove();
});
});
</script>
</head>
<body>
<form id ="family" method = "post" target="_parent">
Enter Family Name <input type = "text" name = "famname" id = "famname" > <br>
Enter Address <input type = "text" name = "address"> <br>
Enter Father's name <input type = "text" name = "dad"> <br>
Enter Mother's name<input type = "text" name = "mom"> <br>
<input id="submit" type="button" value="Submit" name="submit">
</form>
<p>Select Which family you want to add a child to</p>
<form id = "child">
<select id ="select">
</select>
<input id="submit2" type="button" value="Submit" name="submit">
</form>
<div id = "container">
</div>
</body>
</html>
Tip and help are appreciated
http://jsfiddle.net/Jnewguy/4LVTz/
Try
$(document).ready(function () {
var i = 1;
var $famname = $('#famname');
var $finputs = $('#family input[type = text]').not('#famname');
$(document).on('click', "#submit", function () {
var family = $famname.val();
var $ol = $("<ol>", {
id: "family-" + i
}).appendTo("#container");
$('<li />', {
text: family
}).append($('<button />', {
'class': 'btn2',
text: 'Remove'
})).appendTo($ol);
$finputs.each(function () {
$('<li />', {
text: this.value
}).appendTo($ol);
$(this).val('');
});
$('#select').append($('<option />', {
text: family,
value: i
}));
i++;
});
// Append items functions
var $select = $('#select')
$(document).on('click', "#submit2", function () {
var child = prompt("Please enter the child you want to add");
$('<li>', {
text: child
}).appendTo('#family-' + $select.val()).append($('<button />', {
'class': 'btn',
text: 'Remove'
}))
});
//delete items functions
$(document).on('click', '.btn', function () {
$(this).closest('li').remove();
});
// delete the list
$(document).on('click', '.btn2', function () {
$(this).parent().next().remove();
$(this).closest('ol').remove();
});
});
Demo: Fiddle

Categories

Resources