There is a form that I wanted to clone this form every time the ADD button clicked. in this case form appended with previous values for inputs. I want each form work separately. Is there a way to append with empty values for inputs?
Here is my snippet :
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
Yes, just clear them in the cloned copy (see *** line):
$(document).ready(function() {
$(".Add").click(function() {
$(".formi")
.eq(0)
.clone()
.find("input").val("").end() // ***
.show()
.insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
That specific example uses find to find the input, val to clear its value, and then end to return to the original set of cloned elements so that show and insertAfter are run on that set (instead of the input(s)).
You should first clone the form and then reset the element values as follows. In your case input.
$(document).ready(function() {
$(".Add").click(function() {
var form = $(".formi").eq(0).clone();
form.find("input[type=text]").val("");
form.show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
You could select the last form after the clone then empty the value of the child inputs like :
$(".formi:last input").val('');
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
$(".formi:last input").val('');
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
I refactored some of your stuff because I had to do it differently in order to make it work the way i wanted it to, but here it is.
Here is the JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"> </script>
<span class="Add">Add+</span>
<div class="all">
<div class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button class="add">ok</button>
<span class="cancel">Cancel</span>
</div>
</div>
function addClickListener(){
arr = $(".add")
$(arr[arr.length - 1]).click(function(ev) {
var clone = ev.currentTarget.parentElement.cloneNode(true);
$('.all').append(clone);
addClickListener();
});
cancArr = $('.cancel');
$(cancArr[cancArr.length - 1])
.on('click', function() {
$(this).parent().remove();
});
}
addClickListener();
Related
I have multiple select, and user can add more than select (make clone).
In every select includes option, and the same in all select,
on click add button make clone select div.
<select>
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
and more,...
I need to make that, when i select English from select one, Disabling the rest.
var stdCountries = $("#countriesContainer").children(".countries").first().clone('.add');
$(document).on('click', '.add',function() {
append_countries();
});
function append_countries() {
var objHtml = stdCountries.clone('.add');
$("#countriesContainer").append(objHtml);
$('.m_selectpicker').selectpicker();
}
/////////////////////////////////////////////////////////
$(".m_selectpicker").selectpicker();
$(document).on("click", ".remove", function(){
if($('#countriesContainer .countries').length > 1)
{
$(this).closest(".countries").remove();
}
else
{
generate('info', 'error');
}
});
$(document).on("change", ".m_selectpicker", function() {
$(this).parents('.countries').find('.lang').attr('name', 'name' + '[' + this.value + ']');
$(this).parents('.countries').find('.lang').attr('value', this.value);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
<div class="m-portlet__body">
<div id="countriesContainer">
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">Language</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name[]" value=""/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
remove
</a>
</div>
</div>
</div>
</div>
</form>
if you any idea please to help me,
Thanks you
Regards.
<select id="selectOne" class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
Js
$(document).on("change", "#selectOne", function(){
if($('#selectOne').val() == 'en'){
$('select:not("#selectOne")').attr('disabled', true);
}else{
$('select:not("#selectOne")').attr('disabled', false);
}
});
I am trying to clone a select2 with it's options but it doesn't seem to work.
I tried to destroy before recreating, to remove the span before recreating, but nothing works. Here is the basic code.
HTML :
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="select2" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="select2" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>
Javascript :
function addRow() {
var div = $('div[id^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
div.after( clone );
}
$(".select2").select2();
Here is a fiddle containing my problem :
https://jsfiddle.net/L5mn63g7/25/
So any idea what could the problem be? To be able to clone select2 WITH it's options.
Remove span tags before cloning and rebind select2 to the cloned dropdowns.
Hope it will help you.
function addRow() {
var div = $('div[id^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});
clone.find("span").remove();
clone.find(".select2").select2();
clone.find(".select2-container").css("width","300px")
div.append( clone );
}
$(".select2").select2();
select {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="select2" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="select2" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>
You have to destroy select2 first before cloning and change the name of selector for select2 to something other. Here is working solution
function addRow() {
$('.items').select2("destroy");
var div = $('div[id^="row"]:last');
var num = parseInt(div.prop("id").match(/\d+/g), 10) + 1;
var $clone = div.clone().prop('id', 'row_' + num);
$clone.find('[id]').each(function() {
var $this = $(this);
$this.prop('id', $this.prop('id').split('_')[0] + '_' + num);
});
div.after($clone);
$('.items').select2();
}
$(".items").select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="items" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="items" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>
I am having issues when trying to select the element which contains all the selected values.
For example: if you select by id such as
$('#campaign-select').multiselect('refresh'),
it is not doing anything. Why is that?
Please see jsFiddle
FIXED IT!
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('rebuild');
/* resetting the select element to refresh*/
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {
$(this).prop('selected', false);
})
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')
});
Here is updated to jsFiddle
You need to set the value to an empty array before refreshing the multi select. Also, note that you are missing an "s" in "campaign" inside you selector.
Use this: $('#campaigns-select').val([]).multiselect('refresh')
According to the documentation you can use:
.multiselect('deselectAll', justVisible): Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.
After calling the previous method you need to updateButtonText:
.multiselect('updateButtonText'): When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
Hence you can write:
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
var msOptions = {
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: false,
buttonWidth: '80%',
buttonText: function (options, select) {
return options.length + ' selected';
}
};
$('#campaigns-select').multiselect(msOptions);
$('#sites-select').multiselect(msOptions);
$('#mdmadservers-select').multiselect(msOptions);
$('#ratetypes-select').multiselect(msOptions);
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="wrapper">
<!--SideBar-->
<div id="sidebar-wrapper">
<div class="sidebar-header" style="text-align:center;">Filters</div>
<div id="sidebar-filter panel panel-default">
<div class="form-group">
<div class="text-caption" style="margin-top:20px;">Date Range</div>
<div style="width: 80%;margin-left: 30px">
<input type='text' name="daterange" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<div class="text-caption">Campaign</div>
<select class="form-control campaigns-select-class" id="campaigns-select" multiple="multiple">
<option value="2929">TestCampaign1</option>
<option value="2930">TestCampaign2</option>
<option value="2931">TestCampaign3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Site</div>
<select class="form-control sites-select" id="sites-select" multiple>
<option value="1010">TestSite1</option>
<option value="1011">TestSite2</option>
<option value="1012">TestSite3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Server</div>
<select class="form-control mdmadservers-select" id="mdmadservers-select" multiple>
<option value="1"> TestServer1</option>
<option value="2"> TestServer2</option>
<option value="3"> TestServer3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Rate Type</div>
<select class="form-control ratetypes-select" id="ratetypes-select" multiple>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">
<input type="checkbox" class="hide-completed-entries" id="hide-completed-entries" checked="checked">
Hide Completed
</div>
</div>
<button type="button" class="btn btn-success btn-block" id="filter-btn">Apply</button>
<button type="button" class="btn btn-primary btn-block resetfilters" id="filter-reset-btn">Reset</button>
</div>
</div>
</div>
try it!
$('#campaign-select').multiselect({
buttonWidth: 330,
includeSelectAllOption: true,
allSelectedText: 'Clean all',
onSelectAll: function (options) {
$("#campaign-select").multiselect("clearSelection");
}
});
Or adding Reset button
$('#campaigns-select').multiselect({
buttonWidth: 330,
enableResetButton: true,
resetText: "Clean"
});
Print 01
Print 02
I am trying to hide various div elements, but I want to make it dynamic so if I unselect then it shows back up in the browser. This is easy enough with show/hide, but my problem is that I need to show/hide some of the same fields. It works on the first selection, but then the second run it won't do anything because it thinks it should show it as per the '.show()' in the first run.
Can anyone point me in the right direction?
Thanks
S.
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
<script>
$(document).ready(function(){
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
HTML like this:
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1" id="nat">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" id="nat2">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text">
</input>
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text">
</input>
</label>
</div>
You don't need to define $(document).ready twice. Try this:
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
See fiddle https://jsfiddle.net/r2m9s8gx/
You can try to have a single handler like
$(document).ready(function() {
$('select[name="field1"], select[name="field2"]').on('change', function() {
var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat';
$("#field25, #field26").toggle(state);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" type="text">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text" />
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text" />
</label>
</div>
try
$(this).val() === 'no_nat'
or
$('#nat').val() === 'no_nat'
Firstly here's the fiddle
I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:
Adding images directly in each option but this plugin removes all html in
Used jquery after() to add image after the field but it does not work.
HTML Code:
<div class="col-sm-12">
<div id="vm" class="tab-pane fade in active">
<div class="panel panel-primary">
<div class="panel-body">
<form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<div class="col-md-8">
<div class="form-group">
<input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
<div class="controls">
<label for="Server0Vm">hosta0451483t</label>
<input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option value="ctrlr0451483t">ctrlr0451483t</option>
<option value="ipr0451483t">ipr0451483t</option>
<option value="ldap0451483t">ldap0451483t</option>
<option value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
jQuery Code:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: 'auto',
numberDisplayed:15,
onChange: function(element, checked) {
//console.log(element.attr('value') + checked);
$("ul.multiselect-container").find("input[type=checkbox]").each(function(){
//console.log(element.attr('value'));
var valueAttr = $(this).attr('value');
if (element.attr('value') == valueAttr) {
var checkParent = $(this).parent().parent().parent().hasClass('active');
//console.log(checkParent);
if (checkParent == false) {
$(this).removeAttr('disabled')
}else{
$(this).attr('disabled','disabled')
}
}
});
}
});
});
Any help would be appreciated.
You can use optionLabel option
optionLabel A callback used to define the labels of the options
$('.multiselect').multiselect({
enableHTML: true,
optionLabel: function(element) {
return '<img src="'+$(element).attr('data-img')+'"> '+$(element).text();
},
// ...
});
HTML:
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
<option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
<option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
<option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
JSFiddle
You can try this:
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true,
enableHTML: true,
optionLabel: function(element) {
return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
},
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple>
<option value="cheese" data-img="100/109">AAA</option>
<option value="tomatoes" data-img="100/108">BBB</option>
<option value="mozarella" data-img="100/107">CCC</option>
<option value="mushrooms" data-img="100/106">DDD</option>
<option value="pepperoni" data-img="100/105">EEE</option>
<option value="onions" data-img="100/110">FFF</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
</div>
</form>