Can anyone please let me know what is wrong with the following code:
HTML
<div class="form-wrapper">
<div class="form-repaet">
<div class="form-group">
<select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;">
<option selected="selected">Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2" name="book[0].is" style="width: 100%;">
<option selected="selected">is</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;">
<option selected="selected">Select a Tag</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
<span class="dropdown-label"><i class="ion-gear-b"></i></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li class="active">
All
</li>
<li>Option2</li>
<li>Option3</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="line line-dashed line-lg pull-in"></div>
</div>
JavaScript I am using following codes for javascript
$(document).ready(function(){
var counter = 1;
$("#add-form").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$(".form-repaet:last").clone().appendTo(".form-wrapper");
//$(".form-repaet:last").select2();
counter++;
});
$("#removebtn").click(function () {
if(counter==1){
return false;
}
$(".form-repaet").last().remove();
counter--;
});
});
It is creating a clone of 'form-repaet' div but the select box is not working. I've tried select2(); after clone, but it is not working. Any help would be appreciated. Thanks so much!
Here is a working jsFiddle
First of all, add another selector to select2 elements, not select2 because that is attached to the spans what selec2 created. This is why you get that error:
The select2('destroy') method was called on an element that is not using
In my case this is xxx
And use like this:
$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();
I did not care about remove.
NOTE
In HTML all ID-s should be unique, so care about it, when you clone.
This worked for me:
before code:
addRecord($(this).closest('.glacc-detail'));
after change code:
$('.select2bs4').select2('destroy'); //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2(); //added this line
Related
I am having a popup and a foreach on my view , it has a dropdown too, on a button click I need to get the selected value of the drop-down,
Each time I click it returns the first drop down value
I couldn't use $(this).val()
Is there any way.
This is my code
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="exampleInputPassword1">Review outcome:</label>
</div>
<div class="col-md-6">
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor" >Minor</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" style="height:10px;"></div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9"></div>
</div>
<div class="modal-footer" style = "margin-top:15px;">
<div class="row">
<div class="col-md-6">
<input type="submit" class="btn btn-primary ecg_followup_submit" name="Submit" style = "width:50%; height:35px; margin-right:150px;" />
</div>
</div>
</div>
I have removed the unwanted codes
Thank you
To get the value of 'selected' option you do not need to use :selected. you can get the selected value like any other input. $('your selector').val()
However, if you do not change your selection, the first option will be selected by default.
Here is an example inspired from your code.
jQuery(document).ready(function($){
$('.btn').click(function(e){
e.preventDefault();
console.log($('.reviewoutcome_change').val());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor">Minor</option>
</select>
<button class="btn">show selected</button>
just change
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
to this
$( ".ecg_followup_submit" ).click(function(e) {
alert($( '.reviewoutcome_change' ).val());
});
Find one common ancestor. I assume that you have multiple rows then?
$(".ecg_followup_submit").click(function (e) {
const row = $(this).closest(".row")
const selectedOption = row.find(".reviewoutcome_change");
alert(selectedOption.val());
});
I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});
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?
I have an issue. I am trying to append option tag dynamically but its not coming properly using Jquery/Javascript.Here also I am using bootstrap chosen-select class. I am explaining my code below.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
My javascript code is given below.
var url="common.php?action=getCity";
$.post(url,{"con_data":conval.options[conval.selectedIndex].value},function(data){
var obj=JSON.parse(data);
if(obj.isData==1){
$('#ctid').find('option').not(':first').remove();
$.each(obj.cid, function() {
$("#ctid").append("<option value="+this.city_id+">"+this.city_name+"</option>");
})
}
})
Here also i am getting the data properly and the loop is also running.But its not reflecting at front end.when I did inspect element i got the below generated html code.
<div class="popover-content">
<p>
<select class="chosen-select text-left" style="width: 100%; display: none;" id="ctid">
<option value="" selected="">Select City</option>
<option value="18">Bhubaneswar</option>
<option value="17">Delhi</option>
<option value="16">Bangalore</option>
<option value="15">Mumbai</option>
</select>
<div class="chosen-container chosen-container-single chosen-with-drop chosen-container-active" style="width: 0px;" title="" id="ctid_chosen">
<a class="chosen-single" tabindex="-1"><span>Select City</span>
<div><b></b>
</div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">Select City</li>
</ul>
</div>
</div>
</p>
</div>
The raw html code is generating the above part after option added dynamically.But my problem is thosze are not display on the front end view.Please help me to resolve thisz issue.
I think each loop every object and gives index as its first param and val as second, try this:
$.each(obj.cid, function(idx, o) {
$("#ctid").append("<option value="+o.city_id+">"+o.city_name+"</option>");
});
If you would like to get the options in the resulting ul, then make sure to append them first before initing chosen.
$.each(obj, function(idx, o) {
$("#ctid").append("<option value=" + o.city_id + ">" + o.city_name + "</option>");
});
$('#ctid').addClass('chosen-select');
$('.chosen-select').chosen();
HTML
<div class="popover-content">
<p>
<select class="text-left" style="width:100%;" id="ctid">
<option value="" selected>Select City</option>
</select>
</p>
</div>
Hope this helps
After seeing my questions replied here and with success, the problems appeared when transposing to my script:
I have a dropdown that is being cloned which shows it's value on a side div. The problem is that when I clone it, the dropdown below don't work and the first updates all the remaining. Code:
Add
<div class="row">
<div class="products-row">
<div class="col-xs-12 nopadding">
<div class="col-xs-2">
<input type="text" id="number1" class="form-control" value="1" />
</div>
<!-- if i remove the div below and leave only the select, it works -->
<div class="col-xs-6" >
<select name="total-checkout" id="name" class="form-control product-name select" >
<option value="25" >A</option>
<option value="50" >B</option>
<option value="75" >C</option>
</select>
</div>
<div class="col-xs-2">
<div class="tags">25</div>
</div>
</div>
</div>
</div>
jQuery:
var count = 0;
$('#add-more').click(function(){
var id = $(".row:last").attr('id');
var appendDiv = $($(".products-row:last")[0].outerHTML);
appendDiv.attr('id', ++id).insertAfter(".products-row:last");
});
$('#name').change(function(event) {
$('.tags').html($('#name').val());
});
$(document).on('change', '.select', function() {
$(this).next(this).html($(this).val());
});
Working jsFiddle:
http://jsfiddle.net/QuadDamage/p843nc9j/
If I remove the <div class="col-xs-6"> from around the <select> the output will appear not formatted but correctly updating the div.
Thanks in advance.
It seems to me that you're targeting .col-xs-2 .tags if this is the case you need this code
$(this).parent().next().find('.tags').html($(this).val());