Add product information to cart - javascript

I have a cart function that adds items to it, but I cannot get it to add the details of that item. Right now it just pulls generic data I would like it to get the product title, location and dates. I know there is a way to get to the text of the HTML, but don't know how to add it to this script. Here is the HTML mark up:
var cartOpen = false;
var numberOfProducts = 0;
$('body').on('click', '.js-toggle-cart', toggleCart);
$('body').on('click', '.js-add-product', addProduct);
$('body').on('click', '.js-remove-product', removeProduct);
function toggleCart(e) {
e.preventDefault();
if (cartOpen) {
closeCart();
return;
}
openCart();
}
function openCart() {
cartOpen = true;
$('body').addClass('open');
}
function closeCart() {
cartOpen = false;
$('body').removeClass('open');
}
function addProduct(e) {
e.preventDefault();
openCart();
$('.js-cart-empty').addClass('hide');
var product = $('.js-cart-product-template').html();
$('.js-cart-products').prepend(product);
numberOfProducts++;
}
function removeProduct(e) {
e.preventDefault();
numberOfProducts--;
$(this).closest('.js-cart-product').hide(250);
if (numberOfProducts == 0) {
$('.js-cart-empty').removeClass('hide');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="cards-item">
<figure class="card product">
<div class="card-image card-image-2lc"></div>
<figcaption class="card-content">
<h1 class="card-title">McElroy</h1>
<h2 class="card-title product__title">2LC Fusion Machine 1/2" CTS - 2" IPS Pipe</h2>
<p class="card-text">The 2LC employs a semi-automatic locking cam (LC) system to maintain force during the cooling cycle. It incorporates McElroy's patented Centerline Guidance System and is designed to butt fuse tees, ells and other fittings.</p>
<form action="" method="">
<fieldset class="product">
<div class="formrow">
<div class="formitem col1">
<label class="label req" for="pu-2lc">Pick Up Date</label>
<input type="date" name="pu-2lc" id="pu-2lc/>
</div>
</div>
<div class=" formrow ">
<div class="formitem col1 ">
<label class="label req " for="rd-2lc ">Return Date</label>
<input type="date " name="rd-2lc " id="rd-2lc "/>
</div>
</div>
<div class="formrow ">
<div class="formitem col1of2 ">
<label class="label " for="country ">Country</label>
<select name="country " id="country " x-autocompletetype="country-name ">
<option selected="selected ">please choose</option>
<option value="bkf ">Bakersfield</option>
<option value="ch ">Chico</option>
<option value="fsn ">Fresno</option>
<option value="hyw ">Hayward</option>
<option value="mtc ">Manteca</option>
<option value="oak ">Oakley</option>
<option value="rwc ">Redwood City</option>
<option value="sac ">Sacramento</option>
<option value="sal ">Salinas</option>
<option value="sj ">San Jose</option>
<option value="sjf ">San Jose Fusion</option>
<option value="sr ">Santa Rosa</option>
</select>
</div>
</div>
</fieldset>
<div class="buttons ">
<div class="back ">
<button class="primary button js-add-product " title="Add to cart " >Add to Cart</button>
</div>
</div>
</form>
</figcaption>
</figure>
</article>
<aside class="cart js-cart ">
<div class="cart__header ">
<h1 class="cart__title ">Shopping cart</h1>
<p class="cart__text ">
<a class="button button--light js-toggle-cart " href="# " title="Close cart ">
Close cart
</a>
</p>
</div>
<div class="cart__products js-cart-products ">
<p class="cart__empty js-cart-empty ">
Add a product to your cart
</p>
<div class="cart__product js-cart-product-template ">
<article class="js-cart-product ">
<h1>Product title</h1>
<p>Pick up Date</p>
<p>Return Date</p>
<p>Location</p>
<p>
<a class="js-remove-product " href="# " title="Delete product ">
Delete product
</a>
</p>
</article>
</div>
</div>
<div class="cart__footer ">
<p class="cart__text ">
<a class="button " href="# " title="Buy products ">
Buy products
</a>
</p>
</div>
</aside>
Thanks for any help.

This will select the text of the product__title
$('.product__title').text()
This will get the country option selected text and value
$('#country option:selected').val()
$('#country option:selected').text()
This will get your dates
$('#pu-2lc').val()
Once you have the text, you can place it where you want. Just looking over the code it looks like you would want to grab these values within the
addProduct() method. Please let me know if that is what you are looking for. I can provide more insight if we had the code for the cart its self.

Related

get the selected item added dynamically jquery

I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.

How to fetch selected image in the next page?

I have dropdown option to get image and on selecting option image shows up. I want to get same image in next page. How can I achieve that?
index.php
<div class="col-md-2" style="color: #000; font-family:Titillium Web">
<span style="color: #fff"> Pickup Location * </span>
<select class='selectpicker1' id='colorselector' name='pickup_loc'>
<option value=''></option>
<option value='Building1'>Building1</option>
<option value='Building2'>Building2</option>
</select>
</div>
<div class="col-md-2 text-center">
<br> <input type="text" id="pwr1" class="required p-control" name="pickup_ward" />
</div>
<div class="col-md-2" style="color: #000; font-family:Titillium Web ">
<span style="color: #fff"> Drop Location *</span>
<select class='selectpicker2' id='dropselector' name='drop_loc'>
<option value=''></option>
<option value='Floor1'>Floor1</option>
<option value='Floor2'>Floor2</option>
</select>
</div>
<div class="container colorselector show-image output">
<div id="Building1" class="colors Building2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWb3sciAdSaUG1Up0xz9facEB2bWr_OPZG6jNzHaQKcmwDBTB2iA" style="width: 100%" class="img-responsive" />
</div>
<div id="Building2" class="colors Building2">
<img src="https://cdn.vox-cdn.com/thumbor/MJguYcgKkDes6NzbE8Y0OgdyF64=/0x0:1500x974/1200x800/filters:focal(630x367:870x607)/cdn.vox-cdn.com/uploads/chorus_image/image/56258041/2401_Third_Ave.0.jpg" style="width: 100%" class="img-responsive" />
</div>
</div>
<div class="container dropselector show-image output">
<div id="Floor1" class="colors Floor1">
<img src="https://images.mydoorsign.com/img/lg/S/1-floor-number-braille-sign-se-6089.png" style="width: 100%" class="img-responsive" />
</div>
<div id="Floor2" class="colors Floor2">
<img src="https://images.mydoorsign.com/img/lg/S/2-floor-number-braille-sign-se-6090.png" style="width: 100%" class="img-responsive" />
</div>
</div>
$('#colorselector, #dropselector').change(function() {
var select = $(this);
$('.' + select.attr("id") + ' .colors').hide();
$('#' + select.val()).show();
});
I want to get the selected image in the next page.
In JavaScript, you can use session storage to achieve this.
On first page set the image URL with a desired unique key.
sessionStorage.setItem("myImage", "some url");
Then on the next page, retrieve the image:
sessionStorage.getItem("myImage");

How can I isolate a dropdown area from another dropdown area

I have two dropdown selections where when you click on the option with value "other", it generates a text area just below the dropdown form.
Both areas work fine but to do so I had to create separate parent wrappers for both and I don't want that because I will be dynamically adding more dropdowns and it will be hard to dynamically make more unique parent wrapper divs.
I want each dropdown to be different from each other with their own textboxes generated.
I have made the entire code available in this pen
Code for your reference
HTML
<section id="alterationForm1">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
</section><!--alteration form-->
<div data-duplicate="demo" class="demoClass">
<div class="card">
<div class="imgCard">
<img src="http://abhisheksuresh.online/alter/assets/uploadImage.svg" alt="upload-image" height="128px" width="128px">
<span class="badge badge-success" style="z-index: 1; position: absolute;" data-toggle="tooltip" data-placement="left" title="Tap on the image to upload picture of your defected garment"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
</div>
<!--Dropdown List-->
<div class="form-group">
<label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
<select class="form-control alterationTypeSelect" name="alterationTypeSelect">
<option value="button">Button</option>
<option value="stitching">Stitching</option>
<option value="cloth">Cloth</option>
<option value="fabrics">Fabrics</option>
<option value="otherClick">Other</option>
</select>
</div>
<div class="hideMe textBoxDiv">
<div class="form-group">
<label for="exampleFormControlTextarea1">Additional alteration details</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</div><!--text box div-->
<div class="submitButton text-center">
Submit
</div><!--submitButton-->
</div><!--card-->
<div id="addOnButton" class="text-center">
<button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
</div>
</div><!--demo class-->
JS
//When clicked on option with "other" value
$('#alterationForm1 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if(val === 'otherClick') {
$('#alterationForm1 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationForm1 .textBoxDiv').addClass('hideMe');
}
});
$('#alterationSection2 .alterationTypeSelect').on('change', function(){
var val = $(this).val();
if (val === 'otherClick') {
$('#alterationSection2 .textBoxDiv').removeClass('hideMe');
}
else{
$('#alterationSection2 .textBoxDiv').addClass('hideMe');
}
});
$('.demoClass .alterationTypeSelect').on('change',function(){
var val = $(this).val();
if (val === 'otherClick') {
$('.demoClass .textBoxDiv').removeClass('hideMe');
}
else{
$('.demoClass .textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Thank you so much for the help. I am in a great need for this help. Please find the pen link to better understand the entire problem.
please follow the below pen as I have modified your code as we want elements to be dynamically triggered:
https://codepen.io/anon/pen/NYyvpy?editors=1011
//question mark tooltip
$('[data-toggle="tooltip"]').tooltip()
//When clicked on other button
$('body').on('change','.alterationTypeSelect', function(){
console.log(544);
var val = $(this).val();
if(val === 'otherClick') {
$(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
}
else{
$(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
}
});
//Dynamic Adding
$("#czContainer").czMore();
Also, follow this link if you want to understand how newly added elements work with events
Event binding on dynamically created elements?

jquery data attributes search with condition

I am using jquery's data attributes to search values from dropdown. Here below is the thing what i am doing here..
$(document).ready(function() {
// Default selected as blank value
$('#search_by_brand').prop('selectedIndex', "");
// Our work page - Search by Brand
$('#search_by_brand').change(function() {
$('#search_by_channel').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var brand_value = $(this).val();
if(brand_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-brand='"+ brand_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_channel').prop('selectedIndex', "");
// Our work page - Search by Product Channel
$('#search_by_channel').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_type').prop('selectedIndex', "");
var channel_value = $(this).val();
if(channel_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-channel='"+ channel_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
// Default selected as blank value
$('#search_by_type').prop('selectedIndex', "");
// Our work page - Search by Product Type
$('#search_by_type').change(function() {
$('#search_by_brand').prop('selectedIndex', "");
$('#search_by_channel').prop('selectedIndex', "");
var type_value = $(this).val();
if(type_value != '')
{
$( ".filtr-container div" ).hide();
$( ".filtr-container div[data-type='"+ type_value + "']" ).show().children().show();
$(".filtr-container").find(".mask").show();
}
else
{
$( ".filtr-container div" ).show();
}
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if(visible_divs == 0)
{
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else
{
$( ".no_records" ).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<label class="control-label">Brand</label>
<select class="form-control" id="search_by_brand" name="search_by_brand">
<option value="">Select Product Brand</option>
<option value="GLAM">GLAM</option>
<option value="PEDIGREE">PEDIGREE</option>
<option value="NESTLE">NESTLE</option>
<option value="HAVAIANAS">HAVAIANAS</option>
<option value="ROYAL CANIN">ROYAL CANIN</option>
<option value="EUKANUBA">EUKANUBA</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Channel</label>
<select class="form-control" id="search_by_channel" name="search_by_channel">
<option value="">Select Product Channel</option>
<option value="Pharmacy">Pharmacy</option>
<option value="Pet">Pet</option>
<option value="Department Store">Department Store</option>
<option value="Vet">Vet</option>
</select>
</div>
<div class="form-group m-l-30">
<label class="control-label">Type</label>
<select class="form-control" id="search_by_type" name="search_by_type">
<option value="">Select Product Type</option>
<option>Advertisement</option>
<option>Campaign</option>
</select>
</div>
</form>
<div class="filtr-container">
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Vet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/10">
<img src="http://static.tumblr.com/yka2yx5/YHAm28h2j/glam_fb.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Daily Care</span><br>
<span class="roboto-light">Vet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="ROYAL CANIN" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/9">
<img src="http://www.royalcanin.com.au/extension/site_subsidiary_v3/design/subsidiary_v3/images/article/no-img-article.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">ROYAL CANIN</span><br>
<span class="f-s-23 lobstar">Feline Gondola End</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="HAVAIANAS" data-channel="Department Store" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/8">
<img src="http://image.brazilianbikinishop.com/images/products/flipflop-havaianas-brasil-logo-green-0.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">HAVAIANAS</span><br>
<span class="f-s-23 lobstar">Pop Up</span><br>
<span class="roboto-light">Department Store</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="NESTLE" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/7">
<img src="http://www.indiantelevision.com/sites/drupal7.indiantelevision.co.in/files/images/mam-images/2016/04/18/mam%20financials.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">NESTLE</span><br>
<span class="f-s-23 lobstar">Good Life</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="PEDIGREE" data-channel="Pet" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/6">
<img src="https://www.petsworld.in/media/brands/6/pedigree2.jpg" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">PEDIGREE</span><br>
<span class="f-s-23 lobstar">Cleaner gets you closer</span><br>
<span class="roboto-light">Pet</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 filtr-item" data-brand="GLAM" data-channel="Pharmacy" data-type="Advertisement">
<div class="view-inner view-first text-center">
<a href="http://localhost/5p_front/product/5">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/GLAM_logo.png" height="20%" width="20%">
<div class="mask">
<p>
<span class="f-s-23">GLAM</span><br>
<span class="f-s-23 lobstar">Beauty Bar</span><br>
<span class="roboto-light">Pharmacy</span><br>
</p>
</div>
</a>
</div>
<div class="filter-shadow"></div>
</div>
</div>
As you can see in my demo that i am searching Products from Brand,Channel and Type. But i want to enable an ability to Advance Search the same thing with multiple dropdown.
For now it is searching only with one dropdown, i want an ability to search with multiple dropdown say for example, if i select Product Brand "GLAM" and Product Channel "Pharmacy" then only those records should come using "AND" condition or jquery or something like that ..
Same should apply to Product Type as well .. What should i do ?
Thanks
You can assign a class to all select elements and bind change using class selector as code is same for all select elements.
You can create filters based on values of dropdown and dynamically add filters if value of dropdown is selected.
$(document).ready(function () {
$('.selectFilter').change(function () {
var brand_value = $("#search_by_brand").val();
var channel = $('#search_by_channel').val();
var type = $("#search_by_type").val();
var channelFilter = "";
var typeFilter = "";
var brand_valueFiltr = "";
if (brand_value != '')
brand_valueFiltr = "[data-brand='" + brand_value + "']";
if (channel != '')
channelFilter = "[data-channel='" + channel + "']";
if (type != '')
typeFilter = "[data-type='" + type + "']";
$(".filtr-container div").hide();
$(".filtr-container div" + brand_valueFiltr + channelFilter + typeFilter).show().children().show();
$(".filtr-container").find(".mask").show();
// getting the lenght of number of divs which are available ..
var visible_divs = $('.filtr-container').children('div:visible').length;
if (visible_divs == 0) {
$(".filtr-container").append('<p class="no_records text-center f-s-18 m-t-15 col-sm-12" style="padding: 300px 0px;">No Records Found</p>');
}
else {
$(".no_records").remove();
}
});
});
Here is jsfiddle

Jquery - Cloning collapsible divs

So im trying to build the front end of a form builder however i've run into a problem when trying to clone collapsible elements. Im an absolute beginner at jquery so sorry for the dirty code.
When an element is cloned and it is nested under itself with a modified sortable jquery plugin, any one of the bottom levels collapsible's will open the collapsible of the top level parent (but not any of the other nested elements).
My jquery is:
var count = 1;
$("#displayUpload").click(function() {
var clonecount = 'Uploadpanel' + count;
var cloneobject = $("#toggleUpload").clone(true).appendTo(".sortable").show();
$("#Uploadpanel", cloneobject).attr('id', clonecount);
$(cloneobject, this.id).on("click", (".edit", ".panel-title"), function() {
$("#" + clonecount, this.id).collapse('toggle');
});
$(cloneobject).on("click", ".remove", function() {
$(cloneobject).remove();
});
count = count + 1;
});
Html:
<li id="toggleUpload" data-role="main" class="js-form-element" style="display: none">
<div>
<div class="panel panel-default" data-role="collapsible" id="panel3">
<div class="panel-heading">
<h4 class="panel-title" data-target="#Uploadpanel"
href="#Uploadpanel">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="edit">
File upload
</a>
<span class="btn-group pull-right">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="collapsed">Edit</a>
<span class="padding-line">|</span>
<a class="remove" href="#">Delete</a>
</span>
</h4>
</div>
<div id="Uploadpanel" class="panel-collapse collapse">
<div class="panel-body">
<div class="margin-bottom-20">
<p class="font-italic">Label:</p>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Label">
</div>
<div class="margin-bottom-20">
<p class="font-italic">Placeholder text:</p>
<input type="text" class="form-control" placeholder="Placeholder message">
</div>
<div class="margin-bottom-5">
<div class="checkbox">
<label>
<input id="required" type="checkbox"> Required
</label>
</div>
</div>
<div class="margin-bottom-20">
<p class="font-italic">Validation message:</p>
<input type="text" class="form-control" id="validation" placeholder="Validation message">
</div>
<div>
<div class="row">
<div class="col-sm-6">
<p class="font-italic">Form input size:</p>
<div class="form-group">
<select name="form_select">
<option value="0">100% (1 in a row)</option>
<option value="0">33% (3 in a row)</option>
<option value="0">50% (2 in a row)</option>
</select>
</div>
</div>
<div class="col-sm-6">
<p class="font-italic">Form position:</p>
<div class="form-group">
<select name="form_select">
<option value="0">Left</option>
<option value="0">Middle</option>
<option value="0">Right</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
Any help would be great,
Thanks
There can be some issues using clone on objects that already has event handlers. I had this issue for a while, and I just resolved it by creating a function that generates a new jQuery object, instead of cloning an existing one.

Categories