Below is my code for cloning the timepicker.
I have tried to remove hasDatepicker class on click and tried to call timepicker again but its not working. Below is my code
$(document).ready(function() {
var clone_index = 0;
console.log(max_value);
$("#add_period_break").click(function() {
$(".start_time").removeClass('hasDatepicker');
$('.start_time').timepicker({});
clone_index = clone_index + 1;
//$("#countform").val(clone_index);
console.log("add" + clone_index);
$(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));
$("#clone" + clone_index).css("display", "inline");
$("#clone" + clone_index + " :input").each(function() {
$(this).attr("name", $(this).attr("name") + clone_index);
$(this).attr("id", $(this).attr("id") + clone_index);
$("#countform").val(clone_index);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='clone'>
<div class="form-group">
<label for="exampleInputEmail1">Start Time</label>
<input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
</div>
</div>
<div id="box-footer">
<button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
You want to use jQuery timepicker
You don't need to remove hasDatepicker class, because its will never assigned to it.
Also there is a variable max_value which is not assigned. so please remove it.
Please check below code:
$(document).ready(function () {
var clone_index = 0;
$('.start_time').timepicker({});//For first time on page load
$("#add_period_break").click(function () {
clone_index = clone_index + 1;
$(this).parent().before($("#clone").clone().attr("id", "clone" + clone_index));
$("#clone" + clone_index).css("display", "inline");
$("#clone" + clone_index + " :input").each(function () {
$(this).attr("name", $(this).attr("name") + clone_index);
$(this).attr("id", $(this).attr("id") + clone_index);
$("#countform").val(clone_index);
});
$('.start_time').timepicker({});///to apply timepicker on newly added textbox
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js"></script>
<div id='clone'>
<div class="form-group">
<label for="exampleInputEmail1">Start Time</label>
<input type="text" name="start_time" id="start_time" class="form-control start_time" readonly="readonly" value="" placeholder="Start Time">
</div>
</div>
<div id="box-footer">
<button type="button" class="btn btn-success" name="add_period_break" id="add_period_break"><i class="glyphicon glyphicon-plus"></i> Add Periods/ Breaks</button>
<button type="submit" class="btn btn-primary"> Submit</button>
</div>
Related
I append HTML form with jquery append function but when I click on submit button it doesn't submit
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
$('.table tbody').append('<tr id="' + packageId + '"> <form class="" onsubmit="editPackage();return false;" method="post"><td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" ><i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></form></tr>');
});
This is what you probably want, instead of use <form> (which only execute function editPackage) in <tr> (and it is incorrect was what mentioned in Justinas comment ) you can execute editPackage after click on row-button and read data fro row in this way (i remove <form> from your append string and change <button>):
let id=0;
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
//console.log($('.table tbody'));
$('.table tbody').append('<tr id="' + packageId + '"> <td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" onclick="editPackage(this)">submit<i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></tr>');
});
function editPackage(btn) {
let tds =btn.parentNode.parentNode.children
let v1=tds[0].children[0].value;
let v2=tds[1].children[0].value;
let v3=tds[2].children[0].value;
console.log('submit', v1, v2, v3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addPackage">add</button>
<table class="table"><tbody></tbody><table>
I have made contact list app which displays contact details. By Default it shows 2 contact details.
In index.html I have made 2 functions called showContacts() and editContact(id).
I am dynamically populating div tags i.e editcontact & contactlist in index.html
When I click on edit button it should show 3 input elements to take input from user and one submit button I tried to implement it (see code below) but only search bar disappear's and only default contacts are shown which should not be shown and it should display editing form.
var array = [];
function Person(fullName, number, group) {
this.fullName = fullName;
this.number = number;
this.group = group;
array.push(this);
}
Person.prototype.getFullName = function() {
return this.fullName + ' ' + this.number + ' ' + this.group;
}
var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");
console.log(array);
document.getElementById("contactlist").innerHTML = '';
function showContacts() {
for (var i in array) {
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: ` + p1.fullName + `</p>
<p>Number: ` + p1.number + `</p>
<p>Group: ` + p1.group + `</p>
<button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
<input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
<input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}
<div class="header">
<div id="dropdown">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>All</li>
<li>Work</li>
<li>Family</li>
</ul>
</div>
</div>
<div class="title">
<h2>All Contacts</h2>
</div>
<div class="button" id="addButton">
<p>
<a href="#">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</p>
</div>
</div>
<div id="search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div id="contactlist">
</div>
<div id="editcontact">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
screenshots :
1) Before on click editContact :
2) After onclick editContact :
Live demo can be seen here :
https://jsfiddle.net/w2hoqmts/
A couple of things.
You made a typo with your contactlist in your html (should be contactList).
In your loop for showContacts you are setting id as index and should be like
function showContacts() {
for (var i in array) {
var id = array[i].number;
document.getElementById("contactList").innerHTML +=
'<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
'<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
'<button type="button" class="btn btn-danger">Delete</button>' +
'</div>';
}
}
Your editContact method is using the id as an index (as previous), which is wrong. You could do something like this instead (see code below). I filter the array with people based on the unique id provided from the link when you click edit.
function editContact(id) {
var obj = array.filter(function (ele) {
console.dir(ele);
if (ele.number === id) return ele;
});
console.dir(obj);
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
'<div>'+
'<input type="text" placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
'<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
'<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
'<button type="button" class="btn btn-success">Submit</button>'+
'</div>';
}
I've made a updated fiddle based on your own
https://jsfiddle.net/w2hoqmts/3/
Following changes should be made in editContact() and showContacts() function.
function showContacts(){
for(var i in array){
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: `+ p1.fullName +`</p>
<p>Number: `+ p1.number +`</p>
<p>Group: `+ p1.group +`</p>
<button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
<input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
<input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}
I have already gone through questions available on this topic and have tried everything, but still my keyup function is not working.
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group pollOption'><input class='form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
This code works perfectly for the two inputs already in the HTML part.
When I click on the "More Option" button the new field gets added but the "keyup" does not work on it. In fact, when I enter something on the new added inputs then my "More Option" & "Submit" button gets disabled (really do't know why this is happening).
You've to add the class pollOption to the input and not the div in your append :
$("#options").append("<div class='input-group'><input class='pollOption form-control' ...
_____________________________________________________________^^^^^^^^^^
Instead of :
$("#options").append("<div class='input-group pollOption'><input class='form-control' ...
______________________________________________^^^^^^^^^^
Demo:
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group'><input class='pollOption form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
$(this).attr('disabled','disaled');
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
I am trying to create an input field dynamically, using JQuery. It works up to a point but then absolutely stops working, no error in console and I am confused, please help.
I will attach a snippet alongside the code so you can better understand what's happening.
I can't define the problem because I don't fully understand what's happening, but I can try:
When I create a color I also want to create a size under that color, it works for the first color but doesn't work for other colors. What am I doing wrong?
$(document).ready(function() {
$("#add-color").click(function() {
$("#color-input-house")
.html($("#color-input-house")
.html() + '<div class="form-group">' +
'<input type="text" class="form-control colors" placeholder="Color">' +
' <button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>' +
' <button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>' +
' <div class="size-input-house"></div></div>');
});
$("#remove-color").click(function() {
if ($(".colors").length !== 1) {
$(".add-size").last().remove();
$(".remove-size").last().remove();
$(".colors").last().remove();
}
});
$(".add-size").click(function() {
$(this)
.parent()
.find(".size-input-house")
.html($(".size-input-house")
.html() + '<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
$(".remove-size").click(function() {
if ($(".sizes").length !== 1) {
$(".sizes").last().remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<input type="text" class="form-control colors" placeholder="Color">
<button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>
<button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>
<div class="size-input-house"></div>
</div>
<div id="color-input-house"></div>
<div class="form-group">
<div>
<button type="button" id="add-color" class="small btn btn-primary rounded form-control">Add Color</button>
<button type="button" id="remove-color" class="btn btn-warning rounded form-control">Remove Color</button>
</div>
</div>
when you add something with jquery and you want to apply click on them it is better to use following format in jquery:
$(document).on("click",".add-size",function(){
$(this)
.parent()
.find(".size-input-house")
.html($(".size-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
and the same way for another:
$(document).on("click",".remove-size",function(){
if($(".sizes").length !== 1){
$(".sizes").last().remove();
}
});
Here is the solution and a working code:
$(document).on("click","#add-color",function(){
$("#color-input-house")
.html($("#color-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control colors" placeholder="Color">' +
' <button type="button" class="add-size small btn btn-primary rounded form-control">Add Size</button>' +
' <button type="button" class="remove-size small btn btn-warning rounded form-control">Remove Size</button>' +
' <div class="size-input-house"></div></div>');
});
$(document).on("click","#remove-color",function(){
if($(".colors").length !== 1){
$(".add-size").last().remove();
$(".remove-size").last().remove();
$(".colors").last().remove();
}
});
$(document).on("click",".add-size",function(){
$(this)
.parent()
.find(".size-input-house")
.html($(this)
.parent()
.find(".size-input-house")
.html()+'<div class="form-group">' +
'<input type="text" class="form-control sizes" placeholder="Size"></div>');
});
$(document).on("click",".remove-size",function(){
if($(".sizes").length !== 1){
$(".sizes").last().remove();
}
});
Notice the $(document).on("click","#add-color",function(){ changes throughout the code. Thanks to the genius who gave an answer above.
I have problem with autocomplete on my dynamically generated divs
File 1 - Javascript file which on button click generate div with input fields
var inputHTML = '<div id="addProducts" class="col-md-2 form-group"><input type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID"><input type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required><input type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required><input type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required><input type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT"><input type="number" step="0.01" min="0" class="form-control price" placeholder="Cena za sztukę" name="tyrePricePiece[]" id="tyrePricePiece" required><button href="#" class="btn btn-danger btn-block remove_field"><span class="glyphicon glyphicon-remove"></span> Usuń</button><button type="button" class="btn btn-warning btn-block" id="clone"><span class="glyphicon glyphicon-duplicate"></span> Kopiuj</button></div>';
var inputHTML2 = '<div id="addProducts2" class="col-md-2 form-group"><input type="text" class="form-control" placeholder="Identyfikator felg" name="alloyID[]" id="alloyID"><input type="text" class="alloySize form-control" placeholder="Rozmiar" name="alloySize[]" id="alloySize" required><input type="text" class="alloyManufacturer form-control" placeholder="Producent" name="alloyManufacturer[]" id="alloyManufacturer" required><input type="text" class="alloyPCD form-control" placeholder="Rozstaw" name="alloyPCD[]" id="alloyPCD" required><input type="text" class="form-control" placeholder="Otwór centrujący" name="alloyHub[]" id="alloyHub"><input type="number" step="0.01" min="0" class="form-control price" placeholder="Cena za komplet" name="alloyPricePiece[]" id="alloyPricePiece" required><button href="#" class="btn btn-danger btn-block remove_field"><i class="fa fa-times"></i> Usuń</button><button type="button" class="btn btn-warning btn-block" id="clone"><span class="glyphicon glyphicon-duplicate"></span> Kopiuj</button></div>';
var addInput = function() {
$(inputHTML).appendTo('div#products');
};
var addInput2 = function() {
$(inputHTML2).appendTo('div#products');
};
var cloneInput = function() {
$(this).appendTo('div#products');
}
$('button#btnAddProduct').click(addInput);
$('button#btnAddProduct2').click(addInput2);
$(document).on('click', '.remove_field', function(e) { //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(0);
sumPrice();
});
$(cloneInput).on('click', '#clone', function(e) {
e.preventDefault();
$(this).parent('#addProducts').each(function() {
$(this).clone().appendTo('div#products').val($(this).val());
});
sumPrice();
});
$(cloneInput).on('click', '#clone', function(e) {
e.preventDefault();
$(this).parent('#addProducts2').each(function() {
$(this).clone().appendTo('div#products').val($(this).val());
});
sumPrice();
});
File 2 - Javascript file which makes autocomplete working
var ac_config2 = {
source: "../../libs/orders/autocomplete_products.php",
select: function(event, ui){
$("#tyreID").val(ui.item.id_product);
$("#tyreSize").val(ui.item.Szerokosc+"/"+ui.item.Profil+"R"+ui.item.Srednica);
$("#tyreManufacturer").val(ui.item.Producent);
$("#tyreTread").val(ui.item.Model);
$("#tyreDOT").val(ui.item.DOT);
//$("#tyrePricePiece").val(ui.item.client_name);
},
minLength: 1
};
$("#tyreID").autocomplete(ac_config2);
If I add productbox to html file autocomplete works great, but at dynamically generated div it not works at all.
How can i reload this autocomplete file on each div add? Or there is another way of this?
Still got problem with 1 thing. If I setup it to #div id it copies values always to first div, if to .div class it copies values to all divs.
#Justas?